html

1. html 创建

• ! + tab 创建 html 头
• ctrl + “+/-“ 设置界面大小

2. 骨架标签

1. 文档类型声明标签

1. <!DOCTYPE> 文档类型说明，作用是告诉浏览器使用何种版本或者语言来显示网页
2. 要置于首部
3. 其不是一个 HTML 标签，它就是文档类型声明标签

2. lang 语言种类

1. en 表示英文
2. zh-CN 表示中文
3. 其主要告诉搜索引擎，当前页面是什么语言的网站，其对代码内的语言类型并没有约束

3. 编码/字符集

1. <meta charset="UTF-8" /> 规范 HTML 文档使用的字符编码类型

3. html 基本标签

1. 标题

1. <h1>~<h6> 一共六个标题

2. 斜体字

1. <i></i> 标签把内容变成斜体字，就是 incline 的缩写
2. <em></em> 也可以表示倾斜，即 emphasized 的缩写，表示强调

3. 水平分割线

1. <hr> 或者 <hr /> 单标签，表示水平分割线

4. 段落标签

1. <p></p> 用于表示所写内容为一个段落
2. p 就是 paragraph 的缩写
3. 文本在一个段落中会根据浏览器窗口的大小自动换行
4. 段落和段落之间==保有空隙（空一行）==

5. 加粗

1. <b></b> 加粗，即 bold 的缩写
2. <strong></strong> 也可以表示加粗

6. 换行

1. <br1> 或者 <br /> 即 break 的缩写，表示强制换行

7. 删除线

1. <del><del> 表示删除线
2. <s></s> 也可以表示删除，即 strike 的缩写

8. 下划线

1. <ins></ins> 下划线，即 insert 的缩写，表示有下划线的内容是插入、修正的内容，与 <del> 恰恰相反
2. <u></u> 也可以表示，即 underline 的缩写

9. <div> 和 <span> 双标签

1. 这两个标签没有任何的语义，他们表示一个盒子，用来布局网页，div 是 division 的缩写
2. <div> 标签，一行只能有一个（独占一行），可以理解为一个大盒子占了一行，在 <div> 外面的内容将在下一行
3. <span> 标签，一行内可以有多个 <span> ，可以理解为一个小盒子

10. 图像标签

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

​ <img src="图像URI" />

2. 一些属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，当图像不能正确显示的时候显示
title	文本	提示文本，光标放上去就会显示的文字
width	像素	图像的宽，设定一个时，默认等比例
height	像素	图像的高
border	像素	设置图像的边框粗细

11. 超链接标签

1. <a> 标签用于定义超链接，作用是资源跳转，a 为 anchor 的缩写

   • <a href="跳转目标" target="目标窗口的弹出方式"> 文本或者图像 </a>
   • 空链接：<a href="#">空链接</a>

2. 如果 href 里面的地址是一个文件（不是图片）或者是压缩包，点击会下载。图片的话会跳转显示

   属性	作用
   href	用于指定链接目标的 url 地址，为必须属性，当为标签应用href属性时，它就具有了超链接的功能，==不论内外部链接，如果有，注意要带上相关的协议==
   target	用于指定链接页面的打开方式，其中 _self 为默认值，_blank 为在新窗口中打开

12. 锚点链接

1. <a href="#名字（id）"> 跳转名 </a>
2. 找到目标位置标签，在里面添加 id 属性，其值为之前在 <a> 标签中定义的名字

13. 注释标签

1. <!-- 注释内容 -->

4. 特殊字符编码

==这里十进制编码，当然也可以用 16 进制编码，开头是 &#x==

