标签
标签一般用<>来表示，一般是成对出现的
分为开始标签<>，结束标签</>
也有单标签，比方说<br/>
标签关系
包含(嵌套)关系和并列关系，所有未包含在一块的都是并列关系
<html>
<tittle> </tittle>
</html>
以上为包含关系
<head>
</head>
<head>
</head>
以上为并列关系
结构标签（骨架标签）
每个网页都有一个基本的结构标签，通常被称为骨架标签，内容是在此标签中数学，HTML页面也被称为HTML文档
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> | HTML标签 | 页面的最大的标签，称为根标签 |
<head></head> | 文档的头部 | 这个是必须要设置的 |
<titile></title> | 文档的标题 | 让页面中有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的内容，内容都是放到body中 |
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset = "UTF-8"/>
<title>标题</title>
</head>
<body>
内容
</body>
</html>
标签
文档类型声明，作用是告诉浏览器使用哪个版本的HTML显示网页
而<!DOCTYPE HTML>则表示使用HTML5显示网页
该语句必须要写到第一行
lang语言
<html lang="en">
该语句是定义页面的语言是英文，en可能会触发浏览器的翻译功能
###charset字符集
<meta charset="UTF-8"/>
以上语句若不写，打开文件时可能出现乱码
注释
<!--
注释
-->
HTML标签
标题标签
标题等级分为1-6级，分别对应
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
其中的h是head的缩写，意思是头部
将文字作为标题用
标题仅在一行显示，即在标题后加入任何内容都会在下一行显示
段落标签
<p>这是一段文字，用来分段</p>
p的意思为paragraph，为段落的意思
在网页中如果想要分段，就必须用段落标签
特点
- 文本会根据在浏览器中的窗口的大小自动换行
- 段落与段落直接有比较大的空隙
换行标签
会将文字强制换行
<br/>
br是break的缩写，是打断、换行的意思
特点
<br/>是个单标签<br/>只是简单的另起一行，与段落不一样，段落直接会有间距，而<br>没有
文本格式化标签
通常是粗体、斜体、下划线、删除线
| 含义 | 代码 |
|---|---|
| 加粗 | <strong></strong>或者<b></b> |
| 倾斜 | <em></em>或者<i></i> |
| 删除线 | <del></del>或者<s></s> |
| 下划线 | <ins></ins>或者<u></u> |
盒子标签
<div>和<span>
####语法
<div></div>
<span></span>
div是division的缩写，表示分割、分区
span意思跨度、跨距
特点
- div独占一行，称为行内元素
- span可以在一行写多个
图像标签
加入图像，是个单标签
<img src = "image url"/>
img是image的缩写，意思为图像
src是图像的必须属性，指定了图像的路径和文件名
先将图片放在HTML文件的路径下
<img src = "1.png"/>
| 属性 | 属性值 | 说明 |
|---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本，图像不能显示时，显示的文字 |
title | 文本 | 提示文本，鼠标放到图像上显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像边框的粗细 |
如果仅修改width或者height会自动等比例缩放，两者都休给就不是等比例
<img src="C:\Users\singx\Desktop\picture\p-11.jpg" alt="图片" title="壁纸" height="99" width="118" />
注意事项
- 图像标签可以有多个属性，必须写在标签名后边
- 属性之间不分先后顺序，标签名与属性 属性与属性之间均用空格隔开
- 属性的形式为
属性="value" src属性是必须要写的
路径
根目录：打开存放网站文件夹的第一层
假设有以下文件
|--------------------------|
|html |
| |___->h1.html |
|index.html |
|logo1.jpg |
|images |
| |___->logo2.jpg |
相对路径
以引用文件所在的位置为参考，建立起的目录路径
| 分类 | 符号 | 含义 |
|---|---|---|
| 同一级路径 | 以上文件结构中，引用logo1 <img src="logo1.jpg"/> | |
| 下一级路径 | / | 引用logo2的方法<img src="images/logo2.jpg"/> |
| 上一级路径 | ../ | 若h1.html引用logo1方法<img src=../logo1.jpg/> |
同理，向上两级
<img src = "../../"/>
向上两级
<img src = "../../../"/>
向上三级
####绝对路径
是指一个文件的目录下的绝对位置，通常是以盘符开始的，比方说网址、硬盘文件
形式
<img src="http或者盘符"/>
超链接标签
语法格式
<a href="链接" target ="目标窗口弹出方式">文本或者图像</a>
a是anchor，意思为锚
| 属性 | 含义 |
|---|---|
href | 必需的一个属性，指定了跳转的URL地址 |
target | 指定打开的方式，其中_self为默认值，_blank是在新窗口中打开，所以target可省略 |
例如百度
<a href="http://baidu.com" target="_blank">百度</a>
外部链接
指向本网站内以外的链接
内部链接
填入的是相对相对路径
链接内容为#时代表空链接
锚点链接
设置href属性的内容为"#内容"，其中内容为任取的一个
找到合适的地方
<h1-6 id="内容">dddd</h1-6>
特殊字符
| 含义 | 语法 |
|---|---|
| 空格 | |
| 小于号 | < |
| 大于号 | > |
表格
语法
<table>
<tr>
<td>
</td>
</tr>
</table>
table是表格的标签
tr是表格中的行标签
td是表格中的单元格，必须镶嵌到tr中
表头单元格
一般单元格的表头都是特殊的，通常用
<th>修饰</th>
通常加入th之后该单元格的元素会居中且加粗
表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
align | left、center、right | 对其方式 |
border | 1或者"" | 是否有边框，1有，""没有，默认没有 |
cellpadding | 像素值 | 边缘与内容之间的空白，默认为1像素 |
cellspacing | 像素值 | 规定单元格之间的空白，默认2像素(即双边框) |
width和heigth | 像素值或者百分比 | 代表宽度和高度 |
<table border="1">
表格结构标签
将表格分割成表格头部和表格主体两大部分，因此可以将表格分为<thead>和<tbody>两个标签
<table border="1">
<thead>
<tr>
<th>
a
</th>
<td>
b
</td>
<td>
c
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
a
</td>
<td>
b
</td>
<td>
c
</td>
</tr>
</tbody>
</table>
- 一般
thead指表格的头部，tbody指表格的主题 tbody存放表格的数据- 以上标签都是放在
<table></table>中的
合并单元格
方式
-
跨行合并（把不处在一行的单元格合并到一块）
rowspan="合并的个数" -
跨列合并（把处在同一行的合并）
colspan="合并的个数"
目标单元格
写合并代码
跨行
最上侧单元格为目标单元格，在此处写合并代码
跨列
最左侧单元格为目标单元格，在此处写合并代码
步骤
-
先确定是跨行合并还是跨列合并
-
找到目标单元格
<tr> <td rowspan="个数"> </td> </tr> -
删除单元格
例如，创建以下表格
代码
<!--
* @Created by : SongXiaoxu
* @Copyright © 2021年 by: 宋晓旭. All rights reserved
* @Date: 2021-02-09 13:04:51
* @LastEditTime: 2021-02-16 15:08:10
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="5">
个人简历
</th>
</tr>
<tr>
<td>
姓名：
</td>
<td>
______
</td>
<td>
性别：
</td>
<td>
______
</td>
<td rowspan="4">
图片
</td>
</tr>
<tr>
<td>
状况：
</td>
<td>
______
</td>
<td>
出生：
</td>
<td>
______
</td>
</tr>
<tr>
<td>
民族：
</td>
<td>
______
</td>
<td>
面貌：
</td>
<td>
______
</td>
</tr>
<tr>
<td>
身高：
</td>
<td>
______
</td>
<td>
学历：
</td>
<td>
______
</td>
</tr>
</table>
</body>
</html>
列表
分类
无序列表
有序列表
自定义列表
无序列表
整体框架使用<ul></ul>，里边的每个选项使用<li></li>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ul>
<ul>标签中只能放<li>标签不允许其他标签
<li>标签中能放任意的其他标签
有序列表
整体框架使用<ol></ol>，里边的每个选项使用<li></li>
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ol>
<ol>标签中只能放<li>标签不允许其他标签
<li>标签中能放任意的其他标签
自定义列表
框架用<dl></dl>内容用<dt></dt>(标题)和<dd></dd>(表项)
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
<dl>中，只能包含<dt>和<dd>
一般情况，一个<dt>都是出现多个<dd>
<dd>和<dd>中可以放任意的标签
表单
由表单域、表单控件(表单元素)、提示信息组成
表单域
包含表单元素的区域，框架用<form></form>表示
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素
</form>
| 属性 | 属性值 | 中文 | 作用 |
|---|---|---|---|
| action | url地址 | 活动 | 用于指定接收表单数据的服务器地址 |
| method | get/post | 方法 | 表单的提交方式 |
| name | 名称 | 名字 | 指定表单的名称 |
表单控件(表单元素)
可以定义多种表单元素，这些元素是提供给用户输入或者选择内容的控件
input元素
格式
<form>
<input type="属性值"/>
</form>
- input是个单标签
- type的属性值不同，可以指定不同的控件类型
属性
| 属性值 | 中文 | 描述 |
|---|---|---|
button | 按钮 | 可点击的按钮 |
checkbox | 复选框 | 定义多/复选框 |
file | 文件 | 输入定义字段和浏览按钮，上传文件 |
hidden | 隐 | 定义隐藏输入字段 |
image | 图像 | 定义图像提交按钮 |
password | 密码 | 定义密码字段，该字符会有、被掩码 |
radio | 收音机 | 定义单选按钮 |
reset | 重置 | 重置按钮，清除表单中所有数据 |
submit | 提交 | 将表单提交到服务器 |
text | 文本 | 定义单行的输入框，默认是20个字符 |
其中，input还有其他公共属性
| 属性 | 中文 | 值 | 含义 |
|---|---|---|---|
name | 名字 | 字符串 | 为每个标签取个名字，复选框中，取一个相同名字才可以实现多选一 |
value | 值 | 数字 | 规定input的值 |
checked | 已检查 | checked | 规定此input元素在加载时被选中 |
maxlength | 最大长 | 正整数 | 限制输入字段中最大长度 |
-
以上属性均写在input标签中
-
name和value是每个表单元素都应该有的属性值，主要给后台人员使用 -
name要求每个单选框和复选框的值都必须与name一致
#####复选框
<form>
<input type="checkbox" name="c1">男<input type="checkbox" name="c1">女<input type="checkbox" name="c1">保密
</form>
以上实现多选一
#####checked（默认选中）
单选框和复选框都可以用checked
用法
<input type="radio" name="a1" />同意<input type="radio" name="a1" checked="checked" />不同意
你是：
<input type="checkbox" checked="checked">狗
<input type="checkbox" checked="checked">猫
<input type="radio">人
<input type="radio">猪
最大长度
在输入框中限制
用户名:<input type="text" value="请输入用户名" maxlength="4" /><br />
密码:
<input type="password" value="abc" />
设置用户名后的输入框只能输入4个长度
按钮
按钮的显示的名称可以通过value进行改变
<input type="submit" value="交上吧">
<input type="reset" value="重写">
reset会将表单的内容还原到初始状态
label标签
label 中文标签
解决点击文字无法将选择框选中的问题
####语法
<lable for="名字">文字</lable>
<input type="checkbox" id="名字"/>男
<label>标签中的for属性的值，要与表单元素的id属性的值一致
select下拉元素
select-中文 选择
<select>标签中有多个<option>标签
option为选项的意思
####语法
<select>
<option>选项1</option>
<option>选项2</option>
</select>
在<option>中可以添加selected="selected"语句则代表默认选中此选项
textarea文本域
textarea为文本区域，拥于大量输入文字的情况，相当于多行的输入框
语法
<textarea rows="值" cols="值">默认的文本内容</textarea>
rows为行数，cols为每行可以显示的字数，这两项都可用css实现
Q.E.D.
