HTML基础

1.HTML开头标签

1.1文档类型声明标签

< !DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
这句话的意思是:当前采用HTML5的方式显示网页
注意：

1. < !DOCTYPE> 声明位于文档中的最前面的位置，处于 < html > 标签之前。
2. 不是一个 HTML 标签，它就是 文档类型声明标签。

1.2 lang 语言种类

用来定义当前文档显示的语言。

1. en定义语言为英语
2. zh-CN定义语言为中文
   简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页
   其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
   这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的

1.3 字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字
在标签内，可以通过 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
 
 
charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所
有国家需要用到的字符

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量
统一写成标准的 "UTF-8"，不要写成 "utf8" 或 "UTF8"。

2.常用标签

2.1 标题标签

< h1 > ~ < h6 >

2.2 段落标签 < P > （行标签）

1. < p > 标签用于定义段落，它可以将整个网页分为若干个段落。
2. 标签语义：可以把 HTML 文档分割为若干段落。
3. 特点：1. 文本在一个段落中会根据浏览器窗口的大小自动换行。 2.段落和段落之间保有空隙。

2.3 换行标签 < br />

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望
某段文本强制换行显示，就需要使用换行标签 < br />。

2.4 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

2.5 div 和 span标签

< div > 和 < span > 是没有语义的，它们就是一个盒子，用来装内容的。

 这是头部 
 
 今日价格 

特点：

1. < div> 标签用来布局，但是现在一行只能放一个< div>。 大盒子
2. < span> 标签用来布局，一行上可以多个 < span>。小盒子

2.6 图像标签 img

在 HTML 标签中，< img> 标签用于定义 HTML 页面中的图像

		< img src="图像URL" />

图像标签的其他属性

2.6 超链接

	 文本或图像 

2.7特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

3.表格

3.1表格的基本内容

1. 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

 
                ...
            
            ...
        

            

                
单元格内的文字

1.< table> < /table> 是用于定义表格的标签。
2.< tr> 标签用于定义表格中的行，必须嵌套在 < table> 标签中。
3.< td> 用于定义表格中的单元格，必须嵌套在< tr>标签中。
4. < th> 标签表示 HTML 表格的表头部分(table head 的缩写)，表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中
5.分别用：< thead>标签 表格的头部区域、< tbody>标签 表格的主体区域. 这样可以更好的分清表格结构。

• table标签的属性
  表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置.
  

3.2表格的合并(难点)

特殊情况下,可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可.

1. 跨行合并：rowspan=“合并单元格的个数”
2. 跨列合并：colspan=“合并单元格的个数”

效果图

4.列表

无序列表、有序列表和自定义列表。

4.1无序列表

标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，
而列表项使用
• 标签定义。无序列表的基本语法格式如下：

   
      
  列表项1
   
      
  列表项2
    
      
  列表项3
     	... 
  
  

  效果图
  

  4.2有序列表

  有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
  在 HTML 标签中，

  标签用于定义有序列表，列表排序以数字来显示，并且使用
  1. 标签来定义列表项。有序列表的基本语法格式如下：

      
         
     列表项1
      
         
     列表项2
       
         
     列表项3
        	... 
     
     

     效果图
     

     4.3 自定义列表

     自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。在 HTML 标签中，

     标签用于定义描述列表（或定义列表），该标签会与

     （定义项目/名字）和

     （描述每一个项目/名字）一起使用。语法如下：

       
     
             
     名词1
             
     名词1解释1
             
     名词1解释2
             
     名词2
             
     名词1解释1
             
     名词1解释2
         
     

     效果图:
     

     5.表单

     5.1表单域标签

     在 HTML 标签中， 标签用于定义表单域，以实现用户信息的收集和传递。
     会把它范围内的表单元素信息提交给服务器.

      各种表单元素控件
     

     

     5.2 表单控件

     5.2.1 input

     1. 标签的属性
        type属性
其他属性
        

     5.2.2 label标签

     标签为 input 元素定义标注（标签）。
     标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

              
     
             密码：
             
             男
             
     

     

     5.2.3 select元素

     在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。

     选项1 选项2 选项3 选项4

     

     5.2.4 textarea 表单元素

     1. 用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 </code>标签。</li> <li>在表单元素中，<code><textarea></code> 标签是用于定义多行文本输入的控件。</li> <li>使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。</li> </ol> <p>通过<code> <textarea></code> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显示的行数”，</p> <pre><code> <textarea rows="10" cols="30">