一、常用标签
标签名称 标签符号封闭备注
1.标题 <h1>~<h6>双一共六级,依次减小
2.段落 <p>双将文字分成不同段落,会根据窗口自动换行,段落与段落之间有比较大的缝隙
3.换行 <br>或<br/>单标签强制换行,不会有很大缝隙
4.文本格式化
加粗 <strong>或<b>双推荐使用<strong> 语义更强烈
倾斜 <em>或<i>双推荐使用<em> 语义更强烈
删除线 <del>或<s>双推荐使用<del> 语义更强烈
下划线 <ins>或<u>双推荐使用<ins> 语义更强烈
5.无语义标签
<div> 双就是个盒子,用来装内容的(一行只能放一个div)
<span> 双
6.图像 <img>单标签<img src="图像url" />
7.超链接 <a>双<a href="跳转目标" target="目标窗口的弹出方式"文本或图像</a>
8.特殊字符
空格、大于号、小于号等
9.表格
表格 <table>双
行 <tr>双必须嵌套在<table></table>中
列 <td>双(table data)必须嵌套在<tr></tr>中
列 <th>双(table header)表头,会居中加粗,必须嵌套在<tr></tr>中
10.表格结构
表格头部 <thead>双头部区域, 增强语义,逻辑清晰
表格主体 <tbody>双主体区域
11.列表
无序列表 <ul>、<li>双重点,ul内部包含很多小li,且只能放li,li里面可放任何标签
有序列表 <ol>、<li>双了解即可
自定义列表 <dl>``<dt>``<dd>双重点,<dt>名词1<dd>名词1解释,注意dt和dd是兄弟关系
12.表单 <form>双用于收集用户信息
表单元素
输入 <input>单标签
下拉 <select>双内部用option
文本域 <textarea>双
13.定义标注 <label>双标注标签,常用在表单中,用于绑定一个表单元素,点击label内部文本时,就会聚焦到对应的表单元素上,用来增加用户体验
6. 图像标签的其他属性属性 属性值
说明
src 图片路径
必须属性,绝对路径(网络中http://)/相对路径
alt 文本
替换文本。图像不能显示的文字
title 文本
提示文本。鼠标放到图像上,显示的文字
width 像素无设置图像的宽度,注意宽度和高度修改一个即可,另一个会等比例缩放
height 像素无设置图像的高度
border 像素无设置图像的边框粗细
7. 超链接标签属性 属性值
说明
href url地址
必须属性
target _self/_blank
_self为默认值,_blank为在新窗口中打开方式
链接分类: - 外部链接: <a target="_blank">腾讯</a>腾讯
- 内部链接:<a href="html_2.html", target="_blank">小熊</a>小熊
- 空链接:<a href="#">空</a>空
- 下载链接:<a href="xx.zip">.exe或.zip文件</a>.exe或.zip文件
- 网页元素链接: 在网页中改的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接
<a target="_blank"><img src="xx.png" /></a> - 锚点链接:点击链接快速定位到页面中的某个位置
- <a href="#two"> 第二集</a> 第二集
- <h3 id="two">第二集介绍</h3>第二集介绍
8. 特殊字符记住空格,大于号,小于号即可
file:///C:/Users/XiaoJuan/Documents/My%20Knowledge/temp/5557c1fa-bf69-42e2-be67-1b026107857b/128/index_files/575c6a92-3152-40c5-9063-0f8b5e530d29.jpg
9. 表格表格属性 (实际开发并不常用,后面通过CSS来设置) 属性名属性值单位描述
alainleft/center/right
表格相对周围元素的对齐方式
border数值无
cellpadding像素值无单元边缘与内容之间的空白,默认1像素
cellspacing像素值
单元格间的空白,默认2像素
width像素值或百分比
规定表格的宽度
height像素值或百分比
规定表格的高度
合并单元格- 合并单元格方式:
- 跨行合并:rowspan="3"
- 跨列合并:colspan="3"
步骤:
- 找到目标单元格,写上合并方式 = 合并单元格数量。比如<td colspan="2"></td>
- 删除多余的单元格
10. 列表- list-style: none; 去掉无序列表前面的小圆点
|