目录
1.标签---单标签和双标签
1.1单标签
---<hr/>水平分割线、<input/>表单元素、<br/>换行标签等
1.2双标签
---<h1></h1>标题标签、<html></html>HTML标签等
2.基本结构标签
2.1HTML标签
---<html></html>
2.2文档头部标签
---<head></head>
2.3文档标题标签
---<title></title>
2.4文档的主题标签
---<body></body>
3.常用的标题标签<hn></hn> (n∈[1,6])
<h1>标题一共六级可以选择</h1>
<h2>文字加粗并且一行显示</h2>
<h3>从h1到h6文字大小递减</h3>
<h4>随着文字大小粗细变化</h4>
<h5>语法书写要规范</h5>
<h6>具体效果刷新就可以看见了</h6>
4.段落标签<p></p>
<p>用于定义段落,可以将网页划分位若干个段落,文本在一个段落中会根据浏览器的窗口大小自动换行,段落与段落之间有空隙</p>
5.换行标签<br/>
换行标签是单标签,是用于强制换行的,只是简单的开启新的一行,没有行间距,段落之间会插入一些垂直的间距
6.文本格式化标签
6.1粗体
---<strong></strong>---更加推荐使用<strong>标签
---<b></b>
6.2倾斜
---<em></em>---推荐使用
---<i></i>
6.3删除线
---<del></del>---推荐使用
---<s></s>
6.4下划线
---<ins></ins>---推荐使用
---<u></u>
7.div和span标签
<div>标签用来布局,一行只能放一个<div>---大盒子
<span>标签用来布局,一行可以放多个<span>---小盒子
8.图片标签<img />
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像不能显示的时候显示的文字 |
title | 文本 | 提示文本,鼠标悬停在图片上方的时候出现的文字 |
width | 像素 | 图片的宽度 |
height | 像素 | 图片的高度 |
border | 边框 | 图片的边框样式 |
采用键值对的方式进行书写,可以写多个属性,属性与属性之间用空格分开
9.路径=相对路径和绝对路径
以引用文件的绝对位置为参考基础,而建立的目录路径就是相对路径
9.1相对路径分类
相对路径分类 | 符号 | 说明 |
同一级路径 | 图像文件位于HTML文件同一级 | |
下一级路径 | / | 图像文件位于HTML文件下一级 |
上一级路径 | ./ | 图像文件位于HTML文件上一级 |
9.2特点:
相对路径分类是图像相对于HTML文件的位置;
绝对路径是指目录下的绝对位置,通常是从盘符开始的;
相对路径是从这个项目所在的这个文件夹出发,去寻找目标文件
10.链接标签<a>
10.1链接标签的属性
<a href="跳转目标(也可以是#号(代表是空链接,会自动跳转到页面最顶端),也可以使用JavaScript:;(代表什么也不执行,点击的时候不会产生任何反应),还可以使用' '(空字符串代表什么都不执行但是会刷新页面))" target="目标窗口的打开方式(_self默认当前窗口或者_blank新窗口)"></a>
10.2链接分类
- 外部链接:利用href="跳转的路径"直接跳转到外部链接页面
- 内部链接:利用href="跳转的路径"直接跳转到当前项目文件夹内中的目标链接页面
- 空链接:href="#"表示没有确定的跳转目标
- 下载链接:href="文件/压缩包",会自动下载此链接指向的内容
- 网页元素链接:可以直接给当前网页中的元素(图像/表格/音频等)添加超链接
- 锚点链接:通过href="#名字"的方式跳转到相关id名字所在的地方(起到一个快速定位的作用)
11.注释
<!-- 注释内容-->
12.特殊字符(常用)
符号 | 说明 |
> | > |
< | < |
|
13.表格
13.1表格的基本代码书写格式
<table>
<thead>
<!--这里是表头部分-->
<tr>
<td>表头单元格,可以按需添加多个</td>
...
</tr>
</thead>
<tbody>
<!--这里是表格主题部分-->
<tr>
<td>表格主体的单元格,可以按需添加多个</td>
...
</tr>
<tr>
<td>表格主体的单元格,可以按需添加多个</td>
...
</tr>
...
</tbody>
</table>
13.2表格的属性
属性名 | 属性值 | 说明 |
---|---|---|
align | left center right | 规定表格相对周围元素的对齐方式 |
border | 如1(输入必须为整数)或者' '无边框 | 规定表格的边框样式 |
cellpadding | 像素值 | 规定单元格边沿与内容之间的边距 |
cellspacing | 像素值 | 规定单元格与单元格之间的边距 |
width | 像素值 | 规定表格的宽度 |
colspan | 列数值 | 跨列合并(最左侧为目标单元格) |
rowspan | 行数值 | 跨行合并(最上侧为目标单元格) |
14.列表
14.1无序列表<ul>
<ul>
<li>无序列表的列表项,无序列表中只能存放li标签,可以有若干个li标签</li>
...
</ul>
14.2有序列表<ol>
<ol>
<li>有序列表的列表项,无序列表中只能存放li标签,可以有若干个li标签</li>
...
</ol>
14.3自定义列表<dl>
<dl>
<dt>名词1</dt>
<dd>名词解释</dd>
...
</\dl>
15.表单标签
15.1表单基本书写格式
<form>
<label>xxx</label>
<input />
...
</form>
15.2表单属性
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并且处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单的提交方式,其取值是get/post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单 |
15.3表单元素(表单控件)
15.3.1input表单控件的type属性的属性值如下所示
type的属性值 | 描述 |
---|---|
button | 可点击按钮 |
checkbox | 复选框 |
file | 上传文件 |
hidden | 隐藏 |
image | 图像(可以直接用img标签) |
password | 密码框 |
text | 文本框 |
radio | 单选按钮 |
reset | 重置按钮 |
submit | 提交按钮 |
15.3.2input控件的其他属性
属性 | 属性值 | 描述 |
---|---|---|
maxlength | 正整数 | 最大长度 |
name | 用户自定义名称 | 定义input的名称 |
value | 用户自定义value值 | 规定input的值 |
checked | checked | 选项框处于选中状态 |
注意:name和value值主要是针对后台人员使用的;
多选框实现多选一则需要name值与单选框相同时;
checked主要针对的是单选框radio和复选框checkbox
15.4<label>标签
定义:为input元素添加标签(可以4扩大input元素的交互范围,同相关元素的id值相同时)
<form>
<label for="同id名字一样扩大交互范围">xxx</label>
<input type="" name="" id="" />
...
</form>
15.5下拉标签<select>---节约页面空间
15.5.1基本书写格式
<select>
<option>选项1</option>
...
</select>
<select>标签中至少包含一对<option>标签,在<option>中定义selected="selected"时,则当前项即为默认选中项
15.6文本域标签<textarea>
<textarea rows="行数" cols="显示的字符数">
xxxx文本书写区域
</textarea>
16.HTML5语义标签
<header> | 页眉 |
<nav> | 导航 |
<main> | 主体 |
<section> | 节 |
<aside> | 侧栏 |
<footer> | 页脚 |