|
篇幅有点长，有示例代码晓得标签怎样运用，还有标签的语义描述，学习标签先晓得语义再安排放在哪运用，不外页面大部分布局都是div搞定，不讲究seo优化能够不思虑H5新增的容器标签，不外个人觉得还是最好用，哪个做网站的不期盼自己网站排名好点呢~
另一分享一个网站：python自学网，想学python关联的或者python全栈工程师，GUI界面化图形等都能够去认识下，web研发亦是有关联课程的。
1、HTML文档结构：
<!DOCTYPE html>
<!-- 文档声明，告诉浏览器当前运用的HTML标准是HTML5,必定在第1行 -->
<html lang="en">
<!--
<html></html>：根标签，告诉浏览器自己是HTML文档给，所有的标签都写在它的里面 lang="en"：lang属性，暗示该元素运用的文字是哪一种语言，en英文，zh-CN中文
-->
<head>
<!-- <head></head>:文档头，在它里面的内容通常设置网页关联信息，不会被渲染在网页页面上-->
<meta charset="UTF-8" />
<!--
<meta/>：元属性描述，文档的原数据(附加信息),单标签
charset="UTF-8"：字符编码，制定网页内容编码为UTF-8
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--
http-equiv="X-UA-Compatible" ：文档兼容模式的定义 Edge模式告诉IE以最高级 模式渲染文档，亦便是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级导致的影响。
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--
手机端适配，不写手机端页面不消
viewport：用于指定用户是不是能够缩放Web页面，并对关联的选项进行设定
width或height:指定视区的规律宽度和高度，取值能够是以像素单位的数字，亦能够是特殊的标记符号（device-width：视区宽度应为设备的屏幕宽度，device-width同理） initial-scale：设置Web页面的初始缩放比例，值设为1.0则表示未经缩放的Web页面
-->
<title>Document</title>
<!-- <title></title>:网页标题-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
<!-- 页面图标、加载外边的css/js文件......-->
</head>
<body>
<!-- <body></body>:写网页的主体，里面放内容标签，如a、p、img、h1~h6等 -->
</body>
</html>
简单文档结构：如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>
保留以上，文件格式为.html便是一个html文件了。
2、注释、标签、元素、属性
注释：快捷键 ctrl+/ ,注释的内容不会被浏览器渲染在页面上，给研发者自己看的
1.1标签
标签概念：由尖括号“< >”包裹的重要词，通常是成对显现的，标签对中第1个标签是起始标签如<body> ，第二个标签是结束标签如 </body>
标签格式：
双标签：<起始标签> 结束标签>
单（空）标签：<标签名/> (无结束标签)
标签内容： 双标签，其内容在两个标签中间
| 
发表于