前端学习之HTML
总结汇总一些html相关的知识点。
文章目录
1. 基架标签
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<body>
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
| <!DOCTYPE html> | 文档类型 | 处于 <html> 标签之前。告诉浏览器按照HTML5 规范解析页面 |
| <html></html> | HTML标签 | 页面中最大的标签，我们成为 根标签 |
| <html lang=“en”> | 指定html 语言种类 | 指定该html标签 内容 所用的语言为中文，en， zh-CN |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| <meta charset=“UTF-8” /> | 字符集 | 让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容 |
| <titile></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到body里面的 |
2. 排版标签汇总
排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
2.1 标题标签
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
2.2 段落标签
默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行
<p> 文本内容 </p>
2.3 水平线标签hr标签
<hr />是单标签
2.4 换行标签br
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
<br />
2.5 div 和 span标签
div 就是division的缩写，分割分区的意思
span 跨度，跨距；范围
div标签用来布局的，但是现在一行只能放一个div
span标签用来布局的，一行上可以放好多个span
<div> 这是段落 </div>
<span>今日天气</span>
2.6 排版标签总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| <hx></hx> | 标题标签 | 作为标题使用，并且依据重要性递减 |
| <p></p> | 段落标签 | 可以把 HTML 文档分割为若干段落 |
| <hr /> | 水平线标签 | 没啥可说的，就是一条线 |
| <br /> | 换行标签 | |
| <div></div> | div标签 | 用来布局的，但是现在一行只能放一个div |
| <span></span> | span标签 | 用来布局的，一行上可以放好多个span |
3. 文本格式化标签
<b> 粗体 </b>
<strong>粗体</strong>
<i>斜体</i>
<em>斜体</em>
<s>删除线</s>
<del>删除线</del>
<u>下划线</u>
<ins>下划线</ins>
- 预格式化文本pre标签
<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
- 特殊字符
是以运算符&开头,以分号运算符;结尾。
他们不是标签，而是符号。
HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
<a href="#">more >></a>
4. 图像标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
<img src="图像URL" alt="文本" title="鼠标悬停时显示的内容" width="设置图像的宽度" height="设置图像的高度" border="设置图像的边框宽度" />
<img src="cz.jpg" width="300" height="300" /><br />
<img src="cz.jpg" width="300" height="300" border="3" /><br />
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
5. 链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。 |
注意：
- 外部链接 需要添加 http:// www.baidu.com
- 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
- 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
- 锚点链接
<h3 id="two">第2集</h3>
<a href="#two">
- base 标签
<base target="_blank" />
base 可以设置整体链接的打开状态
base 写到 之间
把所有的连接 都默认添加 target="_blank"
6. 注释标签
注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。
语法格式：
<!-- 注释语句 -->
7. 标签属性中的路径
| 路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 只需输入图像文件的名称即可，如<img src=“baidu.gif” /> | |
| 下一级路径 | “/” | 图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images） |
| 上一级路径 | “…/” | 在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推 |
8. 表格table
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
table 用于定义一个表格标签。
caption 表格标题
tr标签 用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
字母 td 指表格数据（table data），即数据单元格的内容。
th 表头单元格标签，一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<caption>我是表格标题</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>110</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>120</td>
</tr>
</table>
<table width="表格的宽度" height="表格的高度" border="表格的边框"
cellpadding="单元格内容与单元格边框之间的空白距离"
cellspacing="单元格与单元格边框之间的空白距离"
align="设置表格在网页中的水平对齐方式">
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>刘德华</td> <td>男</td> <td>55</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>52</td> </tr>
<tr> <td>张学友</td> <td>男</td> <td>58</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>18</td> </tr>
<tr> <td>刘晓庆</td> <td>女</td> <td>63</td> </tr>
</table>
对于比较复杂的表格，又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构
<thead></thead>：用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 标签！
<tbody></tbody>：用于定义表格的主体。放数据本体 。
<tfoot></tfoot>放表格的脚注之类。
以上标签都是放到table标签中。
- 合并单元格
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
- 先确定是跨行还是跨列合并
- 根据先上，后下，先左，后右的原则找到目标单元格，然后写上合并方式还有要合并的单元格数量 比如 ： <td colspan=“3”></td>
- 删除多余的单元格单元格
| 标签名 | 定义 | 说明 |
|---|---|---|
| <table></table> | 表格标签 | 就是一个四方的盒子 |
| <tr></tr> | 表格行标签 | 行标签要再table标签内部才有意义 |
| <td></td> | 单元格标签 | 单元格标签是个容器级元素，可以放任何东西 |
| <th></th> | 表头单元格标签 | 它还是一个单元格，但是里面的文字会居中且加粗 |
| <caption></caption> | 表格标题标签 | 表格的标题，跟着表格一起走，和表格居中对齐 |
| clospan 和 rowspan | 合并属性 | 用来合并单元格的 |
9. 列表
无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
| 标签名 | 定义 | 说明 |
|---|---|---|
| <ul></ul> | 无序标签 | 里面只能包含li 没有顺序，我们以后布局中最常用的列表 |
| <ol></ol> | 有序标签 | 里面只能包含li 有顺序， 使用情况较少 |
| <dl></dl> | 自定义列表 | 里面有2个兄弟， dt 和 dd |
10. 表单标签
10.1 input 控件
<input type="属性值" value="你好">
用户名: <input type="text" />
密 码：<input type="password" />
用户名:<input type="text" name="username" value="请输入用户名">
用户名:<input type="text" name=“username” />
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
| 属性 | 说明 | 作用 |
|---|---|---|
| type | 表单类型 | 用来指定不同的控件类型 |
| value | 表单值 | 表单里面默认显示的文本 |
| name | 表单名字 | 页面中的表单很多，name主要作用就是用于区别不同的表单。 |
| checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
10.2 label 标签
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
10.3 textarea 控件
<textarea >
文本内容
</textarea>
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
|---|---|---|---|---|
| input type=“text” | 文本框 | 只能显示一行文本 | 单标签，通过value显示默认值 | 用户名、昵称、密码等 |
| textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
10.4 select 下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
在option 中定义selected =" selected "时，当前项即为默认选中项。
10.5 form 表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
