Html

HTML（结构）

目录

什么是html？

超文本（文字，图片，视频，音频，动画）标记语言

HTML的结构：

DOCTYPE:告诉浏览器，使用的是什么规范

head:网页头部

meta:描述性标签，描述网站的一些信息，一般用来左seo（搜索引擎优化算法）

title:网页标题

body:网页主体

<!--DOCTYPE：告诉浏览器，使用的是什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head 网页头部-->
<head>
<!-- meat描述性标签，描述网站的一些信息，一般用来左seo（搜索引擎优化算法）   -->
    <meta charset="UTF-8">
<!-- 网页标题  -->
    <title>复习html</title>
</head>
<!--body网页主体-->
<body>
你好
</body>
</html>

标签：

基础标签：

  1. 标题标签：

  2. 段落标签：

  3. 换行标签：
  4. 水平线标签：
  5. 粗体，斜体：粗体,斜体
  6. 注释和特殊符号：
    1. 空格：&nbsp；
    2. 大于：&gt；
    3. 小于：&lt；
    4. 版权符号：&copy；
    5. 注释：
<body>
<!--1. 标题标签：<h1>  <hn>-->
<h1>   一级 </h1>
<h2>   二级 </h2>
<!--    2. 段落标签：<p>-->
<p>段落</p>
<!--    3. 换行标签：<br/>-->
没换行
<p>换行了</p>
不信你看
<!--    4. 水平线标签：<hr/>-->
<hr>
<!--    5. 粗体，斜体：<b>粗体<b/>,<em>斜体<em/>-->
<b>粗体</b>
<em>斜体</em>
<!--    6. 注释和特殊符号：-->
<!--    1. 空格：&nbsp；-->
空&nbsp;格
<!--    2. 大于：&gt；-->
2&gt;1
<!--    3. 小于：&lt；-->
1&lt;2
<!--    4. 版权符号：&copy；-->
&copy;刘超持有
<!--    5. 注释：&lt;!&ndash; 注释 &ndash;&gt;-->
<!-- 注释 -->
</body>

图片标签：

  1. 常见图片格式：jpg，png，gif（动），bmp
  2. 语法 <img src="../resource/img.png" alt="出错了" title="看啥呢" height="300px" width="150px">
    • src :路径
      • 绝对路径：D:\java高级部分\前端复习\src\resource\img.png
      • 相对路径：../resource/
    • alt：表示出错时显示什么
    • title:鼠标放上去显示什么
    • hight，width：大小
<body>
<!--
src :路径
绝对路径：D:\java高级部分\前端复习\src\resource\img.png
相对路径：../resource/
alt：表示出错时显示什么
title:鼠标放上去显示什么
hight，width：大小
-->
<img src="../resource/img.png" alt="出错了" title="看啥呢" height="300px" width="150px">
</body>

链接标签：

  1. 普通超链接：
    1. 格式：< a href="跳转地址">链接显示的内容（文字，图片，视频）
    2. href:地址（必填）
    3. targe（目标）：在哪个窗口打开，_blank：另外一个窗口，_self：当前窗口
    4. 标签内可以插入文字，图片，视频生成图片链接，视频链接
  2. 锚链接：
    1. 需要一个锚标记，属性name标记
    2. 使用#跳转到标记
  3. 功能性链接：
    1. 邮件链接：
    2. qq邮箱链接：百度（qq推广），进去点击输入内容，复制代码，看看uin后是不是你的qq号，不是改一下，不然用不了
<body>
<!--
1.普通超链接
格式：<a href="跳转地址">链接显示的内容（文字，图片，视频）</a>
href:地址（必填）
targe（目标）：在哪个窗口打开，_blank：另外一个窗口，_self：当前窗口
2.锚链接：
（1）需要一个锚标记，属性name标记
（2）使用#跳转到标记
3.功能性链接：
邮件链接：mailto
qq链接：百度（qq推广），进去点击输入内容，复制代码，看看uin后是不是你的qq号，不是改一下，不然用不了
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2381489636&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="你好" title="你好"/>
点击联系我的qq
</a>
-->

<a href="https://www.baidu.com">跳转到百度</a>

