个人博客:https://www.vectormoon.net/
目录
标题标签
6个等级网页标题<h1>-<h6>
<h1>一级标题</h1>
标签语义:作为标题使用,重要性递减
段落和换行标签
段落标签
<p>段落标签</p>
标签语义:把html文段分割成若干段
换行标签
<br />
标签语义:强制换行
文本格式化标签
<strong>文本</strong>
<em>文本</em>
<del>文本</del>
<ins>文本</ins>
标签语义:突出重要性
div和span标签
<div>文本</div>
<span>文本</span>
标签语义:div为division的缩写,表示分割、分区;span为跨度、跨距
图像标签和路径
图像标签
<img src="URL" />
src是img标签的必要属性;img的其他属性为
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文字,图像不能显示时,显示文字 |
title | 文本 | 提示文字,鼠标放在图像上,显示文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
路径
相对路径,相对于html页面的相对位置
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 文件位于html文件同一级 | |
下一级路径 | / | 文件位于html文件下一级 |
上一级路径 | ../ | 文件位于html文件上一级 |
<img src="1.jpg" />
<img src="images/1.jpg" />
<img src="../1/jpg" />
绝对路径,目录位置或引用网络地址
超链接标签
语法格式
<a href="跳转目标" target="窗口弹出方式"> 文本、图像</a>
target默认值为_self,在原来的窗口打开;_blank是在新窗口打开
标签语义:从一个页面链接到另一个页面
链接分类
- 外部链接:
<a href="http://www.baidu.com">百度</a>
- 内部链接:网站内部页面之间的链接,直接链接内部页面名称;
<a href="index.html">首页</a>
- 空链接:暂时没有确定链接目标;
<a href="#">首页</a>
- 下载链接:href地址如果是一个文件或者压缩包,会下载该文件
- 网页元素链接:网页种可以加入各种元素
- 锚点链接:点击链接快速定位到页面某个位置;;链接标签设置
<a href="#one">1</a>
;目录位置标签设置<h3 id="one">111</h3>
注释和特殊字符
注释
快捷键:ctrl+/
特殊字符
特殊字符 | 描述 | 代码 |
---|---|---|
空格符 | | |
< | 小于 | < |
> | 大于 | > |
& | 和取 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘法 | × |
÷ | 除法 | ÷ |
² | 平方 | ² |
³ | 立方 | ³ |
表格标签
表格的主要作用
表格不是用来布局页面的,是用来展示数据的
表格的基本语法
<table>
<thead>
<tr>
<th>文本</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>文本</td>
...
</tr>
...
</tbody>
</table>
- table是用来定于表格的标签
- tr定义表格中行
- td定义表中单元格
- th是表头单元格标签,表头单元格的内容会加粗居中显示
- thead定义表格头部
- tbody定义表格主体
表格属性
属性名 | 属性值 | 描述 |
---|---|---|
align | left/center/right | 规定表格周围元素的对齐方式 |
border | 1/"" | 规定表格单元格是否有边框,默认为""无边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认为1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认为2像素 |
width | 像素值/百分比 | 规定表格的宽度 |
合并单元格
- 跨行合并:rowspan=“合并单元格的个数”;最上侧单元格为目标单元格
- 跨列合并:colspan=“合并单元格的个数”;最左侧单元格为目标单元格
<td colspan="2"> 文本</td>
<td rowspan="3"> 文本</td>
列表标签
无序标签
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
ul中只能嵌套li
有序标签
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
自定义标签
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
dl中只能包含dt和dd
dt和dd个数没有限制
表单标签
表单域
在 HTML 标签中, <form> 标签用于定义表单域,以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
常用属性
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一页面中的多个表单域 |
表单控件
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
input表单元素
<input>标签用于收集用户信息
<input type="属性值" />
- <input > 标签为单标签
- type 属性设置不同的属性值用来指定不同的控件类型
type属性
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和“浏览”按钮,供文件长传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段。该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮。重置按钮会清除表中的所有数据 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符 |
除type外,其他input属性
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中字符的最大长度 |
lable标签
<label> 标签为 input 元素定义标注(标签)
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.for和id一致
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
select表单元素
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
- 中至少包含一对 。
- 在 中定义 selected =“ selected " 时,当前项即为默认选中项。
textarea表单元素
<textarea rows="3" cols="20">
文本内容
</textarea>
- 通过 标签可以轻松地创建多行文本输入框。
- cols=“每行中的字符数” ,rows=“显示的行数”,我们在实际开发中不会使用,都是用 CSS 来改变大小。