h1~h6
表示一级到六级标签
<h1>一级标题</h1>
<h6>六级标题</h6>
p
表示段落。默认情况,在网页上,页面的内容不会按照我们写的代码进行换行,回车会被渲染成一个空格
<p>这是一段文字</p>
a
表示超链接。未被访问的超链接默认为 蓝色;已经被访问的超链接默认为 紫色
href
必填属性。超链接跳转路径的设置,可以是网址 url(),也可以是相对路径
target
_blank 页面打开时在新的窗口中打开,如果不设置,则在当前窗口打开
title
当鼠标放在超链接上时,显示一段提示文字
img
image的缩写,img是一个单标签,功能是在网页上展示一张图片
src
表示图片的源,在src可以设置图片地址。可以是绝对路径,也可以是相对路径
绝对路径:可以使用电脑中的文件的路径 C:\
也可以使用网络路径http://
相对路径:表示基于当前文件去找到对应的资源文件的路径。一般情况下,我们在做静态页面时,页面中的背景图,图标等不常更改的资源。一般存放在项目中,做 路径引入。./ 代表当前目录; ../ 代表上一级目录
alt
当图片加载失败时显示对应的alt中的文本内容
title
当鼠标放在图片上时,显示一段提示文字
width 宽 height 高
数字
百分比(占父元素百分比的效果)
宽高只要设置一边,就会等比缩放,如果都设置,除非都是等比例缩放,否者会变形
列表
有序列表
在列表项前默认有数字序号
<ol>
<li></li>
<li></li>
</ol>
无序列表
在列表项前默认有项目符号
<ul>
<li></li>
<li></li>
</ul>
定义列表
分标题和列表项
<dl>
<dt>标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
无序列表在网页中应用的最多;一般使用列表时会清除对应的点;<ul>和<ol>中尽量只放<li>,其它的可以嵌套在<li>中
文字的样式属性 (强调属性)
em i
让文字倾斜,em 表示强调文字,i 表示文字斜体。在项目中,很多人把 i 作为图标展示的标签。
一般网页,会直接把 i 标签的倾斜样式给去除,变成正常字体
b strong
让文字加粗,stong表示强调,b表示文字加粗。
一般会把 b 和 strong 通过css设置为普通样式
br
可以在网页中实现换行,就像是一个回车。
如果我们在项目开发中,主动频繁使用 br,说明写的有问题
hr
分割线,在网页上实现一条横线,也很少使用
经常性的使用,说明我们写的有问题
表格
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
在写表格时,thead,tbody,tfoot可以省略不写。
如果我们想要生成 n 行 m 列的表格:table>tr*n>td*m
跨行
如果我们想让某一个单元格,跨多行,给这个td添加 rowspan 可以实现跨行操作
跨列
如果我们想让某一个单元格,跨多列,给这个td添加 colspan 可以实现跨列操作
跨行跨列后单元格会被挤出来,删掉多出来的对应行的单元格即可
form
表单标签未来不太常用,因为form已经逐渐被ajax替代了。但是我们前期写页面时,还是要使用
我们应该把所有的表单内元素包裹在一个form中(非必须)
input
input有很多种形态,需要通过type属性进行控制
<form> <input type="text"> </form>
-
type
text 文本输入框,最常用,让用户在文本框中输入我们想要获取的内容(默认宽度为20个字符)
password 密码,让文本以密文显示
radio 单选,多个选项只选其一时使用
checkbox 多选,当有多个选项需要选择时
submit 提交按钮,自动显示提交两个字,可以通过value修改
reset 重置按钮,自定显示重置两个字,可以通过value修改
button 普通按钮,没有功能,需要通过value配置显示文本
file 文件上传,可以进行本地文件的上传功能
- value
一般情况下,value用来获取对应用户输入的值。
- name
如果我们要使用表单提交,则所有的表单内元素都需要加name属性
当name用在单选和多选,可以 多个单选 或者 多个多选 用同一个name属性,这样表示它们是一个组合
- placeholder
占位提示,在我们没有输入内容时,显示一段文本
button
普通按钮,如果把button放在表单里,则button自动会有提交功能
select > option
下拉选择框,需要用select包裹多个option
<select>
<option>选项1</option>
<option>选项2</option>
</select>
textarea
文本域,用于输入多行文本时使用
label
label需要配合表单中元素使用
可以对表单项进行描述:当我们点击label时,可以让对应绑定的表单内元素获取焦点
如果我们想要实现,点击label能让对应的表单元素获取焦点,则需要配置 id 和 for
1、给 input 添加 id 属性
2、给 label 添加 for 属性(属性名和刚才的id一致)
select 配合 label 只能实现获取焦点的效果,不能打开下拉框
表单内元素的状态
blur 失去焦点
focus 获取焦点
checked 给radio和checkbox添加,用于设置对应选项的选中状态,添加则表示选中
selected 给option添加,用于设置默认被选中的选项
readonly 只读,添加到输入框,无法修改内容,只能查看
disabled 添加到元素上,则对应元素禁用,样式变灰
- form 中 type 可定义的元素 (了解即可)
color 定义拾色器。
date 定义 date 控件(包括年、月、日,不包括时间)。
datetime 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
datetime-local 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
email 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮,供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
month 定义 month 和 year 控件(不带时区)。
number 定义用于输入数字的字段。
range 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
search 定义用于输入搜索字符串的文本字段。
tel 定义用于输入电话号码的字段。
time 定义用于输入时间的控件(不带时区)。
url 定义用于输入 URL 的字段。
week 定义 week 和 year 控件(不带时区)。
div span
div 是一个没有语义的块元素
宽度占百分百,哪怕后面还有空余空间,后面的元素也会另起一行。多个div在一起,纵向排列
块元素可以设置宽高(哪怕设置了宽高,占的位置也是百分百)
span 是一个没有语义的行内元素
宽度被内容撑开,内容多宽span就多宽。多个span在一起,横向排列
行内元素不能设置宽高
div 和 span本身没有任何的基础样式
块元素 block :div h1-h6 p ul li ol dl dt dd table button form...
行内元素 inline:span em i strong br b...
行内块元素 inline-block:img input...
元素之间的状态可以任意转换