初识HTML
一、HTML简介
1、什么是HTML
- HTML指的是超文本标记语言: HyperText Markup Language
- HTML是一种用来描述网页的一种标记语言
- HTML包含了HTML标签和文本内容
- HTML文档也被叫做web页面
2、HTML标签
- HTML标签是由<> 包围成的关键词
- HTML标签分为单标签和双标签
- 双标签中第一个是开始标签（也被称为开放标签），第二个标签是结束标签（也被称为结束标签）
3、<!DOCTYPE> 声明
声明有助于浏览器中正确显示网页，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。另：doctype 声明是不区分大小写的
HTML5声明：<!DOCTYPE HTML>
4、HTML页面的组成部分
<!DOCTYPE html>
//声明为HTML5文件
<html>
//完整的HTML页面的开放标签
<head>
<meta charset="utf-8">//定义网页编码格式为UTF-8
<title>HTML页面</title>
</head>
//头部元素
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>
//可见的页面内容
</html>
//完整的HTML页面的结束标签
二、HTML标签
1、头部标签
-
**<head>**元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息
-
<title>标签定义了浏览器工具栏的标题，在HTML文档中这个是必需的
<title>文档标题</title> -
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
<base href="http://www.runoob.com/images/" target="_blank"> -
**<link>**标签定义了文档与外部资源之间的关系
-
<style> 标签定义了HTML文档的样式文件引用地址，也可以直接添加样式来渲染 HTML 文档
<head> <style type="text/css"> body { background-color:yellow; } p { color:blue } </style> </head> -
<meta>标签描述了一些基本数据，如指定网页的描述，关键词，文件的最后修改时间，作者等其他元数据
为搜索引擎定义关键词:
<meta name="keywords" content="关键词">定义网页作者:
<meta name="author" content="作者名">每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30"> -
<script>标签用于加载脚本文件
2、基础文本标签
(1)标题
HTML 标题是通过<h1> - <h6> 标签来定义的
<h1>这是一个标题</h1>
这是一个标题
<h2>这也是一个标题</h2>
这也是一个标题
(2)段落
HTML 段落是通过标签<p> 来定义的
<p>这是一个段落</p>
这是一个段落
(3)换行
<br>
需要注意的是：这是一个单标签
(4)分割线
<hr>这是分割线
(5)注释
<!--这是注释-->
(6)加粗文本
<b>加粗文本</b>或<strong>加粗文本</strong>
加粗文本
(7)放大和缩小文本
<big>这个文本字体放大</big>
<small>这个文本字体缩小</small>
这个文本字体放大
这个文本字体缩小
(8)斜体文本
<em>这个文本是斜体的</em>或<i>这个文本是斜体的</i>
这个文本是斜体的
(9)上标和下标
这个文本包含<sub>下标</sub>
这个文本包含<sup>上标</sup>
这个文本包含下标
这个文本包含上标
3、超链接标签
(1)使用<a>完成超链接的设置
-
HTML使用标签**<a>来设置超链接**
-
在标签<a>中使用href属性来描述超链接所对应的地址，这个地址可以是一个网址，也可以是本地的一个文件位置，在一个超链接标签中，href属性必须存在
<a href="www.baidu.com">这是一个访问百度的超链接</a> -
在标签<a>中使用target属性来指定超链接如何在浏览器中打开
对应的值有： _self (在当前的标签页中打开) (这是不设置target属性时的默认值)
<a href="www.baidu.com" target="_self">这是一个在当前页面打开的超链接</a> _blank (在一个新的标签页中打开)
<a href="www.baidu.com" target="_blank">这是一个在新标签页打开的超链接</a> _parent (在当前框架中的父框架打开) (非常用)
_top (非常用)
-
在标签<a>中使用title属性来展示鼠标悬停在超链接上时所展现的信息
<a href="www.baidu.com" title="百度">这是一个鼠标悬停显示百度的超链接</a> -
在标签<a>中使用daownload属性来下载文件
<a href="文件名" download>下载文件</a>
(2)使用<a>实现锚点
-
除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接
-
在利用<a>实现锚点时，要先在目标位置使用**<a name=“__”>的格式定义一个标记，接着在需要超链接的位置使用<a href=“#name”>**的格式跳转到目标位置
<a name="111"></a> <a href="#111"></a>
4、图像标签
-
在 HTML 中，使用标签**<img>** 定义图像
-
在标签<img> 中使用src属性（source）来指定你选取图像的url地址
<img src="https://www.runoob.com/images/pulpit.jpg" alt="some_text" >如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg
-
在标签<img> 中使用alt属性来为图像定义一串预备的可替换的文本，即当图片无法加载时所显示出来的一段话
<img src="boat.gif" alt="Big Boat">特别要注意的是，src属性和alt属性为<img> 的必须属性，不可缺少！
-
在标签<img> 中使用align属性来规定如何根据周围的文本来排列图像
align中常用的值有：
top botton middle left right
-
在标签<img> 中也可以使用title属性来展示鼠标悬停在图片上时所展现的信息
<img src="boat.gif" alt="Big Boat" title="Big Boat"> -
在标签<img> 中使用height属性和width属性来设置图像的高度和宽度
设置时的单位默认为像素（px），也可以使用%
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> -
另外的，<a>和<img>两个标签可以嵌套使用，达成为图片创设超链接的效果
<a href="https://www.example.com"> <img decoding="async" src="example.jpg" alt="示例图片"> </a>
5、区块标签
(1)<div>标签
-
<div> 标签是块级元素，通常与css配合使用，用于布局
-
<div> 标签可以把文档分割成独立的、不同的、部分，它可以用作严格的组织工具，并且不使用任何格式与其关联
<div>content</div> -
在<div>标签中，通常使用align属性来规定内容的对齐方式，常用值有：
left（向左对齐） right（向右对齐） center（居中对齐）
(2)<span>标签
- <span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹
- <span>标签被用来组合文档中的行内元素，<span>标签没有常用的格式表现。当对它应用样式时，他才会产生视觉上的变化
- 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性
(3)嵌套关系
- <div> 可以容纳其他块级元素和行内元素，包括其他的 <div> 和 <span> 元素
- <span> 通常被用来包裹文本或其他行内元素，比如用来设置特定文本的样式
总之，<div> 用于创建页面结构和布局，而 <span> 用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用
6、表格标签
(1)无序列表
-
无序列表由**<ul>标签和<li>标签**实现
<ul> <li>这是一个无序列表</li> <li>好好学习</li> <li>天天向上</li> </ul>- 这是一个无序列表
- 好好学习
- 天天向上
-
同时使用type属性来规定列表的项目符号类型，也可以使用样式取代
常见的值有： disc（实心圆）（默认）
circle（空心圆）
square（方块）
<ul> <li type="disc">这是一个实心圆列表</li> <li type="circle">这是一个空心圆列表</li> <li type="square">这是一个方块列表</li> </ul>- 这是一个实心圆列表
- 这是一个空心圆列表
- 这是一个方块列表
(2)有序列表
-
有序列表由**<ol>标签和<li>标签**实现
<ol> <li>这是一个有序列表</li> <li>好好学习</li> <li>天天向上</li> </ol>- 这是一个有序列表
- 好好学习
- 天天向上
-
同时使用type属性来规定列表的项目符号类型，也可以使用样式取代
常见的值有：1 数字序号
a 小写字母
A 大写字母
i 小写罗马数字
I 大写罗马数字
<ol> <li type="1">这是一个数字序号列表</li> <li type="a">这是一个小写字母列表</li> <li type="A">这是一个大写字母列表</li> <li type="i">这是一个小写罗马字母列表</li> <li type="I">这是一个大写罗马字母列表</li> </ol>- 这是一个数字序号列表
- 这是一个小写字母列表
- 这是一个大写字母列表
- 这是一个小写罗马字母列表
- 这是一个大写罗马字母列表
7、表格标签
- 在HTML中，使用**标签<table>**定义表格
- <tr>标签定义表格的行，<tr>标签包含一个或多个<th>或<td>标签
- <td>标签定义HTML表格中的标准单元格
- <th>标签定义表格内的表头单元格
简单来说，table相当于一个表格的外框，tr为行，td为一个一个的单元格，th为有标题作用的单元格，th内部的文本通常会呈现为居中的粗体文本，而td中的文本通常是左对齐的普通文本
<table>
<thead>
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
<td>19</td>
<td>女</td>
</tr>
</tbody>
</table>
| 班级 | 姓名 | 年龄 | 性别 |
|---|---|---|---|
| 1 | 张三 | 18 | 男 |
| 2 | 王五 | 19 | 女 |
-
在标签<table>中使用align属性来描述表格的对齐方式，常用的值有：
left（向左对齐） right（向右对齐） center（居中对齐）
-
在标签<table>中使用border属性来规定表格边框的宽度，单位为px
-
在标签<table>中使用width属性来规定表格的宽度，单位为px或%（如果是百分比，参考的是上一级元素的宽度，如果上一级元素未设置，则参考屏幕宽度）
-
在标签<table>中使用hight属性来规定表格的高度
<table border="1" width="500px" align="center" height="300px"></table> -
在标签<tr>中使用align属性来描述表格行的内容的对齐方式，常用的值有：
left（向左对齐） right（向右对齐） center（居中对齐）
-
在标签<tr>中使用bgcolor属性来规定表格行的背景颜色
-
在标签<tr>中使用valign属性来规定表格行中内容的垂直对齐方式
特别的，bgcolor属性和valign属性可以用css样式来取代
<tr align="center" valign="top" bgcolor="antiquewhile"></tr> -
在标签<td>中使用colspan属性和rowspan属性分别规定单元格横跨的列数和行数（合并单元格）
<h3>
纵向合并 rowspan
</h3>
<table>
<thead>
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>赵四</td>
<td>19</td>
<td>女</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
<td>女</td>
</tr>
</tbody>
</table>
纵向合并 rowspan
| 班级 | 姓名 | 年龄 | 性别 |
|---|---|---|---|
| 1 | 张三 | 18 | 男 |
| 赵四 | 19 | 女 | |
| 3 | 王五 | 20 | 女 |
<h3>
横向合并 colspan
</h3>
<table>
<thead>
<tr>
<th colspan="2">班级+姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
<td>19</td>
<td>女</td>
</tr>
</tbody>
</table>
横向合并 colspan
| 班级+姓名 | 年龄 | 性别 | |
|---|---|---|---|
| 1 | 张三 | 18 | 男 |
| 2 | 王五 | 19 | 女 |
8、表单标签
(1)<form>标签
-
<form>标签用于为用户输入创建HTML表单
-
HTML表单能够包含input元素，比如文本段、复选框、单选框、提交按钮等
-
HTML表单用于向服务器传输数据
-
在<form>标签中使用action属性规定当提交表单时向何处发送表单数据
-
在<form>标签中使用method属性规定用于发送form-date的HTTP方法，常用的方法为get和post
-
在<form>标签中使用name属性规定表单的名称
-
在<form>标签中使用target属性规定在何处打开新的网页，常用的值有：
_blank（在空白标签页中打开） _self（在当前页面打开）
<form action="www.baidu.com" method="get" name="unname" target="_blank"></form>
(2)<input>标签
-
<input>标签用于搜集用户信息
-
在<input>标签中使用disabled属性来禁用input元素
-
在<input>标签中使用readonly属性规定输入字段为只读
<input type="text" value="zhangsan" readonly="readonly"/> -
在<input>标签中使用maxlength属性规定输入字段中字符的最大长度
<input type="text" value="zhangsan" maxlength="5"/> -
在<input>标签中使用value属性规定input元素的值
-
在<input>标签中使用type属性规定input元素的类型，如按钮、单选框、复选框等，常用的值有：
text 文本框
<input type="text" value="1"/>password 密码框
<input type="password" value="2"/>radio 单选框 必须要将单选框命名在同一组内才能实现单选！！！
<input type="radio" value="man" name="sex"/> 男 <input type="radio" value="woman" name="sex"/> 女checkbox 复选框 同一组的复选框也必须命名在同一组！！！
<input type="checkbox" value="1" name="unname"/>1 <input type="checkbox" value="1" name="unname"/>2 <input type="checkbox" value="1" name="unname"/>3file 文件域
<input type="file"/>hidden 隐藏域
<input type="hidden" value="3"/>button 普通按钮
<input type="button" value="4"/>submit 提交按钮
<input type="submit" value="5"/>PS:button和submit的区别!)
reset 重置按钮
<input type="reset" value="6"/>date 日期框
<input type="date" />
(3)<button>标签
- <button> 标签定义一个按钮
- 在<button> 元素内部可以放置内容，比如文本或图像，这是该元素与使用 <input> 元素创建的按钮之间的不同之处
- 在<button>标签中必须使用type属性规定button元素的类型，常用值有button reset submit
- 在<button>标签中使用disabled属性来禁用button元素
- 在<button>标签中使用value属性规定button元素的值
- 在<button>标签中使用formtarget属性规定在何处打开新页面，常用值有_blank _self
(4)<textarea>标签
-
<textarea>标签定义多行文本输入控件，文本区可容纳无限数量的文本
-
在<textarea>标签中使用cols属性来规定文本区内的可见宽度
<textarea cols="30"></textarea> -
在<textarea>标签中使用rows属性来规定文本区的可见行数
<textarea rows="10"></textarea>
(5)<label>标签
- <label>标签为input元素定义标注（标记）
- <label>标签的for属性应当与相关元素的id属性相同，此时点击<label>标签会自动为元素聚焦
9、下拉框标签
-
<select>标签用于定义下拉列表 <option>标签用于添加下拉框中的选项
北京 上海 深圳 广州<select name="city"> <option>北京</option> <option>上海</option> <option>深圳</option> <option>广州</option> </select> -
在<select>标签中使用disabled属性禁用下拉框
<select name="city" disabled="disabled"></select> -
在<select>标签中使用multiple属性规定下拉框可选择多个选项
<select name="city" multiple="multiple"></select> -
在<select>标签中使用size属性规定下拉列表中可见项的数目
<select name="city" size="2"></select> -
在<option>标签中使用value属性规定提交给服务器的选项值
如果设置了value属性值，则提交的是value的值；
如果没有设置value属性值，则提交的option双标签中的文本值
-
在<option>标签中使用disabled属性禁用下拉框某一个选项
<option disabled="disabled">上海</option>
- 在<option>标签中使用selected属性规定默认选中项
<option selected="selected">北京</option>
广州
<select name="city">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
</select>
* 在\<select>标签中使用**disabled属性**禁用下拉框
~~~html
<select name="city" disabled="disabled"></select>
-
在<select>标签中使用multiple属性规定下拉框可选择多个选项
<select name="city" multiple="multiple"></select> -
在<select>标签中使用size属性规定下拉列表中可见项的数目
<select name="city" size="2"></select> -
在<option>标签中使用value属性规定提交给服务器的选项值
如果设置了value属性值，则提交的是value的值；
如果没有设置value属性值，则提交的option双标签中的文本值
-
在<option>标签中使用disabled属性禁用下拉框某一个选项
<option disabled="disabled">上海</option>
- 在<option>标签中使用selected属性规定默认选中项
<option selected="selected">北京</option>
扫一扫
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
