ELl-hsy

html标签

字数统计: 3.5k阅读时长: 15 min
2022/05/02

知识(必须知道)

1.浏览器内核

  1. 浏览器内核 = 渲染引擎

    ​ 浏览器 内核 备注

    ​ ie Trident ie，猎豹安全，360极速度浏览器，百度浏览器

    ​ firefox cecko 火狐浏览器内核

    ​ safari webkit 苹果浏览器内核

    ​ chrome/opera blink blink其实是webkit的分支

  2. 渲染引擎不同，导致解析相同代码时的 速度，性能，效果也不同；

2.SEO三大标签分别是哪些？

  1. title：网页标题标签

  2. description：网页描述标签

  3. keywords：网页关键词标签

    1
    2
    3
    4
    5
    <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="官网,致力于打造全球最大食品,生鲜电商购物平台">
        <meta name="keywords" content="食品,生鲜,服饰,家电,电商,购物">

3.页面语义的布局标签

标签名 语义化
header 网页头部
nav 网页导航
footer 网页底部
section 网页区块
article 网页文章
aside 网页侧边栏
iframe 内联接框架 
1
<iframe src="" frameborder="0">内联接框架</iframe>

  1. header 网页头部

  2. footer：网页底部

  3. nav 网页导航

  4. section 网页区块

  5. aside：网页侧边栏

  6. article 标签网页中用于存放文章的单独标签;

  7. iframe 标签网页内存放插入的外部链接的网页;

    frameborder 标签属性是指定的它的边框,只有 0 和 1 两个值, 1 是显示边框, 0 是没有;

4.网页开头结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 表示html的版本号 -->
<!DOCTYPE html>
<!-- 告诉浏览器以什么语言解析该html zh为中文,en表示英文 -->
<html lang="en">
<head>
    <!-- 避免乱码 字符集 utf-8 万国码 -->
    <meta charset="UTF-8">
    <!-- 以IE或者edg浏览器打开网页 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 为了移动端做适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

标签

1.文本格式

  1. 加粗

    1
    2
    <strong></strong>
    <b></b>

  2. 下划线

    1
    2
    <ins></ins>
    <u></u>

  3. 倾斜

    1
    2
    <em></em>
    <i></i>

  4. 删除线

    1
    2
    <del></del>
    <s></s>

  5. 它们都是行内标签,不会独占一行;

  6. 重要的内容放在语义化(单词)的里面;

  7. 不重要的就放在字母标签里面;

  8. 语义化强调了重要性;

额外内容:

  1. 长引用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    鲁迅说:
    <blockquote>
        这句话我从来没有说过;<br>
        000
    </blockquote>
    <!--
    自带缩进,显示结果:
    鲁迅说:
    	这句话我从来没有说过;<br>
    	000
    -->

  2. 短引用

    1
    2
    3
    4
    5
    子曰：<q>学而时习之，不亦乐乎</q>！
    <!--
    自带双引号,显示结果:
    子曰："学而时习之，不亦乐乎"！
    -->

2.h系列标题

1
2
3
4
5
6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
  1. h1 至 h6 一共六级;
  2. h1 至 h6重要性递减, h1 最重要, h6 最不重要;
  3. h1标签在网页中重要性仅次于title标签，一般情况下一个页面中在一般情况下标题标签只会使用到h1-h3，h4-h6很少用;
  4. 标题元素是块元素所以独占一行

3.p段落

1
<p></p>
  1. p 是一个块标签,独占一行;
  2. 段落之间有间隙;
  3. 段落中的文字会自动换行;

4.换行

1
<br>
  1. br 是一个单标签(自结束标签);
  2. 它强制性让其换行;
  3. 它独占一行;
  4. 换行后两行之间是没有间隙的;

5.水平分割线

1
<hr>
  1. 在所写的位置显示一条水平分割线;
  2. 有间隙;

6.图片

1
<img src="" alt="" title="" width="">
  1. src 是路径;
  2. alt 是图片不显示后显示的内容;
  3. title 是鼠标悬停时候显示的内容;
  4. width 是宽度,设置了宽度,高度 height 就可以不设置;

7.总体区域划分

1
2
3
4
5
<body>
    <header>头部</header>
    <main>唯一主体</main>
    <footer>可有可无的尾部</footer>
</body>

header 头部标签可以用于存放网页导航栏之类的;可以有多个;

main 唯一主体,整个网页内只能有一个;

footer 尾部标签,可有可无;同样可以有多个;

8.插入图片

1
<img src="" alt="" title="" width="">

  1. src 路径;

  2. alt 备注;

  3. title 是鼠标悬停时候显示的内容;

  4. width 是设置宽度的,同样在 img 的属性里也可以设置 高度 height;

  5. 设置了宽度 width 后没必要设置高度,因为浏览器会自动等比例设置高度 height;

  6. 在pc端，不建议修改图片大小，需要多大就裁多大；但是在移动端就需要，经常对图片进行缩放;

  7. 盘符,直接是F:...

  8. img这种元素属于替换元素(块与行内元素之间，具有两种元素的特点)

  9. 网络路径,直接是https://…

  10. 相对路径

