Html_Day_001

Html5

一、标签中的属性

  1. 在标签中（开始标签或结束标签）可以设置属性。
  2. 属性是一个名值对（x = y）。
  3. 属性用来设置标签中的内容如何显示。
  4. 属性和标签名或其他属性应该使用空格隔开。
  5. 属性不能瞎写，应该根据文档中的规定来进行编写。
  6. 有些属性有属性值，有些则没有属性值。如果有属性值，属性值应该使用引号引起来。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标签的属性</title>
	</head>
	<body>
		<h1>这是我的<font color="red" size="3">第三个</font>网页</h1>
	</body>
</html>

二、文档声明

1. 网页的基本结构

（1）迭代：

  • 网页版本：
    • HEML4
    • XHTML2.0
    • HTML5
    • ...

2. 文档声明

（1）作用：用来告诉浏览器当前网页的版本

（2）html5的文档声明：

三、字符编码

计算机在对数据进行存储时都是以二进制的方式进行存储的，文字也不例外。所以，一段文字在存储到内存中时，都需要转换为二进制编码。当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读。

1. 编码

（1）概念：将字符转换为二进制码的过程称为编码。

2. 解码

（1）概念：将二进制码转换为字符的过程称为解码。

3. 字符集（charset）

（1）概念：编码和解码所采用的的规则称为字符集。

（2）乱码问题：如果编码和解码所采用的的字符集不同就会出现乱码的问题。

（3）常见的字符集：

  • ASCII
  • ISO88591
  • GB2312
  • GBK
  • UTF-8：在开发时我们使用的字符集都是UTF-8。

四、文档的使用

<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>
<!--html的根标签（元素），网页的所有内容都要写在根元素的里面-->
<html>
    <!--head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
    <head>
        <!--mate标签用来设置网页的元数据（底层数据），这里mate用来设置网页的字符集，避免乱码问题-->
        <mate charset="utf-8">
        <!--title中的内容会显示在浏览器的标题栏，搜索引擎会根据title中的内容来判断网页中的内容-->
        <titile></titile>
    </head>
    <!--body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body中-->
    <body>
        
    </body>
</html>

五、实体

在网页中编写多个空格时，浏览器会解析为一个空格。

（1）用法：在Html中有些时候，不能书写一些特殊符号（比如：多个连续的空格，字母两侧的大于和小于号）。如果我们需要在网页中书写这些特殊的符号，则需要使用Html中的实体（转义字符）。

（2）实体的语法：&实体的名字;

  • & nbsp; 空格
  • & gt; 大于号
  • & lt; 小于号
  • & copy; 版权符号

六、mate标签

（1）作用：mate主要用于设置网页中的一些元数据，元数据是给浏览器看的，不是给用户看的。

  • charset：指定网页的字符集。
  • name：指定数据的名称。
    • keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开。
    • description：描述，用于指定网站的描述。网站的描述会显示在搜索引擎的搜索结果中。
    • title：标签的内容会作为搜索结果的超链接上的文字显示。
  • content：指定的数据的内容。
  • http-equive="refresh" content="3,url=">：重定向

七、语义化标签

在网页中Html专门用来负责网页的结构，所以在使用Html标签时，应该关注的是标签的语义，而不是它的样式。

1. 标题标签

（1）概念：h1 ~ h6一共有六级标题，从h1 ~ h6重要性递减，h1最重要，h6最不重要。h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1，并且标题标签只会使用到h3，h4 ~ h6很少用。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

（2）注意：在页面中独占一行的元素称为块元素（black element），标题标签都是块元素。

（3）hgroup：hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup中

2. p标签

（1）作用：p标签标示页面中的一个段落

<p>
    在p标签中的内容表示一个段落。
</p>

3. em标签

（1）作用：em标签用于表示语音语调的一个加重。

（2）注意：在页面中不会独占一行的元素称为行内元素（inline element）。

<p>
    今天天气<em>真</em>不错！
</p>

4. strong标签

（1）作用：表示强调重要的内容。

<p>
    你今天<strong>必须</strong>...
</p>

5. blockquote标签

（1）作用：表示一个长引用。

<blockquote>
    鲁迅曾经说过....
</blockquote>

（2）q标签：表示一个短引用。

子曰<q>学而时习之，乐呵乐呵！</q>

6. br标签

（1）作用：表示页面中的换行。

今天天气<br>真不错。

块元素和行内元素

1. 块元素（block element）

（1）作用：在网页中一般通过块元素来对页面进行布局。

2. 行内元素（inline element）

（1）作用：主要用来包裹文字。

  • 一般情况下会在块元素中放行内元素，而不会在行内元素放块元素。
  • 块元素基本上什么都能放。
  • p元素中不能放任何的块元素。
  • 浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。
posted @ 2021-07-22 10:47  1706010214  阅读(31)  评论(0)    收藏  举报