HTML

发表于 更新于 阅读次数： 本文字数： 4.1k 阅读时长 ≈ 7 分钟

html基本元素标签

  1. <html>：HTML网页的根标签，表示一个HTML文档的开始和结束

  2. <head>：HTML文档的头部，用于描述文档的元数据、样式等信息

  3. <title>：HTML文档的标题标签，用于在浏览器标签栏中显示文档的标题

  4. <body>：HTML文档的主体部分，包含了网页的实际内容

  5. <h1>～<h6>：标题标签，表示文本的标题，从大到小分别对应不同级别的标题

  6. <p>：段落标签，用于分隔文本内容

  7. <a>：超链接标签，用于添加链接到其他文档、页面、图片等

  8. <img>：图片标签，用于在网页中嵌入图片

  9. <ul>：无序列表标签，用于创建无序列表

  10. <ol>：有序列表标签，用于创建有序列表

  11. <li>：列表项标签，用于创建列表项

  12. <table>：表格标签，用于创建表格

  13. <tr>：表格的行标签，表示一行

  14. <td>：单元格标签，用于表示表格中的单元格

  15. <form>：表单标签，用于创建表单

  16. <input>：输入框标签，用于输入文本、表单等

  17. <select>：下拉列表标签，用于创建下拉选择框

  18. <textarea>：文本域标签，允许用户输入多行文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>
<!--html的根标签（元素），网页中的所有内容都要写在根元素的里边-->
<html lang="en">
<!--head是网页头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
<head>
    <!--meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题-->
    <!--UTF-8（万国码）-->
    <meta charset="UTF-8">
    <title>显示在浏览器的标题栏</title>
</head>
<!--body是html的子元素，表示网页的主体，网页中的所有可见的内容都应写在body里面-->
<body>
      这里是主体
</body>
</html>

格式化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<br/>         换行

<center> </center> 居中

<span></span> 行标签(没有换行) 
<kbd></kbd>   定义键盘码    

<p></p>       行标签(自带换行)
<pre></pre>   块标签不解析内容

<code></code> 行标签不解析内容   
<var></var>   定义变量
<em>帅</em>
<strong>帅</strong>
em和strong标签都表示强调，但是它们还是有一定的差别的
第一em标签的样式是斜体，而strong标签的样式是加粗
第二em标签是强调语义的，而strong标签是强调内容的
em标签和strong标签都是行内元素。

样式标签

1
2
3
4
5
6
7
8
9
10
<b>加粗</b>
<i>倾斜</i>
<s>删除线</s> 或 <del>19999</del>
<u>下划线</u>
<font size=2>字体大小</font>
<font color="#fa8072">字体颜色</font>  
<hr> 水平线 
<blockquote>孔子说的不对</blockquote>
<q>老子才不对</q><br>
q标签和blockquote标签都是引用，不同的是q标签是短引，用而blockquote标签是长引用会换行的。

转义字符

1
2
3
4
5
6
<      &lt; 
>      &gt; 
空格   &nbsp; 
©     &copy; 
®     &reg; 
™     &trade;

列表标签和表格标签

列表

1
2
3
4
5
无序列表
<ul>
    <li>a</li>
    <li>b</li>
</ul>
1
2
3
4
5
有序列表
<ol>
    <li>a</li>
    <li>b</li>
</ol>
1
2
3
4
5
6
自定义列表 没有圆点和需要
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
    <dd>内容</dd>..
</dl>

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--
cellspacing属性是单元格之间的空隙
cellpadding属性是控制整个单元格的大小
border  是边框粗细
align="center" 居中   left左  right右
style="text-align: center" 字体居中
其他的就需要使用css来控制了
-->

<table   cellspacing="0" style="text-align: center"  border="1px"   >
    <tr >
        <th>标题</th>
        <th>标题2</th>
    </tr>
    <tr>
        <td>1</td>
        <td >1</td>
    </tr>
    <tr>
        <td >1</td>
        <td>1</td>
    </tr>
</table>

常用的布局标签

header 网页的头部

main 网页的主体部分（一般只有一个）

footer 网页的底部

nav 网页的导航

aside 和主题相关的内容

article 文章之类的

section 独立的块区，上面的标签都不合适，就用这个

div 块元素

常用的图片标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<img src="图片地址" alt="图片不显示时候的提示语句" title="鼠标悬停提示文字" 
width="图片宽px" height="图片高px"/>
如果宽高不写就默认原图片大小

img 的其他属性:   

hspace 和 vspace 属性可以设置图像周围的空间。   类似于设置外边距效果
hspace:左边和右边的文字与图像之间的间距  单位像素(px)
vspace:上面的下面的文字与图像之间的距离  单位像素(px)

align 属性定义了图像相对于周围元素的水平和垂直对齐方式。
align的值:left(左)、right(右)、top(上) 、middle(中) 和 bottom(下)。
left 和 right 值会把图像周围与其相连的文本转移到相应的边界中；
其余的三个值将图像与其相邻的文字在垂直方向上对齐

视频

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
controls提供播放暂停音量控制  必须有
autoplay 自动播放。 (一般不要设置 会增加页面的加载速度) 有的游览器会拦截
preload  视频在页面加载时进行加载，并预备播放。
	如果使用 "autoplay"，则忽略属性。属性值
	auto - 当页面加载后载入整个音频
	meta - 当页面加载后只载入元数据
	none - 当页面加载后不载入音频
    
(一般不要设置 会增加页面的加载速度)

loop   媒介文件完成播放后再次开始播放     重复播放
width=”宽度”  height=”高度”
muted   视频的音频应该被静音

<video width="320" height="240" controls >
    <source src="img/1.mp4" type="video/mp4">
    您的浏览器不支持 video 属性。
</video>

游览器的不同 显示的 视频 播放按钮的样式也是不同的
source支持写多个    游览器 从上到下 识别最适合他的  视频类型

音频

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
controls   向用户显示控件，比如播放按钮。
autoplay   自动播放。 (一般不要设置 会增加页面的加载速度) 有的游览器会拦截
loop     每当音频结束时重新开始播放   
preload  音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。  属性值
	auto - 当页面加载后载入整个音频
	meta - 当页面加载后只载入元数据
	none - 当页面加载后不载入音频
	(一般不要设置 会增加页面的加载速度)

<audio controls  autoplay loop>
    <source src="img/无羁.mp3" type="audio/mp3" >
    游览器不支持此播放器
</audio>

游览器的不同 显示的 视频 播放按钮的样式也是不同的
source支持写多个    游览器 从上到下 识别最适合他的  音频类型