前端 --- HTML4
0. 基础
0.1 概述
HTML( HyperText Markup Language ): 超文本标记语言,超文本是一种组织信息的方式,通过超链接将不同空间的文字、图片等各种信息组织在一起,能从当前阅读的内容,跳转到超链接所指向的内容(页面,文件,锚点,应用等)
0.2 注释
<!-- 需要注释的内容 -->
1. 特殊符号
空格 （non-breaking spacing，不断打空格)
< 小于号（less than)
> 大于号（greater than)
& 符号&
¥ 符号¥
× 符号×
÷符号÷
" 双引号
' 单引号
© 版权©
™ 商标™
2. 基本结构
<!DOCTYPE html> <!-- 文档声明: 告诉浏览器以html5的标准渲染 -->
<html lang="zh-CN"> <!-- lang=zh-CN表示内容都是简体中文 -->
<!-- head中存放的是一些配置信息:如网页标题,引入css,引入js -->
<head>
<!-- 声明编解码方式 -->
<meta charset='utf-8'/>
<title>网页标题(页签名)</title>
</head>
<!-- body中存放的是需要在浏览器展现的标签 -->
<body></body>
</html>
3. 标签分类概念
html标签又叫做html元素，它分为块级元素和内联元素（也可以叫做行内元素），都是html规范中的概念。
3.1 块级元素
指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建
特点：
- 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
- 可以直接控制宽度、高度以及盒子模型的相关css属性
- 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
- 在不设置高度的情况下，块级元素的高度是它本身内容的高度
3.2 行内元素
指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建
特点
- 和其他内联元素从左到右在一行显示
- 不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
- 内联元素的宽高是由本身内容的大小决定（文字、图片等）
- 内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
4. 块级元素
4.1 h1 - h6
标题标签 <h1> - <h6>,为了使网页更具有语义化,标题化
1. 示例
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
4.2 p
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落
1. 示例
<p> 我是一个段落 </p>
3. 注意事项
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间会有空隙。
4.3 div
用于整体布局
<div>123</div>
4.4 hr / br
<hr/> <!-- 分割线,自封闭标签,即不需要后面再有</hr> -->
<br/> <!-- 换行标签,自封闭标签,即不需要后面再有</br> -->
4.5 ul
1. 有序列表
示例
<ol type="none">
<li>hello</li>
<li>world</li>
<li>hi</li>
</ol>
属性表
| 属性名 | 标识 | 选项 | 描述 |
|---|---|---|---|
| type="" | 选填 | type="1": 从1开始的数字列表，默认值;type="A": 从A开始的大写字母列表;type="a": 从a开始的小写字母列表;type="Ⅰ": 从Ⅰ开始的大写罗马数字列表;type="i": 从 i 开始的小写罗马数字列表 |
|
| start="" | 选填 | start="5" 指定从数字5开始start="E" 指定从大写字母E开始start="e" 指定从大写字母e开始start="Ⅰ" 指定从大写罗马数字Ⅰ开始start="ⅰ" 指定从小写罗马数字ⅰ开始 |
2. 无序列表
示例
<ul type="none">
<li>hello</li>
<li>world</li>
<li>hi</li>
</ul>
属性表
| 属性名 | 标识 | 选项 | 描述 |
|---|---|---|---|
| type="" | 选填 | type="disc": 实心圆点，默认值;type="circle": 空心圆圈;type="square": 实心方块;type="none": 无样式; |
3. 标题列表
示例
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
4.6 table
语法格式
<table>
<caption></caption> <!-- 标题 -->
<thead>
<tr> <!-- 表头,大部分只有一行 -->
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr> <!-- 第一行表体 -->
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 第二行表体 -->
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
属性表
| 属性名 | 标识 | 选项 | 描述 |
|---|---|---|---|
| border="" | 选填 | 表格边框.此属性为设置四个方向的边框,单位为px; | |
| cellpadding="" | 选填 | 内边距 （内边框和内容的距离,单位为px | |
| cellspacing="" | 选填 | 外边距.（内外边框的距离,单位为px | |
| width="" | 选填 | 设置表格宽度,单位为px、百分比 | |
| height="" | 选填 | 设置表格高度,单位为px、百分比 | |
| align="" | 选填 | center: 水平居中left: 左对齐right: 右对齐 |
水平方向的对齐方式 |
| valign="" | 选填 | middle: 垂直居中top: 顶部对齐bottom: 底部对齐 |
垂直方向的对齐方式 |
| rowspan="" | 选填 | 表体中的单元格竖跨多少行 | |
| colspan="" | 选填 | 表体中的单元格横跨多少列（即合并单元格） |
4.7 form
示例
<form action="" method="">
</form>
属性表
| 属性名 | 标识 | 选项 | 描述 |
|---|---|---|---|
| action="" | 选填 | https://www.baidu.com: 完整路径,/xxx/xxx:相对路径,会根据当前url地址拼接上/xxx/xxx后成为一个整体路径去提交表单数据 |
提交当前form表单到哪个网站 |
| method="" | 选填 | method="GET" // 以GET方式发送请求,浏览器的地址栏可以看到携带的参数,默认值 method="POST" // 以POST方式发送请求,将数据写在请求体中 |
发送请求的方式 |
| enctype="" | 选填 | enctype="multipart/form-data" // 会设置请求头,content-type:"multipart/form-data" enctype="application/x-www-form-urlencoded" // 会设置请求头,content-type:"application/x-www-form-urlencoded enctype="text/plain" // 会设置请求头,content-type:"text/plain" |
|
| name="" | 必填 | 提交到后端服务器的form对象的key值 | |
| target="" | 选填 | _self 在当前页签打开 默认值 _blank新开页签打开 |
发送请求后的页签加载方式 |
4.8 select
示例
<select name="" id="" multiple>
<option value="1" selected>沙河市</option>
<option value="2">于辛庄市</option>
<option value="3">回龙观市</option>
</select>
<!-- multiple属性,多选 -->
<!-- selected属性,默认选中 -->
<!-- name属性提交数据时的键 -->
<!-- option标签中value属性的值需要写,是将来提交数据的真实数据 -->
属性表
| 属性名 | 标识 | 选项 | 描述 |
|---|---|---|---|
| name="" | 必填 | 多选框的key值 | |
| multiple | 选填 | 多选下拉框,默认为单选下拉框 | |
| value="" | 选填 | option的属性,用来提交到后端的值 | |
| selected | 选填 | 默认选中 |
4.9 label
用来标识标签的作用,点击label中的文字其绑定的input也会获取焦点
示例
<!-- 写法一 -->
<label for="username">用户名: </label>
<input type="text" id="username">
<!-- 写法二 -->
<label>
用户名: <input type="text" id="username">
</label>
注意
1. label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
4.10 textarea
多行文本输入框
语法格式
<textarea name="" id="" cols="30" rows="10">
</textarea> <!-- 设置10行30宽度的文本输入框 -->
常用属性
cols="" // 列
rows="" // 行
5. 行内元素
5.1 文本标签
在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示
1. 加粗
<b>被加粗的内容</b>
<strong>十分重要的内容</strong> <!-- 表示strong中的内容比 em 更加重要 -->
2. 倾斜
<em>着重阅读的内容</em> <!-- 自带倾斜样式 -->
<i>我是倾斜的文本</i>
3. 书名号
<cite>泰坦尼克号</cite> <!-- 用来表示作品标题(书籍、歌曲、电影等),会在被包裹的内容两侧出现 书名号 -->
4. 双引号
屈原曾经说过:<q>路漫漫其修远兮,吾将上下而求索</q>
5. 下划线标签
<u>标签中的内容会有下划线</u>
<ins>标签中的内容会有下划线</ins>
5. 中横线
<s>标签中的内容会有删除线</s>
<del>世界很大我想去看看</del>
7. 下标标签
H<sub>2</sub>O
8. 上标标签
2<sup>3</sup>
9. 代码字符串,不执行
<code>alert("你好啊")</code> <!-- 用来表示标签内的内容是代码 -->
<var>变量名</var> <!-- 用来表示标签内的内容是变量名 -->
10. 提取内容
如用来标识设备输出
手机提示: <samp>支付宝到账100万元</samp>
11. 文本逆序
<bdo dir="ltr">123</bdo> <!-- 标签中的内容,从左到右显示 -->
<bdo dir="rtl">123</bdo> <!-- 标签中的内容,从右到左显示 -->
5.2 input
1. 示例
<input type="text"> <!-- input标签为自封闭标签,即在后面再写 </input> -->
**2. 属性: **
| 属性名 | 标识 | 选项 | 描述 |
|---|---|---|---|
| name="" | 必填 | 将input输入或选择的内容发送到服务器时的key | |
| type="" | 必填 | text: 文本输入框,默认值password: 密码输入框file: 文件选择框date: 日期选择框radio: 单选框checkbox: 复选框,多选框submit: 自动提交按钮reset: 重置按钮button: 普通按钮hidden: 隐藏按钮,前端隐藏,一般设置name和value,发送的时候后端来校验是否是非法请求 |
输入框的类型 |
| value="" | 选填 | 输入框的默认值 | |
| maxlength="" | 选填 | 最大输入长度 | |
| minlength="" | 选填 | 最小输入长度 | |
| disabled | 选填 | 禁用 |
注意
1. 如果想将数据提交到后台,那么必须写name属性
2. input选择框(单选框,复选框,日期输入框),必须写name属性和value属性
3. input选择框(单选框,复选框,日期输入框),name值相同的算是一组选择框
5.3 span
用来装内容的标签
<span>123</span>
5.4 img
在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。 src 是 <img> 标签的必须属性，它用于指定图像文件的路径
1. 图片格式
- jpg 格式(常用): 扩展名为
.jpg或.jpeg,是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了),支持的颜色丰富、占用空间小,不支持透明背景、不支持动态图,应用场景:对图片细节没有极高要求的场景,例如: 网站的产品宣传图等 - png 格式: 扩展名为
.png,是一种无损的压缩格式,能够高质量的保存图片,支持的颜色丰富、占用空间略大、支持透明背景、不支持动图. 应用场景:想让图片有透明背景、想要更高质量的呈现图片,例如: 公司logo、重要配图等 - bmp 格式: 扩展名为
.bmp,是一种不进行压缩的格式,在最大程度上保留图片更多的细节,支持的颜色丰富、占用空间极大、但保留的细节更多、不支持透明背景、不支持动图. 应用场景:对图片细节要求极高,例如:大型游戏中的图片,网页中很少使用 - gif 格式: 扩展名为
.gif,仅支持256中颜色,色彩呈现不是很完整,支持的颜色较少,支持简单的透明背景,支持动态图,应用场景:网页中的动态图片 - webp 格式: 扩展名为
.webp,谷歌推出的一种格式,专门用来在网页中呈现图片,具备上述几种格式的全部优点,但兼容性不好,一旦使用务必解决兼容性问题. 应用场景:网页中的各种图片 - base64 格式: 一串特殊的文本,要通过浏览器打开,传统看图应用通常无法打开,原理是将图片进行了
base64编码,形成一串文本,直接使用 img 标签的src属性引入即可,并且不受文件位置的影响,由浏览器将base64解码后得到图片不用发请求. 应用场景:一些较小的图片,或者需要和网页一起加载的图片
2. 使用
示例
<img src="1.png" alt="这是个美女..." width="200" height="200" title="美女">
属性表
| 属性名 | 标识 | 描述信息 |
|---|---|---|
| src="./cat.jpg" | 必填 | 图片路径,有此路径会发送请求到对应地址取到资源进行加载 |
| alt="猫" | 选填 | 图片的描述信息,图片加载失败的提示信息 |
| title="一只胖橘猫" | 选填 | 鼠标悬浮提示信息 |
| width="300px" | 选填 | 设置当前图片的宽度,单位: 为像素px或百分比 |
| heigth="300px" | 选填 | 设置当前图片的高度,单位: 为像素px或百分比 |
5.5 a 超链接
1. 使用
示例
<a href="http://www.baidu.cpm">百度 </a>
属性表
| 属性名 | 标识 | 选项 | 描述 |
|---|---|---|---|
| href="" | 必填 | 无href属性:只显示普通文本;href="":刷新当前页面;href="http://www.baidu.com":跳转到百度官网;href="/xxx/xxx": 当前页签地址上url的拼接上href的值进行跳转href="#" :空链接,不刷新页面,回到顶部 |
需要跳转的URL,如果 href 里面地址是一个文件或者压缩包,会下载这个文件。如果是文本、图像、表格、音频、视频等会直接在浏览器呈现 |
| target="" | 选填 | _self 在当前页签打开 默认值 _blank新开页签打开 |
点击a标签后的页面的加载方式 |
| download | 选填 | download:下载时文件名是什么,下载的时候默认就是什么名,download="文件名",:下载的时候默认是download中写的文件名 |
强制浏览器触发下载 |
2. 锚点
<!-- 使用id做锚点 -->
<div id="top"></div> <!--所有标签都可以使用id值做锚点-->
<a id="top"></a>
<!-- 使用name做锚点 -->
<a name="top"></a> <!--方式二,只有a标签可以使用name值做锚点-->
<a href="#top">跳到指定标签</a> <!-- 点击这个标签时,则会直接跳到id=top/name=top这个标签的位置 -->
<a href="#">回到顶部</a>
<a href="../xxxx.html#atm">跳转到其他页面中的锚点</a>
3. 唤起制定应用
<a href="tel:10010">拨打电话给10010</a>
<a href="mailto:xxxxxx@qq.com">发送邮件给xxxxxx@qq.com</a>
<a href="sms:10086">发送短信给10086</a>
5.6 iframe
嵌入页面
示例
<iframe src="https://www.bilibili.com/" width="1670" height="880" frameborder="0"></iframe>
<!-- frameborder: 是否有边框 -->
<!-- 通过a标签的target来打开页面到指定的iframe标签中 -->
<a href="https://www.bilibili.com/" target="bilibili">点我看bilibli</a>
<br>
<iframe name="bilibili" width="300" height="300" frameborder="0"></iframe>
<!-- 通过form请求回来的页面放在iframe中 -->
<form action="https://search.bilibili.com/all" target="container">
<input type="text" name="keyword">
<button>提交</button>
</form>
<iframe name="container" width="300" height="300" frameborder="0"></iframe>
应用场景
利用iframe嵌入广告网页
6. 全局属性
id="app" // 给标签指定唯一标识,id不能重复
class="" // 给标签指定类名.通过css给标签设置样式,可以重复
style="" // 在标签中指定css样式
dir="" // 内容的方向
title="" // 鼠标悬浮时的提示信息
lang="" // 指定标签内容中的语言
autocomplete="off" // 当前表格不保留历史输入记录
oncontextmenu="return false" // 当前表格不能右键
onpaste="return false" // 当前表格不能ctrl+v
7. _meta 元信息
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 配置字符编码 -->
<meta charset="UTF-8">
<!-- 针对IE浏览器的兼容配置,如果用户用的是IE8及以上的浏览器,会以edge的模式更好的渲染整个页面 -->
<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="xx购物网成立于2003年,致力于打造国内优质的电商平台......">
<!-- 针对搜索引擎爬虫的配置 -->
<meta name="robots" content="index"> <!-- 允许搜索爬虫索引此页面 -->
<meta name="robots" content="noindex"> <!-- 要求搜索爬虫不索引此页面 -->
<meta name="robots" content="follow"> <!-- 允许搜索爬虫跟随此页面上的连接 -->
<meta name="robots" content="nofollow"> <!-- 要求搜索爬虫不跟随此页面上的连接 -->
<meta name="robots" content="all"> <!-- 与 index,follow等价 -->
<meta name="robots" content="none"> <!-- 与 noindex,nofollow等价 -->
<meta name="robots" content="noarchive"> <!-- 要求搜索引擎不缓存页面内容 -->
<meta name="robots" content="nocache"> <!-- noarchive的替代名称 -->
<!-- 版权信息 -->
<meta name="copyright" content="2023-2027©版权所有">
<!-- 配置网页自动刷新,10秒后跳转到百度 -->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
<!-- 配置网页自动刷新,10秒后刷新网页 -->
<meta http-equiv="refresh" content="10">
<title>Title</title>
</head>
<body>
</body>
</html>
python防脱发技巧
浙公网安备 33010602011771号