文章目录
HTML常用的标签
1.标题标签
<h1>-<h6>
1.加了标题的文字会变的加粗,字号也会依次变大
2.一个标题独占一行
2.段落和换行标签
<p> 我是段落标签</p>
1.文本在一个段落中会根据浏览器窗口的大小自动换行
<br/> 换行标签
1.单标签
2.<br/>标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距
3.文本格式化标签
语义 | 标签 |
---|---|
加粗 | 或者 |
倾斜 | 或者 |
删除线 | |
下划线 | 或者 |
4.div 和 span
<div>大盒子</div>
1.<div>标签用来布局,但是现在一行只能放一个div
<span>小盒子</span>
1.<span>标签用来布局,一行可以多个<span>
5.图像标签和路径
<img src="图像url">
1.src是<img>标签的必须属性,他用于 指定图像文件的路径和文件名
1.图像标签的其他属性
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图形不能显示的文字 |
title | 文本 | 提示文本。鼠标放到图像上,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
2.图像标签属性注意点
- 图像标签可以拥有多个属性,必须写在标签名的后面
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均已空格分开
- 属性采取键值对的格式,即key='value’的格式,属性=“属性值”
3.路径之相对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图像文件位于HTML文件同一级 | |
下一级路径 | / | 图像文件位于HTML文件下一级 |
上一级路径 | …/ | 图像文件位于HTML文件上一级 |
绝对路径:是指目录下的据对位置,直接到达目标位置,通常从盘符开始的路径
6.超链接标签
- 外部链接:例如 百度
- 内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可
- 空链接:如果当时没有确定链接目标时,百度
- 下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件
- 网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接
- 锚点链接:点我们点击链接,可以快速定位到页面中的某个位置
- 在链接文本的href属性中,设置属性值为**#名称**的形式。百度
- 找到目标位置标签,里面添加一个id属性=刚才的名称
表格列表表单标签
1.表格标签
1.1表格的基本用法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
- table是用于定义表格的标签
- tr标签用于定义表格中的行 必须嵌套在table标签中
- td用于定义表格中的单元格,必须嵌套在tr标签中
- 字母td指表格数据 (table data ) 即数据单元格的内容
1.2表头单元格的标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示.
标签表示 HTML 表格的表头部分(table head 的缩写)<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
1.3表格的属性
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或者"" | 规定表格单元是否拥有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
1.4合并单元格
合并单元格的方式:
-
跨行合并 :rowspan=‘合并单元格个数’
-
跨列合并:colspan=“合并单元格个数”
2.列表标签
列表分为三大类:无序列表,有序列表和定义列表
2.1无序列表
ul标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用li标签定义
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
-
无序列表的各个列表项之间没有顺序级别之分,是并列的
-
ul中只能嵌套li ,直接在ul标签中输入其他标签或者文字的做法是不被允许的
-
li 与li 之间相当于是一个容器,可以容纳所有元素
-
无序列表会带有自己的样式属性,但实际使用时,我们会使用css来设置
2.2有序列表
在 HTML 标签中,
- 标签用于定义有序列表,列表排序以数字来显示,并且使用
- 标签来定义列表项。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
- ol 中只能嵌套li ,直接在ol标签中输入其他标签或者文字的做法是不被允许的
- li 之间相当于一个容器,可以容纳所有元素
2.3自定义列表
在html标签中,
-
标签用于定义描述列表(或定义列表),该标签会与
(定义项目/名字)和
- (描述每一个项目/名字)一起使用。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
-
dl 里面只能包含 dt 和 dd
-
和
- 个数没有限制,经常是一个
对应多个- 。
3.表单标签
3.1表单的组成
在HTML中,一个完整的表单通常有 表单域、表单控件 和***提示信息*** 3个部分
3.2表单域
表单域 是一个包含表单元素的区域
在 HTML 标签中, 标签用于定义表单域,以实现用户信息的收集和传递
form 会把它的范围内的表单元素信息提交给服务器。
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | URL地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或者post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
3.3input表单标签
在 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type="属性值"> input为单标签
- type属性设置不同的属性值来指定不同的控件类型
type属性的属性值及描述
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和"浏览",供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段。该字段中的字段被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮。重置按钮会清楚表单中的所有数据 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可以在其中输入文本。默认宽度为20个字符 |
3.3.1 input表单元素
除了type以外,input标签还有其他很多属性
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符最大长度 |
- name和value是每个表单元素都有的属性值,主要给后台人员使用
- name表单元素的名字,要求 单选按钮和复选框要有相同的name值
- checked属性主要针对于单选按钮和复选框 ,主要作用一打开页面就可以默认选中某个表单元素
- maxlength 是用户可以在表单元素输入的最大的字符数
3.4label标签
label 标签为input元素定义标签
label标签用于绑定一个表单元素,当点击 labe标签内的文本时,浏览器就会自动将焦点转到或者选择对应的表单元素上,用来增加用户体验
语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
0核心: label 标签的for属性应当与相关元素的id属性相同
3.5 select 表单元素
在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用select标签控件定义 下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
1.<select>中至少包含一对<option>
2.在<option> 中定义 selected =“ selected " 时,当前项即为默认选中项。