HTML常用标签
1.标题标签:“<h1> </h1>”
表示字体加粗,并且每个标题标签括中的文字都显示占取一行,随着h后面的数字增大,标题也就越来越小。
2.段落标签:“<p></p>”
表示标签内部的内容是以段落的形式呈现的。
3.换行标签:“<br />”
表示前后文本强制换行。目前后面的/
不写同样可以表示换行。
4.文本格式化标签:
字体加粗:“<strong></strong>”
或者“<b></b>”
字体倾斜:“<em></em>”
或者“<i></i>”
字体加删除线:“<del></del>”
或者“<s></s>”
字体加下划线:“<ins></ins>”
或者“<u></u>”
5.<div>
和<span>
标签都是用来布局的,并没有语义,就是一个盒子,不过它们还是有区别的,<div>
内的文本内容独占一行,而一行可以有多个<span>
6. 图像标签:<img />
:图像标签是一个单标签,但是它有很多的属性来丰富图像的内容,同样的后面的/
符号也可以不写。要想使图像更好的显示出来,我们介绍以下属性:
(1) src(必须属性):该属性后面接图像的路径以及图像的名称使其可以在网页显示出来。
(2) alt:该属性是当图片加载不出来的时候,会显示相关信息
(3) title:该属性提示文本,即鼠标放在图片上会显示文字。
(4) width:该属性用来给图片设置宽度
(5) height:该属性用来给图像设置高度
(6) border:该属性用来给图像设置边框
属性与属性之间需要由空格隔开
7.超链接标签:格式:"<a href=" " target=" ">文本信息</a>"
href为必须属性,里面填写网站的url
target表示网页的跳转方式:
默认值为_self表示当前窗口打开新页面,_blank表示新窗口打开新页面
链接分类:
外部链接:href中需要加 “http://” ,就是一般需要网络显示的网站地址。
内部链接:与调用连接的网页处于同一根目录下,直接在href中填写HTML文件名
空链接:当建立网站时没有做好后续页面时,可以给href中赋值#表示空连接。
下载链接:如果href中地址是一个文件或者压缩包则会下载这个群文件
网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接:当我们点击链接时,会快速定位到页面中的某位置。
格式要求:
在href属性中设置#名字的形式,如<a href="#one">第一集</a>
接着我们需要在跳转到的位置接收它,在目标位置我们需要设置id属性=名字
如<h1 id=“one”>第一集</h1>
注释和特殊字符
注释标签的格式:<!--注释语句-->
,注释的快捷键:Ctrl+/
常见的特殊字符:
空格符: 
小于号<:<
大于号>:>
表格标签
用来显示、展示数据的,使数据显示起来更加的规整,可读性更加好,条理性更佳。
大致格式如下:
<table>
<tr><tb>文本信息1</tb> <tb>文本信息2</tb></tr>
</table>
其中table标签表示创建一个表格,tr标签表示创建行,嵌套其中的tb标签表示在该行创建单元格。
表头单元格标签:
一般放在表格的第一行或者第一列,且其中的文本内容加粗居中显示。其标签用<th>文本内容</th>
来书写,想到于替换掉td标签来加强显示功能。
表格结构标签:
为了使代码的可读性更强,我们通常会给表格划分为两个部分,头部和身体。
我们使用<thead>头部文本</thead>
和<tbody>身体标签</tbody>
,其中包含着tr、td、th等标签。
合并单元格:
跨行合并:rowspan = “合并单元格的个数” ,最上侧为目标单元格
跨列合并:colspan = “合并单元格的个数” ,最左侧为目标单元格
格式:<td rowspan = "2"></td>
注:合并单元格后需要删除多余的单元格
列表标签
列表标签分为三大类,分别为无序列表、有序列表和自定义列表,列表最大的特点:整齐,规范
无序列表:
<ul>
标签表示HTML页面中的无序列表,其中的<li></li>
来存放列表项。各个列表项之间没有顺序之分,<ul>
标签中只能嵌套<li>
标签,但是<li>
标签可以存放其他标签。
格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
注:去点网页中的小圆点,可以在CSS中这样设置。
li {list-style: none;}
有序列表:
<ol>
标签表示HTML页面中的有序列表,其中的<li></li>
来存放列表项。各个列表项有顺序之分,<ol>
标签中只能嵌套<li>
标签,但是<li>
标签可以存放其他标签。格式与无序列表相同。同时有序列表会自动标号。
自定义列表:
<dl>
标签表示定义列表,<dt>
标签定义名字,<dd>
标签定义名字解释。同样的,<dl>
标签中只能包含<dt>
和<dd>
标签。
格式如下:
<dl>
<dt>名字</dt>
<dd>名字解释</dd>
</dl>
表单标签
在网页中,一个完整的表单通常由表单域、表单控件和提示信息三部分组成。
表单域:表单域是一个含有表单元素的区域。
通常使用<form>
标签来定义表单域,该标签会将范围内的表单元素信息提交给服务器。
使用格式如下:
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
action属性:接收和处理表单元素的服务器的url地址。
metho属性:设置表单数据的提交方式,其值可取为get或post。
name属性:指定表单的名称
表单控件:
我们熟知的表单元素有input输入表单元素、select下拉表单元素和textarea文本域元素。
<input>
标签:用于收集用户信息,常见的有账号、密码输入框。注:其为单标签。
格式如下:<input type="属性值" />
type的属性值有很多种,例如:
当账户输入时,取"text";当密码输入时,取"password"。
单选按钮,取"radio";多选按钮,取"checkbox"。
提交按钮,取"submit";重置按钮,取"reset";上传文件按钮,取"file"。
注:name时表单元素的名字,单选按钮只有都同时定义相同的name,才能实现出多选一的效果。
input标签除了type属性外,还具有name,value属性值。这些值的设定主要是便于后台人员使用。在文本框中我们想要打开页面就有提示文字,就可以使用value赋值。
input标签还有checked属性,该属性是表示该元素在首次加载的情况下就被选中了。
<label>
标签:
label标签用于绑定一个表单元素,当点击label标签内的文本时,浏览器会自动定到对应的表单元素上面去,增加了用户体验。
语法格式:
<label for="nan">男</label>
<input type = "radio" name = "sex" id="nan">
注:label标签中的for属性需要与相关元素的id属性相同。
select下拉表单:
为节约页面成本,我们可以使用<select>
标签来定义下拉列表。
语法格式如下:
<select>
<option>选项1</option>
<option>选项2</option>
</select>
注:select必须包含一个option标签。在option中定义selected = "selected"表示当前项默认选中。
textarea文本域:
为了满足用户提交大量的文本信息,我们可以通过文本域标签来实现多行文本的输入。多用于用户评论或者反馈。
语法格式:
<textarea>文本内容</textarea>