002 认识HTML - 标签规范 渲染规范

目录

1 认识HTML

**pycharm快捷键  输入 html:5  按一下 tab键  自动补全了head 标签**
html文件是服务器端响应给客户端的
 html文件内就有要告诉客户端的一些信息 字符编码 时间 样式 等等

<!DOCTYPE html>
<!--声明游览器要用w3c支持的标准的h5去解析html代码，就不会出现兼容的问题-->
<!--类似于在python脚本中使用 #!/bin/python3.10 指定解释的具体版本-->

<html lang="en">   # 告诉搜索引擎的 页面语言是英文
<!--根标签html，而且根标签内只有两个标签 head 和 body-->

<head>
<!--    head标签 放一些解释性的内容 解释标签  元素meta的作用 -->
    <meta name="viewport"    # 适用手机的展示
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> # 兼容IE
    <meta> 
    标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
    META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
    元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
    <meta charset="UTF-8">  
    <!--    告诉客户端的游览器使用 utf8编码解析  # 定义html 编码格式 -->
    <meta name="内网站点" content="tools">
    <meta http-equiv="refresh" content="30">  # 设置页面的自动刷新时间
    <link rel="icon" href="123.png" type="image/x-icon">   # 设置icon的图标 在游览器中显示的
    <meta charset="UTF-8">
    <title>分页的标题</title>
<!--    告诉游览器的分页的标题-->
</head>

<body>
<!--     body标签内的数据是显示在游览器内的，显示标签-->

</body>
</html>

2 HTML的注释符号

<!--   html 注释的标记  -->

<!--pychatm快捷键 ctrl + /  -->

/*
css 注释符号  
p2 {
    color: #66CC00;
}
*/

/*pychatm快捷键 ctrl + /  */

js文件注释
// pychatm快捷键 ctrl + /  
// 注释

3 HTML 标签的规范

什么是标签

标签 就是 把内容 标记出来，  html文件的所有内容都必须在 html 标签的内部

1 标签以尖括号区分包裹数据

标签的属性值是key:"values"的形式 属性值之间一个空格间隔，
<h1 属性1="v1" 属性2="v2" >标题1</h1>
<img src="123.jpeg" alt="" 属性1="v1">

2.不区分大小写

<h1>123</h1>
<H1>123</H1>
效果显示一样的

3.标签可以嵌套，但是不可以交叉嵌套

加入 v标签和z标签  <v> <z> </v> </z>

4.标签从形式上分为闭合标签和自闭合标签

<h1>标题1</h1>
<h1>标题1</h1>
在标签内有头有尾的，闭合标签  


<img src="123.jpeg" alt="">
自闭合标签 以标签名开头，属性值结尾

只有闭合标签才能嵌套其他的标签 自闭合标签不能嵌套标签

4、游览器渲染的规范

1、纯文本之间无论出现多少空格或者换行，游览器只会渲染出一个空格

image-20230208190200973

2、游览器的渲染 方向从左到右 从上到下
posted @ 2021-11-03 14:39  mmszxc  阅读(19)  评论(0)    收藏  举报