文章目录
HTML 简介
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
<html> - HTML 标签通常是成对出现的，比如
<b>和</b> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
转义字符：
在网页中编写多个空格默认情况自动会被浏览器解析为一个空格
空格
>大于号
<小于号
"
©版权符号
在网页中点击鼠标右键，然后点击最下面的‘检查’，查看代码在内存中的样子。
网页的基本结构
<!-- 文档声明，声明当前网页版本 -->
<!DOCTYPE html>
<!-- html的根标签（元素），网页中的所有内容都要写在根元素里面 -->
<html>
<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>
<!-- meta标签用来设置网页的元数据，这里通过meta标签来设置网页的字符集，避免乱码问题 -->
<mate charset='utf-8'>
<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页中的内容 -->
<title>网页的基本结构</title>
</head>
<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
<body>
<!-- h1是网页的一级标题 -->
<h1>网页的大标题 </h1>
</body>
</html>
meta 标签
<head>
<meta charset="UTF-8">
<!--
meta主要用于设置网页中的一些元数据，元数据不是给用户看的
charset 指定字符集
name 指定的数据的名称
keywords 表示网站的关键字
author 作者
description 用于指定网站的描述，描述会出现在搜索引擎的搜索结果中
content 指定的数据的内容
title 标签的内容会作为搜索结果的超链接上的文字显示
-->
<meta name='keywords' content="HTML5,前端,css3">
<meta name='author' content="鲁班七号">
<meta name="description" content="这是一个学习HTML的网站">
<!--
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
将页面重定向到另一个网站，content中的数字3指的是3秒后跳转到后面输入的 URL
-->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
<title>Document</title>
</head>
文本
<body>
<!-- 标题和段落
标题：h1 ~ h6 块元素
段落：p 块元素
在页面中独占一行的元素称为块元素（block element）
-->
<h1>一级标题</h1>
<p>我是一个段落</p>
<h6>六级标题</h6>
<!-- 上标 sup 下标 sub -->
<p>z = x<sup>2</sup> + y<sub>1</sub></p>
<!-- 强调 strong 斜体 i -->
<p><strong>强调加粗</strong> 和 <i>斜体</i>></p>
<!-- 长引用 blockquote 块元素-->
鲁迅说：
<blockquote>这句话我从来都没有说过！</blockquote>后面的内容跑到下面一行了
<p>换行<br/>使用br，分割线<hr>使用hr</p>
</body>
列表
<body>
<!--
列表
html中共有三种
1.有序列表 （ordered list）- ol / li
2.无序列表 （unordered list）- ul / li
3.定义列表 （definition list）- dl / dt / dd
ol ul dl 是表的类型，列表项写在 li 里面
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页哪里是标题</dd>
<dd>结构表示网页的结构，结构用来规定网页哪里是标题</dd>
</dl>
<ul>
<li>HTML 列表种类
<ol>
<li>有序表</li>
<li>无序表</li>
<li>自定义</li>
</ol>
</li>
<li>HTML 元素
<ol>
<li>块元素</li>
<li>行内元素</li>
</ol>
</li>
</ul>
</body>
超链接
| a 标签的属性 | 描述 |
|---|---|
| href | 跳转到指定的url地址；href=’#‘跳转到顶部；href=’#idName’跳转到指定id位置 |
| target | 打开连接的方式；默认值’_self’；在新窗口打开用’_blank’ |
<body>
<!--
超链接
使用 a 标签来定义超链接
属性：
href 指定跳转的目标路径
值可以是一个外部网站的地址
也可以是一个内部页面的地址
target，用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
超链接也是一个行内元素，在a标签中可以嵌套除他自身外的任何元素
超链接的其他用法：href=“#某个标签的id值” 进行本页面位置跳转（如顶部跳到底部）
href="#" 后面不加id值，直接跳转到顶部
-->
<a href="#bottom">去底部</a>
<a href="https://www.baidu.com" target="_blank">连接外部网站</a>
<br><br>
<a href="本地某个HTML文件的地址">连接内部页面</a>
<p id="bottom"></p>
<a href="#">去顶部</a>
</body>
图像 img
| img的属性 | 描述 |
|---|---|
| src | 图片路径 |
| alt | 图片显示不出来时显示的文本 |
| title | 鼠标移动到图片上时会显示出来的文本 |
| width | 图片宽度 |
| height | 图片高度 |
| border | 边框，使用像素单位 |
<body>
<!--
图片标签用于向当前页面中引入一个外部图片
使用 img 标签来引入外部图片，img 标签是一个自结束标签
img 这种元素属于替换元素（介于块和行内元素之间，具有两种元素的特点）
属性：
src 指定的外部图片路径，可以是本地图片，也可以是网络图片的 URL
alt 图片描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎查找到
title 提示文本，鼠标移动到图片上文本会显示出来
width 图片的宽度
height 图片的高度
-宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
一般在pc端，不建议修改图片的大小
大图改小，浪费内存，小图放大，图片失真
但是在移动端，经常使用对图片进行缩放（大图缩小）
图片格式：
jpeg（jpg）
-支持的颜色丰富，不支持透明效果，不支持动图
-一般用来显示照片
gif
-支持的颜色较少，支持简单透明，支持动图
-颜色单一的图片、动图
png
-支持的颜色丰富，支持复杂透明，不支持动图
-颜色丰富，复杂透明图片（专为网页而生）
webp
-这种格式时谷歌新推出的专门用来表示网页中的图片的一中格式
-它具备其它图片格式的所有优点，而且文件特别小
-缺点，兼容性不好
base64
-将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片
-一般都是一些需要和网页一起加载的图片才会使用base64
-->
<p>
<img width="600" src="URL.jpg" alt="彭于晏9块腹肌">
<img src="http://xxx/xxx.jpg" alt='性感在线'>
</p>
</body>
音频
<body>
<!-- 音频标签 audio 默认情况下不允许用户自己控制播放停止
属性：controls 是否允许用户控制播放，该属性没有值
autoplay 音频文件是否自动播放，该属性没有值
loop 是否循环播放播放
muted 静音
视频标签 video 用法和 audio 一样
可以通过 width height 设置宽高
<audio ...> 标签中间部分可以输入浏览器无法播放时的提示信息 </audio>
-->
<audio src="./MP4/G.E.M.邓紫棋%20-%20倒数.flac" controls ></audio>
<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件 -->
<audio controls>
对不起，您的浏览器不支持播放此音频，请升级浏览器
<source src="./MP4/G.E.M.邓紫棋 - 光年之外.flac">
<!-- 在部分浏览器无法播放时，使用embed -->
<embed src="./MP4/Aimer%20-%20糸.ncm" type="audio/mp3">
</audio>
</body>
表格 table
表格主要用于显示、展示数据。
| table内含标签 | 描述 |
|---|---|
| thead | 定义表格的头部区域，thead内部必须拥有tr标签 |
| tbody | 定义表格的主体区域 |
| th | 表头，里面的内容会居中加粗，th也属于单元格 |
| tr | 行，包裹th和td |
| td | 单元格 |
合并单元格：
- 确定使用跨行合并（rowspan），还是跨列合并（colspan）；
- 找到目标单元格，写上‘合并方式=合并的单元格数量’，如 rowspan=“2”；
- 删除多余的单元格。
<table border="1px">
<thead>
<tr>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>10</td>
<td>30</td>
</tr>
<tr>
<td>5</td>
<td>20</td>
<td>100</td>
</tr>
<tr>
<td colspan="2">合计</td>
// 这里删除了一个单元格
<td>130</td>
</tr>
</tbody>
内嵌窗口 iframe
<body>
<!--
内嵌窗口 iframe 标签，用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
width height 指定内联框架的宽高
frameborder 指定内联框架的边框，只有0和1两种值
-->
<iframe src="https://www.qq.com"
width='500' height='600' frameborder="0"></iframe>
</body>
表单 form
1. 表单域 form
| form常用属性 | 属性值 | 作用 |
|---|---|---|
| action | url 地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get / post | 设置表单数据提交方式 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
2. 表单元素 input、select、textarea
input元素有以下属性：
- type 属性：指定input类型，可选值有：
- button：定义可点击按钮，多用于JavaScript启动脚本。
- checkbox：定义复选框。
- file：定义输入字段和浏览按钮，供上传文件。
- hidden：定义隐藏的输入字段。
- image：定义图像形式的提交按钮。
- password：定义密码字段。
- radio：定义单选按钮。
- reset：定义重置按钮。
- submit：定义提交按钮。提交按钮会把表单数据发送到服务器上。
- name 属性：定义表单元素的名字。
- value 属性：规定 input 元素的值
- checked 属性：主要供radio和checkbox使用，表示默认选中。
- maxlength 属性：规定输入字符的最大长度。主要供text和password使用。
- size 属性：指定表单元素的初始宽度。单位为像素。
- placeholder 属性：提示信息，用户输入内容后自动消失。
- required 属性：规定文本框填写内容不能为空，否则不允许用户提交表单
- pattern 属性：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
注意：
- name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。
- 多个 radio 必须具有相同的 name 值 才能实现多选一；checkbox 也需要有相同的 name 值。
<form action="#">
name: <input type="text" name='username' placeholder='Please input your name' size="50"><br>
sex: male <input type="radio" name='sex' value="man" checked>
female <input type="radio" name="sex" value="woman"><br>
hobbies: game <input type="checkbox" name="hobby" value="game">
singing <input type="checkbox" name="hobby" value="singing">
dancing <input type="checkbox" name="hobby" value="dancing"><br>
push files: <input type="file"><br>
<!-- 普通按钮 button 需要搭配 js 使用 -->
<input type="button" value="获取短信验证"><br>
<input type="submit" value="提交信息">
<input type="reset" value="重新填写">
</form>
select 下拉表单元素：
- selected 属性：默认选中指定项。
<form action="#">
city:
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select>
</form>
textarea 文本域元素：
- rols：一行可以输入多少个字符
- rows：行数
- 这两个参数不直接设置，而是通过css设置宽高。
<form action="#">
评论区：
<textarea name="comment" cols="30" rows="10"></textarea>
</form>
3. label 标签
- < label> 标签为 input 元素定义标注（标记）
- label 元素不会向用户呈现任何特殊效果。若在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
- for属性可把 label 绑定到另外一个元素，< label> 标签的 for 属性应当与相关元素的 id 属性相同。
<form>
<input type="radio" name="fruit" value="apple" id="666">
<label for="666"> Apple </label>
</form>
<!-- 在浏览器中点击文本“Apple”会自动聚焦到前面的单选框 -->
<!--上面一种是“显示关联”，下面的是“隐式关联”-->
<label for="book">
<input type="checkbox" id="book">三国演义
</label>
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
