HTML基础知识
认知
五大浏览器
名称 | 内核 |
---|---|
IE、Edge | Trident |
Opera(欧朋) | 最初是Presto,后来是Webkit,现在是Blink |
Safari(苹果) | Webkit |
Firefox(火狐) | Gecko |
Chrome(谷歌) | 之前是Webkit,现在是Blink |
定义
HTML
(HyperText Markup Language)是用来描述网页的一种超文本标记语言。浏览器不会显示标签,而是使用标签来解释页面的内容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- 声明为HTML5文档 --> <!DOCTYPE html> <!-- html是页面根元素,且定义页面语言类型 --> <html lang="zh-CN"> <!-- head包含了文档的元数据 --> <head> <!-- 定义网页编码格式 --> <meta charset="UTF-8"> <!-- 描述网页标题内容 --> <title>html基础学习</title> </head> <!-- body包含了页面的课件内容 --> <body> <!-- 定义一个超链接 --> <a href="https://bysjb.cn">这是一个链接</a> </body> </html> |
标签
HTML
标记标签通常被称为HTML
标签(HTML tag)。分为双标签和蛋标签。
元素
HTML
元素指的是从开始标签到结束标签的所有代码。
1 |
<p>Hello World</p> |
上面代码中,<p>
表示开始标签(start tag),</p>
表示结束标签(end tag)。<p>Hello World</p>
内容整体则表示HTMl
元素。
属性
属性为HTML
元素提供附加信息。属性名建议使用小写,且使用双引号包含。
1 |
<a href="https://bysjb.cn">这是一个链接</a> |
上面代码中,a
链接使用了href
属性,用于指定链接跳转的地址。
排版标签
标题
通过<h1> - <h6>
等标签进行定义的。
1 2 3 4 5 6 7 |
<h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <h6>Hello World</h6> <h7>Hello World</h7> |
搜索引擎使用标题为网页的结构和内容编制索引,所以不能乱用标题标签。浏览器会自动地在标题的前后添加空行。
段落
使用<p></p>
标签表示。
1 |
<p>这是一个段落</p> |
浏览器会自动在段落的前后添加空行。
文本格式化
不强调
1 2 3 4 5 |
<!-- 加粗、倾斜、下划线、删除线 --> <b>加粗文字1</b> <i>倾斜文字1</i> <u>下划线文字1</u> <s>删除下文字1</s> |
强调
1 2 3 4 5 |
<!-- 加粗、倾斜、下划线、删除线 --> <strong>加粗文字1</strong> <em>倾斜文字1</em> <ins>下划线文字1</ins> <del>删除下文字1</del> |
换行
使用<br />
进行换行
分割线
使用<hr />
进行横线分割
媒体标签
图片
使用<img />
标签表示。img
是一个单标签,作用是显示一张图片。
属性名 | 作用 |
---|---|
src | 图片的路径位置 |
alt | 替换文本,图片不显示时显示的文字 |
title | 提示文本,鼠标悬浮在图片上显示的文字 |
width/height | 设置图片的宽度/高度,后面主要使用css进行修饰 |
1 |
<img src="../../static/img/1.png" alt="错误时显示" width="300" title="这是一张图片"> |
音频
使用<audio></audio>
标签表示。audio
是一个音频标签,作用是播放音频。
属性名 | 作用 |
---|---|
src | 文件路径 |
controls | 显示播放控件 |
autoplay | 自动播放 |
loop | 循环播放 |
1 |
<audio src="../../static/media/audio.mp3" controls loop></audio> |
视频
使用<video></video>
标签表示。audio
是一个视频标签,作用是播放视频。
属性名 | 作用 |
---|---|
src | 文件路径 |
controls | 显示播放控件 |
autoplay | 自动播放 |
loop | 循环播放 |
1 |
<video src="../../static/media/video.mov" controls loop width="300"></video> |
超链接
定义一个超链接,可用于从一个页面跳转到另一个页面。使用<a href="链接地址">链接文本</a>
表示。
1 |
<a href="https://www.baidu.com">百度搜索</a> |
上面代码中,“百度搜索”表示链接文本,链接文本不一定是文本, 可以是图像或者其他HTML元素;https://www.baidu.com
表示链接地址,点击链接文本后则会跳转到这个链接地址。
属性名 | 作用 |
---|---|
href | 跳转的链接地址 |
target | 控制页面打开的形式 |
_blank 新窗口打开 |
|
_self 本窗口打开(默认) |
锚点的使用实例
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- 创建一个名为img的锚点 --> <a href="#img">跳转图片</a> <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <h6>Hello World</h6> <h7>Hello World</h7> <p>这是一个段落</p> <img src="../images/1.png" alt="" id="img"> <a href="https://www.baidu.com" name="img">百度搜索</a> |
上面代码中,首先创建了一个名为img
的锚点,底部两个代码则是定义了锚点的跳转位置。当img
图片未添加id="img"
属性时,点击锚点会跳转到设置name="img"
的a
链接处,否则会跳转到img
图片。锚点跳转到其他标签,只需要设置对应名称的id
属性即可。
列表标签
以行的方式整齐的展示数据
无序列表
使用<ul><li></li></ul>
表示。
ul
中li
标签每行默认有一个小圆点
- 每一项是没有顺序的
ul
标签中只能有li
标签li
标签中可以有其他任意标签
1 2 3 4 5 6 7 8 9 |
<ul> <p>测试</p> <li>无序列表1</li> <li> <p>测试无序列表</p> </li> <li>无序列表2</li> <li>无序列表3</li> </ul> |
有序列表
使用<ol><li></li></ol>
表示。
ol
中每一项前面有默认的序号
- 每一项是有顺序的
ol
标签中只能放li
标签li
标签中可以放其他任意标签
1 2 3 4 5 |
<ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> |
自定义列表
使用<dl><dd></dd></dl>
表示。
dl
整体包裹,dt
是小标题,dd
是每一项
dl
中只能放dt
和dd
dt
和dd
可以放任意标签
1 2 3 4 5 6 7 |
<dl> <dt> <p>自定义列表1</p> </dt> <dd>自定义列表2</dd> <dd>自定义列表3</dd> </dl> |
表格标签
使用<table></table>
标签表示。以表格整齐的形式展示数据。
基本标签
table
整体tr
行td
块
属性
border
边框width
宽度height
高度
其他标签
caption
表格的说明文字th
替换td
标签,表格一列的标题- 结构标签 包裹
tr
标签,描述表格的结构thead
tbody
tfoot
合并单元格
上下合并保留上边,左右合并保留左边,删除其他
rowspan
合并行colspan
合并列
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<table border width="300" height="300"> <caption>表格标签</caption> <thead> <tr> <th>这是一个单元格</th> <th>这是一个单元格</th> <th>这是一个单元格</th> </tr> </thead> <tbody> <tr> <td rowspan="2">这是一个单元格2</td> <td colspan="2">这是一个单元格2</td> <!-- <td>这是一个单元格2</td> --> </tr> <tr> <!-- <td>这是一个单元4</td> --> <td>这是一个单元4</td> <td>这是一个单元4</td> </tr> </tbody> <tfoot> <tr> <td>这是一个单元格3</td> <td>这是一个单元格3</td> <td>这是一个单元格3</td> </tr> </tfoot> </table> |
表单标签
使用<form></form>
标签标识。收集用户数据,如登陆页、注册页等 。
input标签
type 属性值不同,显示不同的类型
类型 | 描述 |
---|---|
text | 文本框 |
name 提交后台数据标识符 | |
value 用户输入的数据,若设置则为默认值 | |
placholder 占位符 | |
password | 密码框 |
name 提交后台数据标识符 | |
value 用户输入的数据,若设置则为默认值 | |
placholder 占位符 | |
radio | 定义单选按钮 |
name 提交后台数据标识符,相同name属性值的单选框为一组,一组中只能同时有一个被选中 | |
value 用户选择的数据 | |
checked 默认选中,一组只能设置一个 | |
checkbox | 定义复选框,允许多选 |
name 提交后台数据标识符 | |
value 用户选择的数据 | |
checked 默认选中 | |
file | 定义普通按钮 |
name 提交后台数据标识符 | |
multiple 多文件选择 | |
表单按钮 | 需要配合form标签一起使用,将form标签包裹在最外层(value 设置按钮文字) |
submit 提交数据 | |
reset 让表单恢复默认值 | |
button 普通按钮 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- 1.1 文本框 --> <input type="text" value="tom" name="name" placeholder="请填入姓名"> <br> <!-- 1.2 密码框 --> <input type="password" value="hello" name="pwd" placeholder="请填入密码"> <br> <!-- 1.3 单选框 --> <input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman" checked>女 <br> <!-- 1.4 多选框 --> <input type="checkbox" name="hobby" value="read" checked>看书 <input type="checkbox" name="hobby" value="travel">旅游 <input type="checkbox" name="hobby" value="tv" checked>追剧 <br> <!-- 1.5 文件选择框 --> <input type="file" name="file" multiple> <br> <!-- 1.6 表单按钮 --> <form action=""> <input type="text"> <input type="submit"> <input type="reset"> <button>点击</button> </form> |
表单属性
属性 | 描述 |
---|---|
action | 规定提交表单时将表单数据发送到何处 |
target | 规定提交表单后在何处显示,默认为_self(在当前窗口) |
method | 规定提交表单时要使用的HTTP方法 |
name | 规定表单提交的名称 |
1 2 3 4 5 6 |
<form action="/" method="get" target="_blank"> 姓名 <input type="text" name="name"><br /> 性别 <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女<br> <input type="submit" value="提交"> </form> |
一个可以点击的按钮
属性名 | 作用 |
---|---|
submit | 提交数据 |
reset | 让表单恢复默认值 |
button | 普通按钮 |
1 2 3 4 5 6 |
<form action=""> <input type="text" name="name" value="tom" placeholder="请填写姓名"> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">提交2</button> </form> |
下拉菜单
使用<select><option></option></select>
表示。select
下拉选择框,option
为每个选择项。
name
提交后台数据标识符value
用户选择的数据selected
默认选择
1 2 3 4 |
<select name="province"> <option value="jiangsu">江苏省</option> <option value="zhejiang" selected>浙江省</option> </select> |
文本域标签
使用<textarea></textarea>
表示,用于输入大量文字。
1 |
<textarea name="text" id="" cols="30" rows="10" placeholder="请输入文字"></textarea> |
label标签
使用<label></label>
表示,用于绑定表单和文本。用法如下:
- 直接使用
label
标签把文本和表单标签包裹起来,但是label
标签不能有for
属性 - 使用
label
标签将文本和表单标签包裹后,在表单标签上添加id
属性,并且在label
标签的for
属性设置id
属性值
1 2 3 4 5 6 7 8 9 10 11 |
<label> <input type="radio" name="sex" value="man" id="">男 </label> <br> <label for="read"> <input type="checkbox" name="hobby" id="read">读书 </label> <label for="travel"> <input type="checkbox" name="hobby" id="travel">旅游 </label> |
语义化标签
div | span |
---|---|
块状标签 | 行内标签 |
独占一行 | 一行可以显示多个 |
宽度默认占满一行,高度默认由内容撑开 | 宽度和高度默认都由内容撑开 |
字符实体
常见的字符实体
名称 | 作用 |
---|---|
& nbsp; |
空格 |
& gt; |
大于号 |
& lt; |
小于号 |
这些信息可能会帮助到你: 外卖红包天天领,下单享返钱奖励!
原创文章,作者:seabert,如若转载,请注明出处:https://bysjb.cn/html.html