HTML5基础复习

1.HTML常用标签
<h></h>一共分为6级,为标题标签
<br />为换行标签 是一个单标签
<p>标签为段落标签 可以把大段文字分段 两个<p>标签间会有空隙隔开

1.1 文本格式化标签
在网页中,有时需要为文字设置粗体、斜体、下划线等效果,此时需要用到文本格式化标签,使文字以特殊形式显示
语义 标签
加粗 <strong>||<b>
倾斜 <em>||<i>
删除线 <del>||<s>
下划线 <ins>||<u>

1.2<div>&<span>标签
以上两个标签没有语义,他们都是盒子,用来装内容
ps:div标签独占一行,一行可以放多个span标签,二者都用来布局网页

1.3图像标签和路径
<img>标签用于定义HTML页面中的图像
规则:<img src=”/路径”/>
图像标签的属性和属性值:
属性 属性值 说明
src 路径 必须属性
alt 文本 替换文本,图片无法正常显示时显示文字
title 文本 提示文本,鼠标悬浮图像,显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度(实际开发中只需要设置高/宽,而宽/高则会自动等比例缩放)
border 像素 设置图像边框粗细

1.3.1路径
路径可分为:
1.相对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。简单来讲,就是图片相对于HTML页面的位置
相对路径分类 符号 说明
同一级路径 图像文件和html文件位于同一级
下一级路径 / 图像文件位于html文件下一级,如<img src=”images/baidu.gif”/>
上一级路径 ../ 图像文件位于html文件上一级 如<img src=”../baidu.gif”/>

ps:如果html文件在html文件夹中,img文件在img文件夹中,而两个文件夹同级,
则使用相对路径时,需要先向上一级查找到img文件夹,然后再在文件夹中找到img文件。
原理和以上相似。都是寻找相对于html文件本身的级。

2.绝对路径
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
例如:”C:\img.jpg”

1.4超链接标签
<a>标签用于定义一个超链接标签。
语法格式:<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像</a>
属性和作用:
属性 作用
href url目标地址,必须属性。
target 同于指定连接的打开方式,_blank为在新窗口打开。默认为_self
链接分类:
1.外部链接
如<a href=”https://www.doreou.cn” target=”_blank”>Doreou-杂货铺</a>
2.内部链接
网站内部页面之间的相互链接,直接链接内部页面名称即可。如:<a href=”example.html” target=”_blank”>example</a>
3.空链接
<a href=”#”></a>
4.下载链接
url链接的是文件,如<a href=”C:\\img.jpg”>点击下载</a>
5.网页元素的链接
点击网页元素即可实现页面跳转,如<a href=”https://www.doreou.cn”><img src=”a.jpg”/></a>
6.锚点链接
点击链接,可以快速定位到网页的某个位置
在链接文本的href属性中,设置属性值为#id的形式。如<a href=”#identity”></a>
找到目标位置标签,里面添加一个id属性=id.如<h3 id=”identity”>目标位置</h3>

1.5注释标签
<!– Content –> 快捷键->”ctrl+/”

1.6特殊字符
在HTML页面中,一些特殊的符号很难或者不方便使用,此时我们用下面的字符替代:
如:空格&nbsp; 小于号&lt; 大于号&gt; 等。

1.7表格标签
表格的作用:表格主要用于显示数据。
表格的基本语法:
<table>
<tr> 用于定义表格中的行,必须嵌套在table标签中
<td>单元格内文字,必须嵌套在tr标签中</td>
</tr>
</table>

1.7.1表头单元格标签
一般表头单元格位于表格的第一行或者第一列,表头单元格的文本内容加粗居中显示
<th>标签表示HTML表格的表头部分
<table>
<tr> 用于定义表格中的行,必须嵌套在table标签中
<thead>
<th>姓名</th>
</thead>
<tbody>
<td>单元格内文字,必须嵌套在tr标签中</td>
</tbody>
</tr>
</table>

1.7.2合并单元格
合并单元格的方式:
1.跨行合并:rowspan=”合并单元格的个数”
2.跨列合并:colspan=”合并单元格的个数”
合并单元格三步曲:
1.先痛定是跨行还是跨列合并
2.找到目际单元格.写上合并方式=合并的单元格数量 如:<td colspan=”2″></td>
3.删除多余的单元格

1.8 列表标签
1.8.1 无序列表
<ul>标签标识HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签转义
<ul>
<li>列表项1</li>
<li>2</li>
<li>3</li>
……
</ul>
无序列表各列表项无顺序,且<ul>中只能放<li>,<li>可以放任何标签。无序列表有自己的列表样式属性。

1.8.2 有序列表
有序列表即有排列顺序的列表。在HTML标签中,<ol>标签用于定义有序列表,列表排序以数字来显示。并且使用<li>标签来定义列表项。
<ol>
<li>列表项1</li>
<li>2</li>
<li>3</li>
……
</ol>

1.8.3 自定义列表
使用场景:常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
在HTML中,<dl>标签用于定义描述列表,该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系电话</dd>
</dl>

1.9 表单标签
在html中,一个完整的表单通常由表单域、表单控件和提示信息三部分构成。
1.9.1 表单域
表单域是一个包含表单元素的区域。
在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递。
<form>把范围内的表单元素信息提交给服务器。

<form action=”” method=”” name=””>
各种表单元素控件
</form>

action:用于指定接收并处理表单数据的服务器程序的url地址
method:用于设置表单数据的提交方式,取值为get/post
name:用于指定表单的名称,以区分同一页面中的多个表单域。

1.9.2 表单标签
1.9.2.1 <input>表单元素
<input>中,包含一个type属性,根据不同的type属性值,输入字段有很多用形式(可以是文本字段、复选框、掩码后的文本空间、单选按钮、按钮等)
<input type=”属性值”/>

属性值 描述
button 定义可点击按钮(多数情况下,用于通过javascript启动脚本)
checkbox 定义复选框。
file 定义输入宇段和”浏览”按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。

1.9.2.2 <label>标签
<label>标签未input元素定义标注(标签)
<label>标签用于绑定一个表单元素当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上用来增加用户体验.
<label for=”sex”>男</label>
<input type=”radio” name=”sex” id=”sex”/>
—-for与id对应

1.9.2.3 <select>标签
<select>标签即下拉列表。
<select>
<option>1</option>
<option>2</option>
<option selected=”selected”>3</option>
…….
</select>

1.9.2.3 <textarea>标签
当用户输入内容很多的情况下,可以使用<textarea>标签
<textarea>
文本内容
</textarea>

通过textarea标签可以轻松创建多行文本输入框
cols=”每行中字符数” rows=”显示的行数” 但在实际开发中不会这样使用,通常使用css控制

发表评论

关闭菜单