HTML标签（上）

Posted 2021-05-07 图灵奖未来得主

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML标签（上）相关的知识，希望对你有一定的参考价值。

html标签（上）

写在前面

写在前面

根据b站大学黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程学习html5+css3学习的过程记录~
今天5.4，继续奋斗，永远为热爱而燃烧！
（tips:一开始仍然用记事本写，格式里面可以改大小和字体

HTML语法规范

1.所有标签必须包含在尖括号里 $< h t m l >$
2.几乎所有标签成对出现–开始标签&结束标签，唯一的不同是结束标签前面有斜杠/: $< h t m l > < / h t m l >$
3.有特殊的单标签，非常少，eg: $$
4.标签关系有包含关系和并列关系

conclusion:
<html> 
      <head>
	      <title></title>
	  </head>
      <body></body>
</html>

<br />

HTML基本结构标签

结构标签=骨架标签
HTML页面=HTML文档
$< h t m l > < / h t m l >$ ：HTML标签，根标签
$< h e a d > < / h e a d >$ ：文档头部，head标签中必须设置title
$< t i t l e > < / t i t l e >$ ：文档标题
$ $ ：文档主体

<html> 
      <head>
	      <title>落笔应风雨</title>
      </head>
      <body>
	      小舟从此逝，江海寄余生。
      </body>
</html>

开发工具

有很多~这里使用VSCode
记得安装这个插件

<!DOCTYPE html><!--文档类型声明，告诉浏览器使用HTML5显示网页-->
<!--写在最前面，它不是HTML标签，只是一个文档类型声明标签-->
<html lang="zh-CN"><!--语言种类-->
<!--有en & zh-CN ....分别为英文和中文-->
<head>
    <meta charset="UTF-8">
    <!--字符集，在head标签内，可以通过meta标签的charset属性规定html文档使用哪种字符编码-->
    <!--UTF-8是万国码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春水积木</title>
</head>
<body>
    欲把春水留在你的眼角，惊破了华韶,这一花一草是你眉心撩撩过的信条
</body>
</html>

HTML常用标签（重点）

1.语义标签
2.标题标签 $< h 1 > < / h 1 > - - > < h 6 > < / h 6 >$

	<h1>标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

3.段落和换行标签 (important)
段落： $ $ paragraph
强制换行 $ o r $ break

<p>五四青年节源于中国1919年反帝爱国的“五四运动”，五四爱国运动是一次彻底的反对帝国主义和封建主义的爱国运动，也是中国新民主主义革命的开始。<br />1939年，陕甘宁边区西北青年救国联合会规定5月4日为中国青年节。</p>
<p>青年节期间，中国各地都要举行丰富多彩的纪念活动，青年们还要集中进行各种社会志愿和社会实践活动，还有许多地方在青年节期间举行成人仪式。</p>
<!--段落和段落之间空一行，换行不会空行-->

4.文本格式化标签
前面是推荐使用的，语义更强烈

语义	标签
加粗	$< s t r o n g > < / s t r o n g > o r < b > < / b >$
倾斜	$< e m > < / e m > o r < i > < / i >$
删除线	$< d e l > < / d e l > o r < s > < / s >$
下划线	$< i n s > < / i n s > o r < u > < / u >$

	我是一个<strong>加粗</strong>的词语<br /> 我是一个
    <b>加粗</b>的词语<br /> 我是一个
    <em>倾斜</em>的词语<br /> 我是一个
    <i>倾斜</i>的词语<br /> 我是一个
    <del>有删除线</del>的词语<br /> 我是一个
    <s>有删除线</s>的词语<br /> 我是一个
    <ins>有下划线</ins>的词语<br /> 我是一个
    <u>有下划线</u>的词语<br />

5. $< d i v > < s p a n >$ 标签
二者没有语义，是普通盒子用来装内容，用来布局网页。
div->division 用来布局，但是一行只能放一个div，是一个大盒子，是行
span->跨度、跨距，是小盒子，是列

	<div>一行只能放一个</div>123123
    <div>这里在下一行了，并且没有空一行，和段落不同</div>123
    <span>这相当于列</span>
    <span>你看没有换行</span><br />

6.图像标签和路径 (important)
图像标签：img，是单标签
$$
scr是img的必须属性–属于这个图像标签的特性，用于指定图像文件的路径和文件名
必须把图片文件和网页文件放在一起~

	<h4>图像标签的使用：</h4>
    <img src="桥本环奈.jpg" />
    <h4>alt:替换文本，图像显示不出来的时候用文字替换：</h4>
    <img src="我老婆.jpg" alt="桥本环奈是我老婆" />
    <h4>title:提示文本，鼠标放到图像上，提示的文字:</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" />
    <!--这是必须要写的-->>
    <h4>width:给图像设定宽度：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" width="100" />
    <!--单位是像素-->
    <h4>height:给图像设定高度：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" width="200" height="100" />
    <!--单位是像素-->
    <h4>height:给图像设定高度：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" height="100" />
    <!--宽度高度修改一个就行-->
    <h4>border:给图像设定边框：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" height="100" border="5" />
    <!--单位是像素-->
    <!--属性名不分前后，但是要有空格，键值对形式-->

路径：
(1)目录文件夹&根目录
目录文件夹：普通文件夹，存放了我们做页面需要的相关素材，比如html文件、图片
根目录：打开目录文件夹的第一层就是根目录
(2)相对路径

	<H4>相对路径</H4>
    <!--同一级路径：-->
    <img src="桥本环奈.jpg" />
    <!--下一级路径：-->
    <img src="images/桥本环奈.jpg" />
    <!--上一级路径：-->
    <img src="../桥本环奈.jpg" />

(3)绝对路径，电脑里的具体位置，或者是网上的图片地址

<h4以上是关于HTML标签（上）的主要内容，如果未能解决你的问题，请参考以下文章 
 Wagtail - 在页面上呈现带有相关片段和标签的数据时遇到问题
 谷歌地图在Android的标签片段上显示为灰色
 几条jQuery代码片段助力Web开发效率提升
 在 HTML 中显示 HTML 片段
 好的编程习惯
 vscode 常用插件