HTML - 1 基础内容
标签与标签属性
属性
-
不区分大小写 (推荐小写)
-
可以用双引号 也可以用单引号 (推荐双引号)
-
重复的属性，后边的会失效
通用属性：id: 给标签打上唯一标识 (head html meta script style title不能加)
class：指定标签类名，与样式配合
style：控制样式
dir：内容的方向 (ltr, rtl) (head html meta script style title不能加)
title：给标签一个文字提示内容 (超链接和图片用得多)
lang： (head html meta script style title不能加)
独有属性：
文档声明
- 放在
html文件第一行
<!DOCTYPE html> <!-- H5 -->
作用：告诉浏览器当前网页的版本
字符编码
- 存储时，采用合适的字符编码 (否则数据会丢失)
- 存储采用哪种编码，读取就采用哪种方式解码
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>字符编码</title>
</head>
<body>
</body>
</html>
设置语言
- 让浏览器显式对应的翻译提示
- 有利于 搜索引擎优化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset = "utf-8">
<title>设置语言</title>
</head>
<body>
</body>
</html>
favicon.ico
排版标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset = "utf-8">
<title>排版标签</title>
</head>
<body>
<h1>一级标题 (一个最好)</h1>
<h2> </h2>
<h3> </h3>
<!-- 使用较少 -->
<h4> </h4>
<h5> </h5>
<h6> </h6>
<p>
段落标签
</p>
<div>
没有含义
</div>
</body>
</html>
语义化标签
- 语义：含义
h1-h6: 标题
p: 段落
div: 没有语义
- 语义化 (标签的默认效果不重要，语义最重要)
好处：1. 代码可读性强；2. 有利于SEO；3. 方便设备解析 (屏幕阅读器、盲人阅读器)
浏览器 爬虫
块级元素与行内元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset = "utf-8">
<title>排版标签</title>
</head>
<body>
<!-- 块级元素 -->
<h1>一级标题</h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
<p> </p>
<div> </div>
<!-- 行内元素 -->
<input>
<span> </span>
</body>
</html>
- 块级元素中能写：行内元素、块级元素
- 行内元素中能写：行内元素，但不能写 块级元素
h1-h6不能互相嵌套p标签中不能写块元素
文本标签
- 用于包裹：词汇、短语
- 通常写在 排版标签 中
- 通常都是 行内元素
<!-- 常用文本标签 -->
<em>着重阅读的内容</em>
<strong>(语气比em更强)</strong>
<span>没有语义</span>
<!-- 不常用文本标签 -->
<cite>作品标题</cite>
<dfn>特殊术语</dfn>
<del>删除并文本</del>
<ins>插入文本</ins>
<sub></sub>
<sup></sup>
<code></code>
<abbr title="英雄联盟">LOL</abbr>
<i>本意是 人物思想活动，现多用于呈现字体图标</i>
<address>(块级元素)</address>
图片标签
- 行内元素
<img width="100" src="./image.jpg" alt="">
alt 属性作用：1. 有利于SEO；2. 方便设备解析 (屏幕阅读器、盲人阅读器)；3. 图片无法显示时
width 属性：1. 单位：px；2. 调整过程中比例不变 (一般不会同时调整宽和高)
./：当前位置；../：上一级
常见图片格式
jpg：有损的压缩格式
优点：1. 支持颜色丰富；2. 占用空间小
缺点：1. 不支持透明背景；2. 不支持动态图
png：无损的压缩格式
优点：1. 支持颜色丰富；2. 支持透明背景
缺点：1. 占用空间略大；2. 不支持动态图
bmp：不进行压缩
优点：1. 支持颜色丰富；2. 保留的细节更多
缺点：1. 占用空间极大；2. 不支持透明背景；3. 不支持动态图
gif：
优点：1. 支持动态图；2. 支持简单的透明背景
缺点：1. 仅支持256种颜色
webp：专门用来在网页中呈现图片
优点：具备上诉几种格式的优点
缺点：兼容性不太好
base64：把图片进行 base64编码，变成一串文本 (直接写在 img 标签的 src 里)
适用于一些较小的图片，或需要和网页一起加载的图片(不用请求了)
超链接
- 行内元素
- 可以包裹除
<a>以外的一切标签
<!-- 打开网页 -->
<a href="" target="_self"></a> <!-- 默认 -->
<a href="" target="_blank"></a>
<!-- 跳转文件 -->
<a href="./movie.mp4">电影</a> <!-- 浏览器可以直接打开的文件 = 点击查看 -->
<a href="./ys.zip">压缩</a> <!-- 浏览器不可以直接打开的文件 = 下载 -->
<!-- 下载 -->
<a href="./movie.mp4" download="下载下来的文件名">电影</a>
<!-- 执行js脚本 -->
<a href="javascript:alert(6);">点我弹窗</a>
锚点
<a href="#here">跳转</a>
<a name="here"></a>
<a name="here"></a> <!-- 后写的失效 -->
<a href="#atm">跳转</a>
<p id="atm"> </p>
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
唤起指定应用
<a herf="tel:10086">电话</a>
<a href="mailto:[email protected]">邮件</a>
<a herf="sms:10086">短信</a>
列表
有序列表 Ordered List
<ol>
<li></li> <!-- list item -->
</ol>
无序列表 Unordered List
<ul>
<li></li>
<!-- 可以包裹其它内容 -->
<li>
<ol>
<li>
<span>hh</span>
</li>
</ol>
</li>
</ul>
定义列表 Definition List
<dl>
<dt>术语名称</dt> <!-- definition titile -->
<dd>术语描述</dd> <!-- definition description -->
</dl>
表格
表格 table：
表格标题 caption；表格头部 thead；表格主体 tbody；表格脚注 tfoot
<table border="1">
<caption>学生信息</caption>
<thead>
<tr> <!-- 行 -->
<th>name</th> <!-- head -->
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>wxr</td> <!-- data -->
<td>21</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>共计：1人</td>
</tr>
</tfoot>
</table>
常用属性
<table>：
<table border="1" width="500" height="500" cellspacing="0">
</table>
-
border：>1时，只能调整表格边缘边框 -
width：每一列的宽度自动分配 -
height：会调整 表格主体 的高度去满足 设置的 height 值 -
cellspacing：单元格之间的间距 (上、下、左、右)
<thead>
<table border="1" width="500" height="500" cellspacing="0">
<caption>学生信息</caption>
<thead height="500" align="center" valign="middle"> <!-- 这里是真500，整个表>500 -->
<tr> <!-- 行 -->
<th>name</th> <!-- head -->
<th>age</th>
</tr>
</thead>
</table>
-
align：水平方向 对齐方式 (center left right) -
valign：垂直方向 对齐方式 (middle top bottom)
<tbody>
<table border="1" width="500" height="500" cellspacing="0">
<caption>学生信息</caption>
<thead height="50" align="center" valign="middle">
....
</thead>
<tbody height="520" align="center" valign="middle">
...
</tbody>
</table>
height：thead, tbody, tfoot 加起来不足设置的500时，会把高度补给 tbody，所以，设置的高度要大 表格主体才会有变化
<tfoot> 同 <tbody>
<tr> <th> <td>
<table border="1" width="500" height="500" cellspacing="0">
<caption>学生信息</caption>
<thead height="50" align="center" valign="middle">
<tr height="50" align="center" valign="middle">
<!-- 所在列全是50，所在行全是100 -->
<th width="50" height="100" align="right" valign="bottom">name</th> <!-- 只有这一格会右下对齐 -->
<th>age</th>
</tr>
</thead>
<tbody height="520" align="center" valign="middle">
<tr>
<td>wxr</td>
<td>21</td>
</tr>
</tbody>
<tfoot height="50" align="center" valign="middle">
<tr>
<td></td>
<td>共计：1人</td>
</tr>
</tfoot>
</table>
跨行与跨列
<table border="1">
<caption>学生信息</caption>
<thead>
<tr>
<th colspan="2">1-1</th>
<th>1-3</th>
</tr>
</thead>
<tbody>
<tr rowspan="2">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
</tbody>
</table>
其它标签
<br>：换行
<hr>：分割线 (有语义，只是想要一条水平线 使用css)
<pre>：按原文显示
表单
网页中的交互区域
请求 -- 响应
<form action="https://www.baidu.com/s" target="_blank" method="post">
<!--表单控件-->
<input type="text" name="wd">
<button>搜索</button>
</form>
-
action: 交给谁处理 -
name: 给数据取名字 -
method: 默认为 get
常用表单控件
文本输入框
账户：<input type="text" name="account" value="hututu" maxlength="10">
value: 输入框默认值
密码输入框
密码：<input type="password" name="pwd" value="123" maxlength="6"> <!--value不常用-->
单选框
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
name(键): 划分到一组，一组里只能选一个value(值): 传给后端的数据checked: 默认选中
多选框
爱好：
<input type="checkbox" name="hobby" value="sing" checked>唱歌
<input type="checkbox" name="hobby" value="dance" checked>跳舞
隐藏域
<input type="hidden" name="from" value="baidu">
确认按钮
<button type="submit">确认</button>
<input type="submit" value="确认">
button默认 submitvalue是按钮中显式的值
重置按钮
<button type="reset">重置</button>
<input type="reset" value="重置">
普通按钮：不会引起表单提交和重置的按钮
<button type="button">检测账户是否被注册</button>
<input type="button" value="检测账户是否被注册">
文本域
其它：<textarea name="other" cols="30" rows="10"></textarea>
下拉框
籍贯：
<select name="place">
<option value="gz">贵州</option>
<option value="sd" selected>山东</option>
</select>
禁用表单控件
<input disabled type="text">
label标签
建立关联
<label for="zh">账户：</label>
<input id="zh" type="text" name="account" value="hututu" maxlength="10">
for和id对应
<!--第二种方法-->
<label>
密码：<input type="password" name="pwd" value="123" maxlength="6">
</label>
fieldset legend
<form action="https://www.baidu.com/s" target="_blank" method="post">
<fieldset>
<legend>主要信息</legend>
<input type="text" name="wd">
</fieldset>
<button>搜索</button>
</form>
框架标签
嵌入
<iframe src="https://www.baidu.com" width="200" height="100" frameborder="0"></iframe>
<a href="https://www.toutiao.com" target="container">click</a>
<iframe name="container"></iframe>
<form action="https://so.toutiao.com/search" target="container"></form>
<iframe name="container"></iframe>
字符实体
: 空格 ( )
<: <
>: >
&: &
©: ©
×: ✖
÷: ➗
meta元信息
网页基本信息
<!-- 针对IE浏览器的一个兼容性配置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对移动端的一个配置 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 配置网页的关键字 -->
<meta name="keywords" content="购物,家电">
<!-- 配置网页描述信息 -->
<meta name="description" content="这是一个购物网站">
<!-- 配置搜索引擎爬虫 -->
<meta name="robots" content="noindex">
<!-- 配置网页自动刷新 -->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
<!---->
<meta name="author" content="wxr">
<meta name="generator" content="Visual Studio Code">