前端01-HTML

最新推荐文章于 2022-10-28 19:44:10 发布

@欧阳先生

最新推荐文章于 2022-10-28 19:44:10 发布

阅读量91

点赞数

分类专栏：前端文章标签：列表 html

本文链接：https://blog.csdn.net/oykj525915/article/details/111478459

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML

HTML （ HyperText Markup Language ）就是超⽂本标记语⾔。 " 超⽂本 " 就是表示⻚⾯内可以包含⾮⽂字元素，如：图⽚、链接、⾳乐等等。

它是⼀种建⽴⽹⻚⽂件的语⾔，通过标记式的指令（ Tag ），将影像、声⾳、图⽚、⽂字等链接显示出来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。

HTML ⽹⻚⽂件可以使⽤记事本、写字板、 HBuilder 、 Sublime 等编辑⼯具来编写，以 .htm 或 .html 为⽂件后缀名保存。将 HTML ⽹⻚⽂件⽤浏览器打开显示，若测试没有问题则可以放到服务器（ Server ）

上，对外发布信息。

整体结构

<!-- 声明当前HTML的版本是HTML5 -->
<DOCTYPE html> <html>
 <head>
 <meta charset="UTF-8">
 <title>HTML⽂档的基本结构</title>
 <script></script>
 <link rel="stylesheet" type="text/css" href=""/>
 <style></style>
 </head>
 <body>
 <!--主体内容-->
 </body>
</html>

常用标签

标题：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
.
.
.

水平线：

<hr />

段落：

<p></p>

属性	值	描述
align	left 、 right 、 center 、 justify	规定段落中⽂本的对⻬⽅式，以后可以⽤样式取代它

列表：

//无序列表
<ul>
 <li>好好学习</li>
 <li>天天向上</li>
</ul>
//有序列表
<ol>
 <li>好好学习</li>
 <li>天天向上</li>
</ol>

	属性	值	描述
无序列表	type	disc circle square	规定列表的项⽬符号类型。可以使⽤样式取代。 dise ：实⼼圆（默认） circle ：空⼼圆 square ：⽅块
	属性	值	描述
有序列表	type	1 a A i I	规定在列表中使⽤的标记类型。 1 ：⽤数字形式表示序号（默认） a ：⽤⼩写字⺟表示序号 A ：⽤⼤写字⺟表示序号 i ：⽤⼩写罗⻢数字表示序号 I （⼤写 i ）：⽤⼤写罗⻢数字表示序号

div:

div 是⼀个块级元素，通常与 css 配合使⽤，⽤于布局。

<div>content</div>

属性	值	描述
align	left 、 right 、 center	规定 div 元素中的内容的对⻬⽅式，以后可以⽤样式取代它

span:

span 标签被⽤来组合⽂档中的⾏内元素， span 没有固定的格式表现。当对它应⽤样式时，它才会产⽣视觉上的变化。

<span>content</span>

格式化标签：

font:规定⽂本的字体、字体尺⼨、字体颜⾊

pre:定义预格式化的⽂本。被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽字体

文本标签：

<b>粗体</b>  
<strong>粗体</strong>  
<i>斜体</i> 
<u>下划线</u> 
<del>中划线</del>
H<sub>2</sub>O      
2<sup>3</sup>

a标签：

a 标签定义超链接，⽤于从⼀张⻚⾯链接到另⼀张⻚⾯。

a 元素最重要的属性是 href 属性，它指示要链接的⽬标位置，同时没有 href 属性 a 标签内的内容与普通⽂本没有区别，也就失去了超链接的功能。

若是想要跳转到当前⻚⾯，那么 href 的值为 # 。被链接⻚⾯通常显示在当前浏览器窗⼝中，除⾮您规定了另⼀个⽬标（target 属性）。

<a href="http://www.baidu.com">百度</a>

属性	值	描述
href	URL	连接所要跳转的位置，可能是其他或当前⻚⾯。
target	blank parent self top Framename 作为锚点的a 标签的name 值	规定在何处打开链接⽂档。 blank ：开启新⻚⾯显示⻚⾯； self ：当前⻚⾯显示跳转到⻚⾯，默认值。 _top ：⽤于有 frameset 布局的⻚⾯，想要覆盖整个⻚⾯显示。 Framename ：这⾥ framename 与上边的值不同，具体以为 frame 起了什么样的名字为准，该值指示要连接的⻚⾯跳转后将在相应名称的框架中显示。

