HTML重要标签
1.标题标签
HTML 提供了 6 个等级的网页标题,即<h1> - <h6> 。
具体实现:
<h1> 我是一级标题 </h1>
特点:
1.加了标题的文字会变的加粗,字号也会依次变大。
2. 一个标题独占一行。
<h1>标题一共六级选,</h1>
//常用于网站名称或logo(搜索时优先级非常高,不可随意使用)
<h2>文字加粗一行显。</h2>
//用于文章大标题或板块名称
<h3>由大到小依次减,</h3>
//用于文章小标题或板块栏目名称
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后,</h5>
<h6>具体效果刷新见。</h6>
2.段落标签
<p>标签:
用于定义段落,它可以将整个网页分为若干个段落。
具体实现:
<p> 我是一个段落标签 </p>
特点:
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。
3.换行标签
在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签 <br />。
具体实现:
<br />
特点:
1. <br /> 是个单标签。
2. <br /> 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
4.文本格式化标签:
在网页中,有时需要为文字设置粗体、斜体 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示。
<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>
5.div和span标签
<div> 和 <span> 是没有语义的,它们就是一个盒子,用来装内容的。
具体实现:
<div> 这是头部 </div>
~双标签,独行显示
~无高度,但可被内容撑开
~不设置宽度的前提下,默认撑开父级
<span> 今日价格 </span>
特点:
1. <div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子
2. <span> 标签用来布局,一行上可以多个 <span>。小盒子
6.图片标签:
在 HTML 标签中,<img> 标签用于定义 HTML 页面中的图像。
具体实现:
<img src="图像路径" alt="图像不显示时的替换文字" title="鼠标停留时的显示信息"/>
图片路径
路径:
分为相对路径和绝对路径:
相对路径(常用)
图片相对于 HTML 页面的位置
~HTML文件与图片在同一级下:图片文件+后缀 eg:image.jpg
~HTML文件与图片所在文件夹在同一级下在同一级下:图片所在文件夹名称/图片文件+后缀
~HTML文件所在文件夹与图片所在文件夹在同一级下:../图片所在文件夹名称/图片文件+后缀
PS:../表示返回一级
绝对路径
绝对路径:
是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如,“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”
7.链接标签:
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性:
1.href:用于指定链接目标的url地址(网址)
2.target:用于指定链接页面的打开方式
_self默认值
_blank新窗口打开
3.#:空链接
###8.注释
快捷键: ctrl + /
9.特殊字符:
在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。
常用:
空格: 
大于号:<
小于号:>
10.表格
####表格的作用及用法
1.表格主要用于显示、展示数据
2.表格的具体用法:
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>学号</th>
</tr>
<tr>
<td>单元格内的文字1</td>
<td>单元格内的文字2</td>
<td>单元格内的文字3</td>
</tr>
...
</table>
1.<table> </table> 是用于定义表格的标签。
2.<tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中。
3.一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示.
<th> 标签表示 HTML 表格的表头部分(table head 的缩写)
4.表头单元格也是单元格,常用于表格第一行突出重要性,表头单元格里面的文字会加粗居中
5.<td> </td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
表格结构标签:
使用场景:
因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分.
在表格标签中,分别用:
<thead>标签 表格的头部区域、
<tbody>标签 表格的主体区域. 这样可以更好的分清表格结构。
1. <thead></thead>:用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
2. <tbody></tbody>:用于定义表格的主体,主要用于放数据本体 。
3. 以上标签都是放在 <table></table> 标签中。
合并单元格:
跨行合并:rowspan="合并单元格的个数",最上侧单元格为目标单元格, 写合并代码
跨列合并:colspan="合并单元格的个数",最左侧单元格为目标单元格, 写合并代码
合并单元格三步曲:
先确定是跨行还是跨列合并。
找到目标单元格. 写上合并方式 = 合并的单元格数量。
比如:<td colspan=“2”></td>。删除多余的单元格。
11.列表
列表的作用及分类
列表是用来布局的
可以分为三大类:
无序列表(前面是小点)
有序列表(前面是123)
自定义列表
无序列表(使用较多)
<ul> 标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用 <li> 标签定义。
无序列表的基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
1. 无序列表的各个列表项之间没有顺序级别之分,是并列的。
2. <ul></ul> 中只能嵌套 <li></li>,直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
3. <li> 与 </li> 之间相当于一个容器,可以容纳所有元素。
4. 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。
有序列表
在 HTML 标签中,<ol> 标签用于定义有序列表,列表排序以数字来显示,并且使用 <li> 标签来定义列表项。有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
1. <ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2. <li> 与 </li>之间相当于一个容器,可以容纳所有元素。
3. 有序列表会带有自己样式属性,但在实际使用时,我们会使用 CSS 来设置。
自定义列表
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
在 HTML 标签中,<dl> 标签用于定义描述列表(或定义列表),该标签会与 <dt>(定义项目/名字)和 <dd>(描述每一个项目/名字)一起使用。
语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
12.表单
使用表单目的是为了收集用户信息。
在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成。
表单域
表单域是一个包含表单元素的区域。说白了就是规定表单的区域
在 HTML 标签中, <form> 标签用于定义表单域,以实现用户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器.
实现代码:
<form action=“用于指定接收并处理表单数据的服务器程序的url地址”
method=“提交方式(取值:get/post)”
name=“表单域名称:用于区分一个页面中的多个表单域">各种表单元素控件</form>
表单元素控件
输入表单元素
<input> 标签用于收集用户信息。在 <input> 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type="属性值" />
语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心: <label> 标签的 for 属性应当与相关元素的 id 属性相同。
文本域表单元素
- 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 标签。
- 在表单元素中, 标签是用于定义多行文本输入的控件。
- 使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
<form>
<input type=“text " name=“username”>
<select name=“jiguan”>
<option>北京</option>
</select>
<textarea name= "message">
</textarea>
</form>