前端之HTML---基本常用标签

HTML标签的那些事儿

语法规范

双标签:
单标签:

就是指是否成对,这个跟xml语法一模一样,没有什么特殊

标签关系

包含关系

1
2
3
<head>
<title> </title>
</head>

并列关系

1
2
3
4
5
<head>
</head>

<title>
</title>

就是xml的对象和子对象概念,没有这么特殊的。

基本结构标签(骨架标签)

head title和body标签

1
2
3
4
5
6
7
8
9
<html>
<head>
<title>标题标签</title>
</head>

<body>
body部分
</body>
</html

效果如下:

html_label_mainlabel

DOCTYPE lang和charset标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>

<body>
body部分
</body>

</html>

<!DOCTYPE> 文档类型声明,类似于xml版本号,<!DOCTYPE html>代表html5,必须在文档最开头。

<html lang='en'> ,en zh-CN表示语言,给浏览器翻译、搜索引擎过滤识别用的,自己实际编写不受限制。

<meta charset="UTF-8"> , 字符集,防止乱码。

标签语义

即标签的含义,分下面几类:

标题标签

<h1> ~ <h6> , headline的缩写, 类似markdown的####

级别、重要性依次递减,一个标签占一行。

段落和换行标签

<p></p>, paragraph的缩写,文字本身会根据浏览器宽度换行,分段的前面是没有两个字符的缩进的

<br/>, break的缩写,强制换行

练手示例

参考来源

参考网页:https://wap.peopleapp.com/article/5992804/5909361

自己的代码:

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
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>致富路,越走越宽(全面建成小康社会“百城千县万村调研行”)</title>
</head>

<body>
<h1>致富路,越走越宽(全面建成小康社会“百城千县万村调研行”)</h1>
<p>  高原、高山、高寒,贵州省毕节市赫章县河镇乡海雀村一度被认为不适宜人类生存。经过35年斗贫战贫,2019年,海雀村村民年人均收入达16200元。今年8月,海雀村传来喜讯,260户995人全部脱贫。</p>
<p>  海雀村的变化,首先要从生态环境改善说起。</p>
<p>  在海雀村,放眼望去,万亩林海今已郁郁葱葱。据了解,这些林木价值达8000余万元,村民光采松果每年都有五六千元收入。</p>
<p>  曾经,砍树开荒,导致海雀村森林覆盖率不足5%,沙化、山秃、水枯。地是种到了山尖尖,但却广种薄收:一个村民组50余人挖一天土豆,两个人一次全抬走。</p>
<p>  海雀村老支书文朝荣提出造林:有林就有草,有草就能养牲畜,有牲畜就有肥,有肥就能多打粮。“国家帮我们,我们也要争气!”文朝荣的儿子文正友回忆,当一批批救济粮涌向海雀时,父亲坐不住了,开始动员大家上山种树。</p>
<p>  海雀村护林队队长王光德说:“为让干部带头,老支书不顾家人反对拿出自家3亩地给我,还四让救济粮。老支书的公正无私,感动了大家。”在老支书带领下,村民们在36个山头种下1.2万亩华山松、马尾松。</p>
<p>  文朝荣每天第一个上山,最后一个下山。海雀村展览馆里,记录了老支书造林的两个细节:村民饿得干不动,老支书把家里仅有的两只鸡杀了分给大家吃;老伴攒给女儿坐月子的鸡蛋,被他全煮了提上山。</p>
<p>  文朝荣去世之前,拉着王光德的手交代:看好林。王光德听进去了,也做到了。他说,护林队11人,风雨无阻,每天都要走遍36个山头,30年共处罚682起,谁求情都没用。</p>
<p>  万亩林海让生态改善后,海雀的土地虽然从顶峰时的8000多亩缩减到现在1780亩,但好生态加上新技术,亩产成倍增加,海雀不再挨饿。</p>
<p>  吃饱,还不意味着脱贫。海拔高、温度低,难道就不能种别的?2016年,于吉科赴任河镇乡党委书记,深知海雀脱贫必须来一场农村产业革命。经过对土壤、光照、气候等周密考证,500亩矮化苹果、100亩大棚香菇开始种植,生产经营也大变革,专门成立农业公司筹集资金统一种植、统一管理、统一销售。</p>
<p>  “真不一样,印字的苹果论个卖,贵的一个10元。”文正友说,苹果园毛收益10%作为土地入股农户分红,15%用于支付务工费用。2019年,贫困户务工加上入股能从苹果园收益5000多元。今年,文正友带领大家在苹果园、林海又试种225亩中药材。</p>
<p>  丈夫是设计师,儿子是模特,自己是淘宝店主,虽然文化程度不高,但谈起自己的海娃针织服装厂,冯顺祝自信满满。从海雀进县城,8小时缩短到2小时,路通不怕巷子深。销售靠“网路”,发货靠“公路”,冯顺祝的童装发往全国,去年还创立自己的男童装品牌。</p>
<p>  服装厂由村里出地出厂房,丈夫刘绪光被吸引回来返村创业。目前,服装厂又在镇上移民安置点开了一个分厂,共吸引60余名村民就业,工资从2000元到7000元不等。</p>
<p>  “没有共产党,我可能无法摆脱贫困。”这是村民吴得高的心里话,住院做肠梗阻手术花了12万元,自家只掏1.2万元。村里给他媳妇安排了扶贫专岗,又能从苹果园、香菇大棚分红,还享受国储林、碳汇林补助。“党的政策这么好,脱了贫,日子还会越过越好!”吴得高说。</p>
</body>

</html>

对比效果

html_label_basic_test