相对路径都会使用 . 或 .. 开头

./表示当前文件所在目录

../表示当前文件所在目录的上一个目录

../../表示当前文件所在目录的上上一个目录

./ 可以省略不写，如果不写 ./ 也不写 ../ 则就相当于写了 ./

9.音频标签

  1. 常用写法:

    1
    2
    3
    4
    5
    <audio controls autoplay loop>
        对不起,您的浏览器不支持,请升级浏览器;
        <source src="./xxx.mp3">
        <source src="./xxx.ogg">
    </audio>

    此写法虽然不方便可以,但是写多条不同格式的音频, mp3 不支持则显示ogg 格式的;都不支持则会显示，写好的提示;

    1. 此写法虽然不方便可以,但是写多条不同格式的音频, mp3 不支持则显示ogg 格式的;都不支持则会显示，写好的提示;
    2. src 路径;
    3. controls 显示 播放器的控件;
    4. autoplay 自动播放(部分浏览器不支持)
    5. loop 循环播放;

  2. 另外一种写法:

    1
    <audio src="" ></audio>

​ 写法虽然方便,但是浏览器版本太低就会无法显示;比如: ie8;

10.视频

  1. 常用写法:

    1
    2
    3
    4
    <video controls autoplay muted>
        <source src="./xxx.mp4">
        <source src="./xxx.webm">
    </video>

  2. muted 是视频静音;

  3. 其他属性都与:音频一样;

11.超链接

1
<a href="./xxx.html" target="_self">xxx</a>

  1. href 跳转的位置;

    设置 # 是占位,也会跳转到页面的顶部;

  2. 把页面内一个位置设置 id ,在 href 里设置为 #目标的id属性值,则会跳转过去;

    id是唯一的,每一个页面不能出现相同的id;

  3. target 选择跳转后生成的页面,

    _self 默认值,默认在当前页面打开超链接;

    _blank 在新页面打开超链接

12.列表(list)

ul , ol , dl 下只能放各自的子标签( li , dt , dd );子标签里可以放任何标签;

列表常用与导航之类的;

  1. 无序列表 ul

    1
    2
    3
    4
    5
    <ul>
        <li></li>
        <li></li>
        ...
    </ul>

    无序列表在开发中是最常用到的;

    列表之间是可以嵌套的;

    无序列表使用 ul 标签创建，使用 li 表示列表项；

  2. 有序列表 ol

    1
    2
    3
    4
    5
    <ol>
    	<li>结构</li>
    	<li>表现</li>
    	<li>行为</li>
    </ol>

    有序列表使用 ol 标签创建，使用 li 表示列表项；

  3. 自定义列表 dl

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <dl>
    	<dt>结构</dt>
    	<dd>结构是骨头</dd>
    	<dd>结构是html</dd>
    	<dt>表现</dt>
    	<dd>表现是皮囊</dd>
    	<dd>表现是css</dd>
    	<dt>行为</dt>
    	<dd>行为是动作</dd>
    	<dd>行为是javas</dd>
    </dl>

    定义列表使用 dl 标签创建，
    使用 dt 来表示定义的内容;
    使用 dd 来对内容进行解析说明;
    dd 会缩进;

13.表格(table)

表格分为三部分：

​ 表格头部 thead

​ 表格主体：tbody

​ 表格底部：tfoot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table>
	<thead>
        <caption>学生信息</caption>
    </thead>
	<tbody>
        <tr>
			<th>姓名:</th>
            <th>程序员</th>
		<tr>
			<td>姓名:</td>
            <td>程序员</td>
            <td contenteditable="true"></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

caption 表格内标题标签;写在table里面;

th 表格内小标题，用于替换td标签，写在tr里面,有点类似于加粗;

border 用于设置边框;

contenteditable = “true” 把表格变成了输入框;

合并单元格

  1. 跨行合并：rowspan=”合并单元格的个数”

  2. 跨列合并：colspan=”合并单元格的个数”

  3. 跨行合并，把代码写在最上面的单元格上；

  4. 跨列合并，把代码写在最左侧的单元格上；

  5. 例子：

    1
    <td colspan="2"></td>

​ 合并过后多余的单元格删除即可

14.表单(form)

表单分为:

​ 表单域

​ 表单控件(输入框,按钮等等)

​ 提示信息

1
2
3
<!-- action是后台服务器的地址,是后端给外面的地址 -->
<form action="" method="" name="">
</form>

action 是后台服务器的地址,也可以是一个网页;

method 设置提交的方式;

​ 用于信息中有隐私信息的用: pst ;

​ 没有隐私信息的用: get ;

name 用于区分表单信息;

14.1.输入框