<!--图片链接-->
<a href="BasicLable.html" name="开头">
    <img src="../resource/img.png" alt="对对对">
</a>

<!--为了显示锚链接效果复制的内容-->
<a href="BasicLable.html">
    <img src="../resource/img.png" alt="对对对">
</a><a href="BasicLable.html">
    <img src="../resource/img.png" alt="对对对">
</a><a href="BasicLable.html">
    <img src="../resource/img.png" alt="对对对">
</a><a href="BasicLable.html">
    <img src="../resource/img.png" alt="对对对">
</a><a href="BasicLable.html">
    <img src="../resource/img.png" alt="对对对">
</a><a href="BasicLable.html">
    <img src="../resource/img.png" alt="对对对">
</a><a href="BasicLable.html">
    <img src="../resource/img.png" alt="对对对">
</a><a href="BasicLable.html">
    <img src="../resource/img.png" alt="对对对">
</a>
<!--开头就是上面一个定义的name-->
<a href="#开头">锚链接</a>

<!--功能性链接-->
<!--邮件链接-->
<a href="mailto:2381489636@qq.com">点击联系我</a>
<!--qq链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2674897520&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="你好" title="你好"/>
点击联系我的qq
</a>
</body>

块元素和行内元素

列表标签：

  • 什么是列表：列表就是将信息，以结构化和条理化的并以列表的样式显示出来
  • 类型：
    • 有序：ol=order list ；应用：试卷，问答
    • 无序：ul:unorder list ； 应用范围：导航，侧边栏
    • 自定义：Definition（定义）； list 应用范围：网站底部
    • 语法使用：看下面代码
<body>
<!--有序 ol=order list  li：list
 应用范围：试卷，问答
 -->
<ol>
  <li>有序1</li>
  <li>有序2</li>
  <li>有序3</li>
  <li>有序4</li>
</ol>
<!--无序：unorder list
应用范围：导航，侧边栏
-->
<ul>
    <li>无序1</li>
    <li>无序2</li>
    <li>无序3</li>
    <li>无序4</li>
</ul>
<!--自定义标签
dl：Definition（定义） list
dd：定义描述：Definition Description
dt：定义术语：Definition Term
应用范围：网站底部
-->
<dl>
    <dt>列表名称1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dd>内容3</dd>
    <dt>列表名称2</dt>
    <dd>内容1.1</dd>
    <dd>内容2.2</dd>
    <dd>内容3.3</dd>
</dl>
</body>

表格标签：

语法：

table

​ tr

​ td td/

​ tr/

table

实现跨行：rowspan

跨列：colspan

<body>
<!--
table:表格
行：tr：table row
列：td：table date
跨列：clospan
跨行：rowspan
-->
<table border="1px">
  <tr>
<!-- colspan跨列     -->
    <td colspan="2">列1</td>
    <td>列2</td>
  </tr>
    <tr>
<!--  rowspan跨行      -->
        <td rowspan="2">列2.1</td>
        <td>列2.2</td>
        <td>列2.3</td>
    </tr>
    <tr>
        <td>列3.1</td>
        <td>列3.2</td>
    </tr>
</table>
 </body>

媒体元素：

视频：video

音频：audio

<body>
<!--
视频video
src：地址
controls：显示控件
autoplay：自动播放
muted：静音

音频audio
-->
<video src="../resource/1633619471594.mp4" controls autoplay="autoplay" width="500px">视频</video>
<audio src="../resource/ALisa%20-%20溯Reverse(治愈版).mp3" autoplay controls></audio>
</body>

iframe内联框架:

1642224216241

<body>
    <!-- 像b站得视频都是用这种显示得 -->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="100%">
</iframe>
</body>

表单：

  1. 提交方式

    • get：不安全，高效，会暴露我们的信息
    • post：比较安全，效率不如get，适合传输大文件

  2. .单选框：

    • radio：属性name一样就是一个组的，就只能从一个组里选择一个

  3. 多选框：

    • checked：

  4. 按钮：

    1. button：普通按钮
    2. image：图片按钮
    3. submit：提交按钮
    4. reset：重置按钮

  5. 下拉框（具体看下面代码）：

    1. 标签select里option标签

  6. 文本域：textarea

  7. 文件域：type="file"

  8. 验证，搜索框，滑块(看代码)

  9. 常用的应用：属性：隐藏域hidden，只读readonly，禁用disable

  10. 表单的初级验证：

    • 默认提示信息placeholder
    • 非空判断：required
    • 正则表达式：pattern
    <body>
