HTML(Ci)
概念
网页（HTML文件）
网页组成网站
网页通常是HTML格式，通过浏览器来阅读
HTML(超文本标记语言)
不是一种编程语言，是一种标记语言
由标签组成
浏览器内核（渲染引擎
Web标准
结构(网页元素,HTML)
表现(外观样式,CSS)
行为（交互，JavaScript）
HTML
语法
关键词由‘<>’包裹，例如：<html>
分类
双标签，例如：<html></html>
单标签，例如：
属性
属性要写在标签名后面
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
属性采取键值对的格式，即key="value"的格式，属性=“属性值”
关系
包含关系（父子干系）
并列关系（并列关系）
结构标签（骨架标签）
<html>
<head>
<title>这是我的第一个页面</title>
</head>
<body>
嘿嘿嘿
</body>
</html>vsCode框架解析
<!DOCTYPE html>
<!-- <!DOCTYPE>
1.类型：文档类型声明标签（不是HTML标签）
2.作用：用来告诉浏览器使用哪种HTML版本来显示网页
3.注意：声明必须位于文档最前面，处于<html>标签前
-->
<html lang="en">
<!-- lang
1.作用：定义当前文档显示的语言（英文网页or中文网页）
2.类型
（1）en:定义语言为英语
（2）zh-CN:定义语言为中文
（3）fr:定义语言为法语
3.注意：主要起提示作用
-->
<head>
<meta charset="UTF-8">
<!-- <meta>
1.作用：通过charset属性来规定文档使用哪种字符编码
2.注意：一定要写，否则会出现乱码
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>标签说明
html
HTML标签（根标签）
网页中最大的标签
head
文档头部
注意：在head标签中我们必须设置的标签是title
title
文档的标题
body
文档的主体
标题标签h1-h6
示例：<h1>我是一级标签</h1>
作用：作为标题使用，依据重要性递
特点：
文字加粗，字号依次变大
一个标题独占一行
段落标签p
示例：<p>我是一个段落</p>
作用：定义段落
特点：
根据浏览器窗口大小自动换行
段落和段落之间保有空格(可理解为每个段落下面自带间隔)
换行标签br /
示例：
作用：强制换行
文本格式化标签
示例：
加粗<strong></strong>或者<b></b>
倾斜<em></em>或者<i></i>
删除线<dei></dei>或者<s></s>
下划线<ins></ins>或者<u></u>
作用：突出重要性
div&span
示例：<div></div>和<span></span>
作用：布局网页
特点：
没有语义
<div></div>一行只能放一个
<span></span>一行可放多个，每个之间有间隔
图像标签<img src="图像URL"/>
属性：
src(图片路径)
示例：
<img src="***"/>作用：是图像标签的必须属性，它用于指定图像文件的 路径和文件名
altt（文本）
示例:
<img src="***" alt="图片显示失败"/>作用：替换文本，图像不能显示时显示的文字（用文字替换图片）
title(文本)：
示例：
<img scr="***" alt="点击图片跳转页面"/>作用：提示文本，鼠标放到图像上，提示的文字
width（像素）：
示例：
<img scr="***" width="500"/>作用：设置图像的宽度
特点：只修改宽度（高度）时，高度（宽度）等比例缩放
height（像素）：
示例：
<img scr="***" height="500"/>作用：设置图像的高度
border（像素）：
示例：
<img scr="***" border="500"/>作用：设置图像的边框粗细
超链接标签<a></a>
语法:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性:
href(地址):
作用：指定连接目标的url地址
提醒：是超链接标签的必须属性
target(打开方式):
作用：指定连接页面的打开方式
提醒：
_self为默认值(链接页面覆盖原页面)，_blank为在新窗口中的打开方式
分类：
外部连接：
示例：
<a href="https://vjudge.net"> vj</a>
内部链接（同一网站内的链接）：
示例：
<a href="index.html">首页r</a>
空链接（没有确定链接目标）：
示例：
<a href="#">首页</a>
下载链接（href里面的地址是一个文件或者压缩包，会下载这个文件）
网页元素链接：
示例:
<a href="https://vjudge.net"><img src="img.ipg"></a>（图片超链接）
锚点链接（定位到页面中某个位置）：
链接文本：
语法：href的属性值设为'#名字'的形式
示例：
<a href="#two">第二集</a>
目标位置标签：
语法：添加一个id属性，属性值为链接文本的href属性值所设置的名字
示例：
<h2 id="two">第二季介绍</h2>
注释标签：<!--注释语句-->
表格标签（显示数据）：
语法：
<table><!--定义表格的标签-->
<thead><!--包裹整个表头-->
<tr>
<th>表头</th><!--表头单元格-->
</tr>
</thead>
<tbody><!--包裹整个表主体-->
<tr><!--定义表格中的行-->
<td>单元格内的文字</td><!--普通单元格-->
</tr>
...
</tbody>
</table>示例：
<table>
<tr><th>姓名</th><th>年龄</th></tr>
<tr><td>刘德华</td><td>55</td></tr>
<tr><td>黎明</td><td>51</td></tr>
</table>提醒：
表头单元格中的内容加粗&居中
属性（写到tableb标签里面）：
align(对齐方式//相对于整个页面来说)：
属性值：
（1）left
（2）center
（3）right
border(单元格是否有边框)：
属性值：像素值（有边框）或者"" （没有边框//默认）
cellpadding(单元格边沿与其内容之间的空白//默认1像素)：
属性值：像素值
cellspacing(单元格之间的空白//默认2像素)：
属性值：像素值
width(表格宽度)：
属性值：像素值或者百分比
表格结构标签（把表格分割成表格头部&表格主题）：
分类：
（1）<thead></thead>（整个表头区域）
（2）<tbody></tbody>（整个表主体区域）
作用：使代码有更好的语义
合并单元格（合并代码写到目标单元格(<td>)里面）：
分类：
跨行合并：
语法：rowspan="合并单元格个数"
跨列合并：
语法：colspan="合并单元格个数"
目标单元格：
跨行：最上侧的单元格
跨列：最左边的单元格
提醒：合并后记得删掉多余单元格
列表标签（布局）：
分类：
无序列表：
语法：
<ul> <li>列表项</li> </ul>提醒：
<ul>标签里面只能放<li>标签（其余的都不行，例如：
纯文字）<li>标签里面可以放所有元素
有序列表：
语法：
<ol> <li>列表项</li> </ol>提醒：
<ol>标签里面只能放<li>标签
<li>标签可以放所有元素
自定义列表:
语法 :
<dl> <dt>名词</dt> <dd>名词解释</dd> </dl>提醒：
<dl>标签里面只能放<dt>&<dd>
一个<al>里面<dt>&<dd>没有数量限
<dt>&<dd>里面可以放任何元素
表单标签（搜集用户信息）：
组成：
表单域<form></form>:
语法：
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>属性：
action
属性值：(服务器的)url地址
method
属性值：GET/POST
name
属性值：名称
作用：把其范围内的表单元素信息提交给服务器（url地址）
表单控件（表单元素）：
<label>标签可以绑定一个表单元素
语法：
<label for="sex">男</label> <input type="radio" name="sex" id="sex"/>作用：当点击<label>标签内的文本时，自动将光标转移到对应的表单元素上
属性：for
提醒：<label>标签的for属性应当与相关元素的id属性相同
分类：
<input/>输入表单元素：
语法：
<input type="属性值"/>属性：
type(必需属性): * 作用：指定不同的控制类型
属性值： checkbox：复选框 提醒：拥有相同name属性的<imput>标签才能实现多选效果 radio：单选按钮 提醒：拥有相同name属性的<imput>标签才能实现单选效果 button:可点击按钮 image：图像形式的提交按钮 reset：重置按钮 submit：提交按钮 taxt：单行输入字段（默认宽度为20 格字符） password：密码字段 file：仅供文件上传 hidden：定义隐藏的输入字段
name：
属性值：input元素的名称
特点：单选按钮&复选框必须要有相同的name值
value（显示在元素上的说明）：
cheched：
属性值：checked
特点:单选按钮&复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮
maxlength：
属性值：输入字段中字符的最大长度
<select>下拉表单元素：
* 语法 ``` html <slect> <option>选项</option> </slect> ``` * 提醒： * <span><select>中至少包含一对<option></span>在<option>中定义selected="selected"时，当前项为默认选中项
<textarea>文本域表单元素：
* 语法：<span><textarea rows="3" cols="20"></span> * 作用：允许用户在表单中输入或选择内容的控件
路径
相对路径（引用文件相对于HTML文档的位置）
实现：跳转到和HTML文档同一目录下+文件名
分类：
同一级路径
用法：直接写图像名
示例：
<img src="img.ipg"/>
下一级路径
用法：'/'进入下一目录
示例：
<img src="imger/img.ipg"/>
上一级路径
用法：'../'返回上一级目录
示例：
<img src="../img.ipg"/>
绝对路径（引用文件所在位置或完整的网络地址）
示例1："C:\Users\哈哈哈\Desktop\CODE\web\imges"
示例2："https://vjudge.net"
特殊字符
常用
全
vsCode快捷键
shift+alt+⬇//复制指定行
双击，ctrl+d//选定多个相同单词
ctrl+alt+⬇（⬆）//添加多个光标
ctrl+h//全局替换某个单词
ctrl+g//快速跳转到某一行
shift+alt//选定某一区块
shift+alt+a//多行注释
alt+z//自动换行