02 HTML

缺乏、安全感 2022-11-09 15:29 105阅读 0赞

## web前端三大技术： ##

1.  HTML:负责网页的架构。
2.  CSS：负责网页的样式、美化。
3.  JS：负责网页的行为。

## 预备知识： ##

1.  HTML简介：是一种描述网页的一种语言；html是超文本标记语言；html不是一种编程语言，而是一种标记语言；标记语言是一套标记标签；  
    html使用标签来描述网页。
2.  HTML骨架标签：  
    骨架标签：新建时默认生成的标签。  
    meta标签：可以设置网页的字符集(utf-8 国际编码)  
    title标签：可以设置网页的标题。  
    body标签：可以设置网页的主体内容部分。
3.  ##### 基本的HTML标签： #####

**文章标题标签**：h1-h6 分六级，依次减少效果，每个标题都是独占一行空间。 
**空格标签**： &nbsp 
**回车标签**： 
**p标签和标签语义化**： 
p标签负责放文章段落； 
语义化：在合适的地方使用合理的标签，称为满足标签语义化。可以在搜索引擎排名中更靠前显示。 
**代码注释**： 
command+？ 
加粗字体 
加粗字体+特别强调 
倾斜字体 
倾斜字体+特别强调 
< del>删除线字体< /del> 
**图片显示标签**：< img src=“想要加载的图片名字”/> 
**图片+大小**：< img src=“想要加载的图片名字” widch=“数字” heigt=“数字”/> 
**鼠标悬停**(只有鼠标放在上面才能看见)： 
< img src=“想要加载的图片名字” title=“想要显示的文字”> 
**alt标签**： 
作用1:当图片未正常加载时候，alt的内容才会被看到。 
作用2:网页阅读器读取此内容给视障用户听，提升用户体验。 
< img src=“想要加载的图片名字” title=“想要显示的文字” alt=“文字”> 
\*\* 超链接标签\*\*：< a href=“链接” >说明文字< /a> 
eg: 
< a href=“www.baidu.com” >点击我可以打开百度< /a> 
ps：当想要打开本地的页面，只需要把目标文件和当前文件放在同一个目录中，在href属性中写目标文件的名字即可。 
< a href=“本地连接” >说明文字< /a> 
< a href=“本地的一个页面.html” >点击我可以打开本地的页面< /a> 
**列表标签**： 
有序列表： 
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70] 
无序列表：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70 1] 
**音视频标签**：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70 2] 
**布局标签**：当没有任何语义时，就可以使用div或者span来进行包裹。目的是为了css代码后期可以找到对应标签中的内容来设置样式。 
div特点：独占一行空间。 
span特点：一行可以放置多个。 
< div>我是div< /div> 
我是span 
**表单标签**： 
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70]: /images/20221023/a06b04b86b324997999ec6565e94b4ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70 1]: /images/20221023/e8660d32437a4cd98ab7ac04402b4464.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70 2]: /images/20221023/636ebd79a5bc4b52bfe7f9056f336b96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70 3]: /images/20221023/5f862758be514f518d24450b88f08dd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70 4]: /images/20221023/1520bf4a8f14495cb68826950ebe57d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BjeWJi_size_16_color_FFFFFF_t_70 5]: /images/20221023/21ca3227e75f41069c03f789a12d7a06.png