<!--
method:提交得方式
action:提交得地址，可以是网站也可以是请求处理地址
get：不安全，高效，会暴露我们的信息
post：比较安全，效率不如get，适合传输大文件
value:默认值
maxlength：最大长度

type="text":文本框
type="password"：密码框
type="radio"：单选框，当name相同就是表示是同一组，只能选其中一个
type="checkbox":多选框，在单选和多谢后写个属性 checked就算默认
select，option：下拉框
textarea：文本域
type="file":文件域
type="email/url/number/range/search":<!--(email,url,range)验证,滑块,搜索框-->
button，submit，image，reset：按钮
-->
<form method="get" action="Video.html">
<!-- 文本框   -->
   <p>账号：<input type="text" value="" maxlength="6" name="user" readonly placeholder="账号"></p>
   <p>密码：<input type="password" name="password" required><br/>
<!--   单选框
name:必须一样才是一个组
value：get请求会将value值提交，提交的值
-->
       <input type="radio" name="sex" value="boy" hidden>男
       <input type="radio" name="sex" value="girl" >女
<!--    多选框-->
        <p>爱好：
             <input type="checkbox" value="女" name="hobby">女
             <input type="checkbox" value="game"name="hobby">游戏
             <input type="checkbox" value="code"name="hobby" disabled>代码
        </p>
<!--  下拉框select  -->
  下拉框：  <select name="下拉" >
        <option value="One">1</option>
        <option value="Two">2</option>
        <option value="three">3</option>
        <option value="four">4</option>
    </select>

<!-- 文本域 textarea  -->
    <p>
     <textarea name="text" id="" cols="30" rows="10">
 你好
    </textarea>
    </p>

<!-- 文件域file   -->
    <p>
        <input type="file" name="files">
    </p>
<!--验证,滑块,搜索框-->
   <p>
     邮箱: <input type="email" name="email">
   </p>
    数字<input type="number" name="nums" value="0"><br/>
    url: <input type="url" name="url"><br/>
    滑块: <input type="range" name="range" ><br/>
    搜索框: <input type="search" name="search"><br/>


    <!--  按钮
button：普通按钮
image：图片按钮
submit:提交按钮
reset：重置按钮
-->
    <p>
    <input type="button" name="提交" value="登录">
<!--   图片按钮 -->
    <input type="image" src="../resource/img.png" name="image" width="40px" height="20px">
   <input type="submit">
    <input type="reset">
    </p>
</form>
</body>

总结：

  1. 什么是html：超文本标签语言，超文本包括：文本，图片，音频，视频等
  2. 知道html的结构：title标题，mate网页描述，head网页头部，body网页主体
  3. 常用标签：
    1. 段落标签：p
    2. 标题标签：h1
    3. 换行标签：
    4. 粗斜体：b，em
    5. 图片标签：image，src，
    6. 链接标签：a ，src地址，trage（跳转到另外个页面，还是当前页面）
    7. 表格标签
      1. table tr td
      2. clospan：跨列
      3. rowspan：跨行
    8. 媒体标签：audio，vedio
      1. 属性：autoplay自动播放
      2. src：地址
      3. controls：显示控件
    9. 列表标签 有序ol li （问答试卷），无序 ul li（导航，侧边栏） ，自定义(dl,dt,dd)
    10. iframe：内联框架（视频播放）
  4. 表单
    1. 提交方式：
      1. get：不安全，数据暴露但高效
      2. post：安全，适合传大数据文件
    2. 重要，所有需要传数据的表单元素都要加，name，不然传不到后端
    3. text，password，文本框，密码框
    4. radio，单选框，checked多选框
    5. textarea文本域
    6. file文件域
    7. select ，option下拉框
    8. 按钮：button，image，submit，reset
posted @ 2022-03-14 18:39  又菜又ai  阅读(78)  评论(0)    收藏  举报