1
2
3
4
5
文本框
<input type="text" placeholder="123456" name="" value="">
单选框<input type="radio" checked>
复选框<input type="checkbox">
密码<input type="password" maxlength="5">

  1. placeholder 占位文本,用于输入框内默认显示且不占位置的文本;

  2. name和value是每个表单元素都有的属性值，主要给后台人员使用;

  3. value是默认显示的内容

  4. checked 是默认勾选;

  5. maxlength 是规定输入内容的长度;

    type属性值:

    button 定义按扭

    checkbox 定义复选框

    file 定义输入字段和”浏览”按扭,供文件上传

    hidden 定义隐藏的输入字段

    image 定义图片

    password 定义密码字段,以*号显示

    radio 定义单选框

    reset 定义重制按扭,会重置表单所有数据

    submit 定义提交按扭

    text 定义文本框,默认20个字符

14.2.自动聚焦

1
2
3
4
5
6
7
<!-- 写法1 -->
<input type="radio" name="sex" id="na">
<label for="na">男</label>
<!-- 写法2 直接用于label标签包裹它们,要注意删除for -->
<label>
	<input type="radio" name="sex" id="nv">女
</label>

写法一:

  1. 自动聚焦是点击对应的字体会自动选中对应的选项;
  2. for 里的内容要与对应的 input 里的 id 相同;

14.3.单选一

1
2
<input type="radio" name="sex" id="na">男
<input type="radio" name="sex" id="nv">女

单选框实现多选一需要它们的 name 相同;

14.4.重复框

1
2
3
台球<input type="checkbox" checked>
羽毛球<input type="checkbox">
......

name 在这里设置,不起任何作用,起不到多选一;

14.5.下拉框

1
2
3
4
5
6
7
<select>
	<option>…</option>
    <!-- selected="selected"是设置默认显示的 -->
	<option selected="selected">…</option>
	<option>…</option>
	<option>…</option>
</select>
  1. select标签可以让用户选择
  2. 下拉列表默认选择设置属性：

​ selected=”selected”

14.6.文本域

1
2
3
<textarea rows="" cols="">
	....
</textarea>

rows 设置高;设置垂直方向容纳多少字;

cols 设置宽;设置水平方向容纳多少字;

rows 与 cols 没有js文本域可以拉动;

14.7.按钮

1
2
3
4
5
6
<!-- 提交按钮,默认的vlue是提交两个字 -->
<input type="submit">
<!-- 重置按钮,默认的vlue是重置两个字 -->
<input type="reset">
<!-- 普通按钮,没有任何功能需要配合js的按钮 -->
<input type="button" vlue="按钮">

type=”button” 是最常用的,方便自己设定功能;

1
2
3
<!-- 不加type类,默认提交 -->
<button></button>
<button type="submit">提交</button>

它与 input 不同的是不会自动填充文字;

14.8.文件上传

1
2
3
4
<!-- 上传单个文件 -->
<input type="file">
<!-- 上传多个文件 -->
<input type="file" multiple>

file 属性是上传文件,默认单个文件;

multiple 是上传多个文件;

15.实体字符

  1. 在网页中编写多个空格时，在默认情况下会自动被浏览器解析为一个空格
  2. 在HTML中有些时候，不能直接书写一些特殊符号；比如空格，<，>
  3. 在网页中书写这些特殊符号，需要HTML中的实体字符（转义字符）
  4. 在浏览器中解析符号只解析一个;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--语法：&实体的名字;-->
<!--空格-->
&nbsp;
<!--小于号-->
&lt;
<!--大于符号-->
&gt;
<!--&和号-->
&amp;
<!--"引号-->
&quot;
<!-- 撇号 -->
&apos;
<!--分-->
&cent;
<!--磅-->
&pound;
<!--元-->
&yen;
<!--欧元-->
&euro;
<!--小节-->
&sect;
<!--版权符号-->
&copy;

原文作者：ELl

原文链接：https://ell-hsy.github.io/2022/05/02/html%E6%A0%87%E7%AD%BE/

发表日期：May 2nd 2022, 9:12:46 pm

更新日期：May 2nd 2022, 10:42:39 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 知识(必须知道)
    1. 1.1. 1.浏览器内核
    2. 1.2. 2.SEO三大标签分别是哪些？
    3. 1.3. 3.页面语义的布局标签
    4. 1.4. 4.网页开头结构
  2. 2. 标签
    1. 2.1. 1.文本格式
    2. 2.2. 2.h系列标题
    3. 2.3. 3.p段落
    4. 2.4. 4.换行
    5. 2.5. 5.水平分割线
    6. 2.6. 6.图片
    7. 2.7. 7.总体区域划分
    8. 2.8. 8.插入图片
    9. 2.9. 9.音频标签
    10. 2.10. 10.视频
    11. 2.11. 11.超链接
    12. 2.12. 12.列表(list)
    13. 2.13. 13.表格(table)
    14. 2.14. 14.表单(form)
      1. 2.14.1. 14.1.输入框
      2. 2.14.2. 14.2.自动聚焦
      3. 2.14.3. 14.3.单选一
      4. 2.14.4. 14.4.重复框
      5. 2.14.5. 14.5.下拉框
      6. 2.14.6. 14.6.文本域
      7. 2.14.7. 14.7.按钮
      8. 2.14.8. 14.8.文件上传
    15. 2.15. 15.实体字符
Total : 4
Invalid date
Invalid date
Invalid date
Invalid date
日记/2022-04 日记/2022-05