==特殊符号==	命名实体	十进制编码	==特殊符号==	命名实体	十进制编码	==特殊符号==	命名实体	十进制编码
Α	Α	Α	Β	Β	Β	Γ	Γ	Γ
Δ	Δ	Δ	Ε	Ε	Ε	Ζ	Ζ	Ζ
Η	Η	Η	Θ	Θ	Θ	Ι	Ι	Ι
Κ	Κ	Κ	Λ	Λ	Λ	Μ	Μ	Μ
Ν	Ν	Ν	Ξ	Ξ	Ξ	Ο	Ο	Ο
Π	Π	Π	Ρ	Ρ	Ρ	Σ	Σ	Σ
Τ	Τ	Τ	Υ	Υ	Υ	Φ	Φ	Φ
Χ	Χ	Χ	Ψ	Ψ	Ψ	Ω	Ω	Ω
α	α	α	β	β	β	γ	γ	γ
δ	δ	δ	ε	ε	ε	ζ	ζ	ζ
η	η	η	θ	θ	θ	ι	ι	ι
κ	κ	κ	λ	λ	λ	μ	μ	μ
ν	ν	ν	ξ	ξ	ξ	ο	ο	ο
π	π	π	ρ	ρ	ρ	ς	ς	ς
σ	σ	σ	τ	τ	τ	υ	υ	υ
φ	φ	φ	χ	χ	χ	ψ	ψ	ψ
ω	ω	ω	ϑ	ϑ	ϑ	ϒ	ϒ	ϒ
ϖ	ϖ	ϖ	•	•	•	…	…	…
′	′	′	″	″	″	‾	‾	‾
⁄	⁄	⁄	℘	℘	℘	ℑ	ℑ	ℑ
ℜ	ℜ	ℜ	™	™	™	ℵ	ℵ	ℵ
←	←	←	↑	↑	↑	→	→	→
↓	↓	↓	↔	↔	↔	↵	↵	↵
⇐	⇐	⇐	⇑	⇑	⇑	⇒	⇒	⇒
⇓	⇓	⇓	⇔	⇔	⇔	∀	∀	∀
∂	∂	∂	∃	∃	∃	∅	∅	∅
∇	∇	∇	∈	∈	∈	∉	∉	∉
∋	∋	∋	∏	∏	∏	∑	∑	−
−	−	−	∗	∗	∗	√	√	√
∝	∝	∝	∞	∞	∞	∠	∠	∠
∧	∧	⊥	∨	∨	⊦	∩	∩	∩
∪	∪	∪	∫	∫	∫	∴	∴	∴
∼	∼	∼	≅	≅	≅	≈	≈	≅
≠	≠	≠	≡	≡	≡	≤	≤	≤
≥	≥	≥	⊂	⊂	⊂	⊃	⊃	⊃
⊄	⊄	⊄	⊆	⊆	⊆	⊇	⊇	⊇
⊕	⊕	⊕	⊗	⊗	⊗	⊥	⊥	⊥
⋅	⋅	⋅	⌈	⌈	⌈	⌉	⌉	⌉
⌊	⌊	⌊	⌋	⌋	⌋	◊	◊	◊
♠	♠	♠	♣	♣	♣	♥	♥	♥
♦	♦	♦	==空格==	 	 	¡	¡	¡
¢	¢	¢	£	£	£	¤	¤	¤
==¥==	¥	¥	¦	¦	¦	§	§	§
¨	¨	¨	©	©	©	ª	ª	ª
«	«	«	¬	¬	¬	­	­	­
==®==	®	®	¯	¯	¯	==°==	°	°
±	±	±	²	²	²	³	³	³
´	´	´	µ	µ	&#181	==”==	"	"
==<==	&lt;	&#60;	==>==	&gt;	&#62;	==’==		&#39;
==&==	&amp	&#38;

5. 表格，列表和表单标签

1. 表格

1. 表格标签