锚点的实现：

利⽤ a 标签的 name 属性

<a name="top"></a>

⼀般标签的 id 属性： div id="" 、 a id="" 等：

<div id="top"></div>、<a id="top"></a>

锚点定位

<a href="#top">返回⾸部</a>

图片

<img src="" alt="" >

属性	值	描述
alt	text	规定图像的替代⽂本，⼀般在图⽚⽆法正常显示占位的⽂字。
src	URL	规定显示图像的 URL 。
align	top 、 bottom 、 middle 、 left 、 right	规定如何根据周围的⽂本来排列图像
border	pixels	定义图像周围的边框
height	pixels 、 %	定义图像的⾼度。
width	pixels 、 %	定义图像的宽度。
title	⽂本	当⿏标在图⽚上时显示的⽂字

表格

table 标签定义 HTML 表格。

tr 标签定义表格的⾏。 tr 元素包含⼀个或多个 th 或 td 元素

td 标签定义 HTML 表格中的标准单元格。

th 定义表格内的表头单元格。 th 元素内部的⽂本通常会呈现为居中的粗体⽂本，⽽ td 元素内的⽂本通常是左对⻬的普通⽂本。

<table border="1" align="center" width="500px" style="border-collapse: collapse;" height="400px">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>工作</th>
				<th>性别</th>
			</tr>
			<tr align="right">
				<td>小明</td>
				<td>21</td>
				<td colspan="2">程序员</td>
			</tr>
			<tr valign="top">
				<td>小红</td>
				<td>31</td>
				<td>程序员</td>
				<td>女</td>
			</tr>
		</table>

表单

form

标签⽤于为⽤户输⼊创建 HTML 表单。

表单能够包含 input 元素，⽐如⽂本字段、复选框、单选框、提交按钮等等。还可以包含 textarea 等元素。

表单⽤于向服务器传输数据。 form 元素是块级元素，其前后会产⽣折⾏。

method ：表单提交⽅式： get 、 post

get ：默认，主动的获取⽅式，数据放在 url 上，数据的容量有限，安全性差，有缓存

post ：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存

input

input 标签⽤于搜集⽤户信息。

根据不同的 type 属性值，输⼊字段拥有很多种形式。输⼊字段可以是⽂本字段、复选框、单选按钮、

按钮等等。

textarea

该标签定义多⾏的⽂本输⼊控件。⽂本区中可容纳⽆限数量的⽂本，可以通过 cols 和 rows 属性来规

定 textarea 的尺⼨。 cols 规定⽂本区内的可⻅宽度。 rows 规定⽂本区内的可⻅⾏数。

属性	值	描述
alt	text	定义图像输⼊的替代⽂本。
checked	checked	规定此 input 元素⾸次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁⽤此元素。
readonly	readonly	规定输⼊字段为只读。
maxlength	number	规定输⼊字段中的字符的最⼤⻓度。
value	value	规定 input 元素的值。
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。按钮复选框⽂件隐藏域图像形按钮密码单选框重置按钮提交按钮⽂本

label

label 标签为 input 元素定义标注（标记）。

label 元素不会呈现任何的特殊效果。

label 标签的 for 属性应当与相关元素的 id 属性相同，此时点击 label 标签会⾃动为元素聚焦

<label for="username">⽤户名：</label> 
<input type="text" id="username" name="username"/>

button按钮

<button type="button">普通button</button>
<button type="reset">重置button</button>
<button type="submit">提交button</button>

属性	值	描述
disabled	disabled	禁⽤该按钮。
type	button 、 submit 、 reset	规定按钮的类型。
value	text	规定按钮的初始值。
name	button_name	规定按钮的名称。

select下拉框

喜欢的颜色：<select name="color" size="4" multiple="multiple">
				<option value="red">红色</option>
				<option value="green">绿色</option>
				<option value="blue">蓝色</option>
				<option value="pink">粉色</option>
				<option value="black" selected='selected'>黑色</option>
				<option value="white">白色</option>
			</select>

select属性：

属性	值	描述
disabled	disabled	禁⽤该下拉框。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
size	number	规定下拉列表中可⻅选项的数⽬。

option属性：

属性	值	描述
disabled	disabled	禁⽤该下拉框。
selected	selected	规定选项（在⾸次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。