HTML基础——常用标签
文章目录
- 网页的基本结构
- 常用标签描述
- 文字和段落标签
- 特殊符号(加分号)
- 列表标签
-
- 无序列表
- 有序列表
- 定义列表
- 图像标签
- 超链接标签
-
- base标签
- 锚链接（也可叫书签）
- 电子邮件链接
- HTML表格
- 表单标签
-
- input标签
- label标签
- textarea控件（文本域）
- select下拉菜单
- from表单域
网页的基本结构
<html>
<head>
<meta charset="UTF-8">
<title>标题title>
head>
<body>
body>
html>
常用标签描述
声明文档类型，必须放在HTML文档的第一行，这个声明不是HTML标签
meta标签是告诉浏览器，我们的文档使用的是什么编码类型
指定html语言种类，en定义语言为英文，zh-CN为中文
<meta charset="UTF-8">是解决网页出现中文乱码问题
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>一样的，解决中文乱码<br/>
编码utf-8一般是显示简体中文，繁体中文，英文，日文，韩文都支持
GB2312支持简体中文
<html>html>是告诉浏览器在这个标签之间的内容就是html文件
<head>head>主要是存放网页头部的信息，head标签的所有内容不会在网页上展示
<body>body>部分是网页主体部分
<p>p>标签是段落标签
<span>span>用来布局，一行可以放多个span
<div>div>用来局部，一行只能放一个div
<hr />水平线
<br />换行
快捷键 ctrl+/
标题标签:<h1>h1>~<h6>h6>
align对齐属性值:left、right、center、justify(对行进行伸展，这样每行都可以有相等的长度)
是空格
预格式化文本标签<pre>pre>，在里面可以随意打空格和换行，所见即所得，但是比较少用，因为不好整体控制
文字和段落标签
文字斜体：<i>i>、<em>em>
加粗:<b>b>、<strong>strong>
删除线：<s>s>、<del>del>
下划线：<u>u>、<ins>ins>
下标：<sub>
上标：<sup>
特殊符号(加分号)
| 属性 | 显示结果 | 描述 |
|---|---|---|
| < | < | 小于号或显示标记 |
| > | > | 大于号或显示标记 |
| & | & | 和号 |
| ® | ® | 已注册商标 |
| © | © | 版权 |
| &trade | ™ | 商标 |
| Space | 不断行的空白 | |
| ¥ | ¥ | 人民币 |
| ° | ° | 摄氏度 |
| ± | ± | 正负号 |
| × | × | 乘号 |
| ÷ | ÷ | 除号 |
| ² | ² | 平方2（上标2） |
| ³ | ³ | 立方3（上标3） |
| & | &; |
列表标签
无序列表
<ul>
<li>列表项li>
<li>列表项li>
......
ul>
无序列表type属性值
| 值 | 描述 |
|---|---|
| disc | 圆点 |
| square | 正方形 |
| circle | 空心圆 |
有序列表
<ol>
<li>列表项li>
<li>列表项li>
......
ol>
有序列表type属性值
| 值 | 描述 |
|---|---|
| 1 | 数字1，2,… |
| a | 小写字母a，b,… |
| A | 大写字母A，B,… |
| i | 小写罗马数字i |
| I | 大写罗马数字I |
定义列表
<dl>
<dt>定义列表项dt>
<dd>列表项描述dd>
<dd>列表项描述dd>
<dt>定义列表项dt>
<dd>列表项描述dd>
......
dl>
<dd>标签内不能放<dt>，同理，<dt>标签内也不能放<dd>
<dt>和<dd>是同级标签
<dl><dt><dd>组合使用
注意：在真实的网页开发环境中，用ul和ol的地方，我们都需要把它默认的编号去掉，使用图片代替
图像标签
语法：<img src="" alt="" .../>
src内是图片的地址，分为相对地址和绝对地址
alt是图像的代替文字，比如当网速太慢、src属性中的错误、浏览器禁用图像
用户无法查看图像，alt属性可以代替图像显示在浏览器中的内容。
<img src="demo.gif" />
<img src="images/demo.jpg" />
<img src="../images/demo.gif" />
img属性：
| 属性 | 值 | 描述 |
|---|---|---|
| src(必写) | URL | 显示图像的URL |
| alt | 文本 | 图像替代文本 |
| height | 数值和百分比 | 图像的高 |
| width | 数值和百分比 | 图像的宽 |
| title | 文本 | 鼠标悬停时显示的内容 |
| border | 数字 | 设置图像边框的宽度 |
超链接标签
语法：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像a>
href:链接地址，可以是内部链接或外部链接。
想要链接效果，又确定不了链接的目标的时候，我们就可以先用空连接代替，空连接就是在href内写个#，即href="#"
超链接标签属性
| 属性 | 描述 |
|---|---|
| href | 链接地址 |
| target | 链接的目标窗口 _self、_blank、_top、_parent |
| title | 链接提示文字 |
| name | 链接命名 |
_self是一个默认值，也就是在当前窗口下打开新的一个页面
_blank是创建一个新的窗口去打开新的页面
_top、_parent和页面的框架结构相关
base标签
1、base可以设置整体链接的打开状态
2、base写到< head>之间
3、把所有连接都默认添加target="_black"
锚链接（也可叫书签）
定义锚（同一页面）
1、定义锚的位置
2、设置寻找锚的链接
<a href="#锚名1">目录1a>
<a href="#锚名2">目录2a>
<a href="#锚名3">目录3a>
<a href="..." name="锚名1">内容a>
xxxxxxxxx
xxxxxxxxxxxx
<a href="..." name="锚名2">内容a>
xxxxxxxxx
xxxxxxxxxxxx
<h1 id="锚名3">内容h1>
定义锚（不同页面）
网页1：<a href="网页名称#锚名">...a>
网页2：<a name="锚名">...a>
电子邮件链接
<a href="mailto:邮件地址">...a>
HTML表格
<table>表格
<tr>行
<td>单元格
基本语法与结构
<table>
<caption>...caption>
<tr>
<td>...td>
...
tr>
<tr>
<th>...th>
...
tr>
table>
带结构的表格
表格划分为三部分：表头、主体、脚注
thead：表格的头（放表格的表头）
tbody：表格的主体（放数据本体）
tfoot：表格的脚（放表格的脚注）
<table>
<caption>表格标题caption>
<thead>
<tr>
<th>表头th>
tr>
thead>
<tbody>
<tr>
<td>主体td>
tr>
tbody>
<tfoot>
<tr>
<td>脚注td>
tr>
tfoot>
table>
< table>表格属性
| 属性 | 值 | 描述 |
|---|---|---|
| width | 像素值 | 规定表格的宽度 |
| align | left、center、right | 表格相对周围元素的对齐方式 |
| border | 像素值 | 规定表格边框的宽度 |
| Bgcolor | rgb(x,x,x)、#xxxxxx、Colorname | 表格的背景颜色 |
| cellpadding | 像素值（默认为1像素） | 单元格内容与单元格边框的距离 |
| cellspacing | 像素值（默认为2像素） | 单元格之间的距离 |
| frame | 属性值 | 规定外侧边框的哪个部分是可见的 |
| rules | 属性值 | 规定内侧边框的哪个部分是可见的 |
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
合并单元格三部曲：
1、先确定跨行还是跨列
2、根据先上后下，先左后右的原则找到目标单元格，然后写上合并方式还有要合并的单元格数量比如< td colspan=“3”>< td>
3、删除多余的单元格
表单标签
input标签
语法：
<input type="属性值" value="你好"/>
| 属性 | 属性值 | 描述 |
|---|---|---|
| type（指定不同的控件类型） | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮（必须包含src属性） | |
| file | 文件域（可上传文件） | |
| name（用于区别不同的表单） | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input控件中的默认显示的文本 |
| size | 正整数 | input控件在页面中的显示宽度 |
| checked（单选或多选按钮一开始就被选中） | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
label标签
为input元素定义标注（标签）
作用：当我们鼠标点击label标签里面的文字时，光标会定位到指定的表单里面
绑定元素有2种方法
1、用label直接包括input表单
<label> 用户名： <input type="text" /> label>
2、通过for和id控制
<label for="nc"> 昵称： label>
<input type="text" id="nc" />
textarea控件（文本域）
语法：
cols=“每行中的字符数” rows="显示的行数 "这两个属性实际开发中不用
<textarea>文本内容textarea>
作用：通过textarea控件可以轻松地创建多行文本输入框
文本框和文本域的区别
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
|---|---|---|---|---|
| input type=“text” | 文本框 | 只能显示一行文本 | 单标签，通过value显示默认值 | 用户名、昵称、密码等 |
| textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
select下拉菜单
语法：
<select>
<option>选项1option>
<option>选项2option>
<option>选项3option>
···
select>
注：
<select>select>中至少包含一对<option>option>
option中定义selected="selected"时，当前项即为默认选中项
from表单域
收集的用户信息通过form表单域传递给服务器
目的：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器
语法：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
form>
常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | URL地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一页面中的多个表单 |