1.  <table>
        <tr> <!-- 定义一行 -->
            <th> 单元格表头内容 </th> <!-- 表头居中显现并加粗 -->
            <th> 单元格表头内容 </th>
            ...
        </tr>
        <tr>
            <td> 单元格内容 </td>
            <td> 单元格内容 </td>
            ...
        </tr>
        ...
    </table>
    
   #### 2. 表格属性
   
   1. | 属性名(`<table>`) | 属性值              | 描述                                        |
       | ----------------- | ------------------- | ------------------------------------------- |
       | align             | left、center、right | 规定表格相对==周围元素==的对其方式          |
       | border            | 数字 或者 ""        | 规定表格单元是否有边框以及边框的粗细        |
       | cellpadding       | 像素值              | 规定单元边缘与其内容之间的空白，默认 1 像素 |
       | cellspacing       | 像素值              | 规定单元格之间的空白，默认 2 像素           |
       | width             | 像素值或者百分比    | 规定表格的宽度                              |
   
   
   
   #### 3. 表格结构标签
   
   1. `<thead><thead>` 内容放表头的内容
   2. `<tbody></tbody>` 内容放表体内容
   
   
   
   #### 4. 合并单元格
   
   1. 跨行合并：rowspan="合并单元格的个数"
   2. 跨列合并：colspan="合并单元格的个数"
   3. 跨行：最上侧单元格为目标单元格，在目标单元格中写合并代码
   4. 跨列：最左侧单元格为目标单元格，在目标单元格中写合并代码
   5. **合并单元格的三个步骤**：
       1. 先确定是跨行还是跨列
       2. 找到目标单元格，写上合并方式 = 合并的单元格的数量。比如：`<td colspan="2" ></td>`
       3. 删除多余的单元格，非目标单元格要删除才能起到合并的效果
   
   
   
   ### 2. 列表
   
   #### 1. 无序列表
   
   1. `<ul>` 标签表示 HTML 页面中项目的无序列表，一般会以项目符号成贤列表项，而列表项使用 `<li>` 标签定义
   
       - ```html
           <ul>
               <li> 列表项 1 </li>
               <li> 列表项 2 </li>
               ...
           </ul>
   

2. <ul> 中不能直接放其他标签，但是 <li> 可以（充当容器）

2. 有序列表

1. 与无序列表类似，最外层标签为 <ol>

3. 自定义列表

1. <dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。d 就是 define

   •   <dl>
           <dt> 定义项目/名字 </dt>
           <dd> 描述每一个项目/名字 </dd>
           <dd> 描述每一个项目/名字 2 </dd>
       </dl>
       
     ### 3. 表单
     
     #### 1. 表单的构成
     
     1. 在 HTML 中，一个完整的表单通常由==表单域、表单控件（表单元素）和提示信息==3个部分构成。
     
     
     
     #### 2. 表单域
     
     1. 在 HTML 标签中，`<form>` 标签用于定义表单域，以实现用户信息的收集和传递
     
         - ```html
             <form action="url地址" method="提交方式" name="表单域名称">
                 各种表单元素控件
             </form>
     

   • 常用的一些属性：

   • 属性	属性值	作用
     action	url 地址	用于指定接收并处理表单数据的服务器程序的 url 地址
     method	get/post
     name	名称	用于指定表单的名称，以区分别的表单域

3. 表单控件（元素）

1. input 输入类型表单元素

1. <input type="属性值" /> ，根据 type 属性设置不同的控件类型

2. <input /> 为单标签

3. type 的可取属性值

   • 属性值	描述
     button	定义可点击按钮（多数情况下，用于通过 JavaScript启动脚本）
     checkbox	定义复选框
     file	定义输入字段和”浏览”按钮，用于文件上传
     hidden	定义隐藏的输入字段
     image	定义图像形式的==提交按钮==
     password	定义密码字段，字符被掩盖
     radio	定义单选按钮
     reset	定义重置按钮，重置表单域中所有的数据
     submit	定义提交按钮，把表单数据发送给服务器
     text	定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符

4. name 和 value 属性

   1. name 属性用于区分表单元素（可以重复，不同于 id），对于单选和多选，相同的 name 表示同一个元素（组）
   2. value 属性
      • 对于输入框来说，就是没输入前的默认值
      • 对于选框来说，就是选择该框时要传输到后台的数据（后台可以获得被选选框的 value 内容）
      • 对于按钮来说，就是按钮上显示的文字

5. 其他属性

   • 属性	属性值	描述
     name	由用户自己定义	表单元素的名称
     value	由用户自己定义	规定表单元素的值
     checked	checked	（选框）规定第一次加载时是否默认被选中
     maxlength	正整数	输入的最大长度

2. 属性提交和重置按钮

1. 提交按钮中的 value 值改变的是按钮上的字

3. <label> 标签，常常配合表单标签<input >使用

1. <label> 标签用于绑定一个表单元素（通过被绑定的元素的 id 属性），当点击 <label> 标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

   •   <label for="sex">男</label>
       <input type="radio" name="sex" id="sex" />
       
     ##### 4.  `<select>` 下拉框
     
     1. 语法
     
         - ```html
             <select>
                 <option> 选项 1 </option>
                 <option> 选项 2 </option>
                 ...
             </select>
     

2. 在 <option> 标签中，可以定义 selected = "selected"，设置某一个为默认选中项

5.<textarea> 文本域标签

1. 语法

   •   <textarea rows="3" cols="20">
       文本内容，这里面是默认的内容
       </textarea>
     

   • 实际开发中用 css 来设置大小和样式