本文详细介绍了HTML的基本概念，包括超文本标记语言的定义、结构及常用的开发工具。重点讲解了HTML标签的分类，如块级、行级和行内块标签，列举了各类标签的特性和常见用法，如<div>、<a>、<p>、<img>、<input>等。此外，还涵盖了表格、表单、列表和布局元素的使用，以及如何通过CSS属性调整元素样式。文章旨在帮助初学者掌握HTML的基础知识，实现网页内容的布局与交互。
1.HTML概念
1.1 HTML(hyper text markup language)超文本标记语言
- “超文本”--------包含文本字体,图片、链接，甚至音乐、程序等元素的文本
- 是一个以.html为后缀的文本
- 是一个文本,也是一个网页;该文本可以用浏览器打开
- HTML 是一个使用“标签”来描述网页的文本 (标签在html文本中有实际意义)
1.2 HTML结构
1.3 开发工具
1.4 HTML重要body标签
- <.hr>
- <.br>
- <.h1>-<.h6>
- <.div>
- <.a>
- <.p>
- <.img>
- <.input>
- <.textarea>
- <.select>
- <.ol>-<.ul>
- <.table>–<.tr>—<.td>—<.th>
- <.form>
2.HTML标签分类
2.1 块级标签
2.1.1 特性
- 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
- 可以直接控制宽度、高度以及盒子模型的相关css属性
- 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
- 在不设置高度的情况下，块级元素的高度是它本身内容的高度
- 块级元素是指本身属性为display:block;的元素
- 通常使用块级元素来进行大布局（大结构）的搭建
2.1.2 常见的块级元素
div、p、h1、 h2、 h3、 h4、 h5、 h6，ol、ul、dl、li、form、table
2.2 行级(内联)标签
2.2.1 特性
- 和其他内联元素从左到右在一行显示
- 不能直接控制宽度、高度以及盒子模型的相关css属性，(但是直接设置内外边距的左右值是可以的)
- 内联元素的宽高是由本身内容的大小决定（文字、图片等）
- 内联元素只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）
- 内联元素是指本身属性为display:inline;的元素
- 通常使用行级元素来进行文字、小图标（小结构）的搭建
2.2.2 常见的行级元素
- span 常用内联容器，定义文本内区块
- a 锚点
- b 加粗; strong 加粗强调; i 斜体; strike 中划线
- br 强制换行; u 下划线
- textarea 多行文本输入框
- input 输入框
- select 下拉列表
- img 引入图片
2.3 行内块标签
2.3.1 特性
- 本质属于行级元素
- 可以与其他行内元素、内联元素共处一行
- 可以设置宽高、内外边距
- 属性为display:inline-block;的元素
2.3.2 常见的行内块元素
- input 输入框
- img 引入图片
可以在行内样式或css样式中改变元素的display将三种元素进行转换：
- display: block；(将元素变为块级元素)
- display: inline； (将元素变为行级元素)
- display: inline-block；（将元素变为行级块元素）
3.HTML主要标签解析
3.1 <.hr>
- 标签在 HTML 页面中创建一条水平线
- <.hr> 标签没有结束标签
- 标签属性
noshade:颜色是否有阴影(纯色)
size:高度( 厚度,不同于height,不带单位时–默认px )
width:宽度(不带单位时–默认px)
align:对齐方式
eg:
<hr>
<hr />
<hr noshade="noshade">
<hr noshade="noshade" size="50">
<hr noshade="noshade" size="50" width="50">
<hr noshade="noshade" size="50" width="50%">
<hr noshade="noshade" size="50" width="50%" align="left">
3.2 <.br>
- 可插入一个简单的换行符
- 标签是单标签（意味着它没有结束标签）
- <.br> 标签只是简单地开始新的一行
3.3 <.h1>…<.h6>
- <.h1> - <.h6> 标签可定义标题
- <.h1> 定义最大的标题;<.h6> 定义最小的标题
- 属性align
Left:左对齐内容（默认值）
Center:居中内容
Right:右对齐对齐内容
3.4 <.div>
- <.div> 可定义文档中的分区或节
- <.div> 标签可以把文档分割为独立的、不同的部分
- 属性align
Left:左对齐内容（默认值）
Center:居中内容
Right:右对齐对齐内容
3.5 <.a>
- <.a> 标签定义超链接，用于从一张页面链接到另一张页面
- <.a> 元素最重要的属性是 href 属性，它指示链接的目标
- <.a href=“http://www.baidu.com.cn”>baidu
- 属性(Target)
(1)超链接属性target的value值时默认是_self
(2)_blank:在新窗口打开
(3)_parent:在父窗口打开
(4)_self:它使目标文档显示在超链接所在框架或者窗口中
(5)_top:在顶级窗口打开
(6)同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化 ; 浏览器会找与target值相符的框架或者窗口中的文档，有则在其中显示文档。如果不存在，浏览器打开一个新窗口
Eg1:
<a href="http://www.w3school.com.cn">默认</a>
<a href="http://www.w3school.com.cn" target="_blank">_blank</a>
<a href="http://www.w3school.com.cn" target="_self">_self</a>
<hr>
<li><a href="http://www.w3school.com.cn" target="view1">1</a></li>
<li><a href="http://www.w3school.com.cn" target="view1">2</a></li>
Eg2:
A.html
<body bgcolor="red">
--------a-------<br>
<iframe src="b.html" width="800px" height="800px"></iframe>
</body>
b.html
<body bgcolor="darkgrey">
--------b-------<br>
<iframe src="c.html" width="600px" height="600px"></iframe>
</body>
d.html
<body bgcolor="#b8860b">
--------d-------<br>
<!--<a href="http://www.baidu.com" width="400px" height="400px">默认</a>-->
<!--<a href="http://www.baidu.com" target="_self" width="400px" height="400px">_self</a>-->
<!--<a href="http://www.baidu.com" target="_parent" width="400px" height="400px">_parent</a>-->
<a href="http://www.baidu.com" target="_top" width="400px" height="400px">_top</a>
</body>
3.6 <.p>
-
标签定义段落
-
元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
3.7 <.img>
- 图片标签
- 属性
Width
Height
单位 px, %
eg:
<img src="" alt="加载错误" width="200" height="200" />
3.8 <.input>
- 用于搜集用户信息
- 根据不同的 type 属性值，输入字段拥有很多种形式。可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
- 属性（Type）
text:默认文本
password:密码
button:按钮
hidden:隐藏输入框
radio:单选框
reset:定义重置按钮
submit:提交
<input type="text" name="email" />
<input type="password" name="pwd" />
<input type="hidden" name="country" value="Norway" />
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
<form action="form_action.asp" method="get">
<input type="text" name="email" />
<input type="reset" />
<input type="submit" />
</form>
3.9 <.textarea>
- 定义多行的文本输入控件
- 可以通过 cols 和 rows 属性来规定 textarea 的尺寸
- 属性
Cols:列
Rows:行
Maxlength:最大
Placeholder:提示
readonly :只读
<textarea placeholder="请输入..." rows="5" cols="100" maxlength="50" >
</textarea>
<textarea placeholder="请输入..." rows="5" cols="100" maxlength="50" readonly>
</textarea>
3.10 <.select>
- 选择下拉框
- 属性
option:selected(selected="selected"选中状态)
select :multiple(multiple =“multiple“ 允许多选)
select :size(size =“4”下拉可见数4)
eg:
<select multiple="multiple" size="1" >
<option value=“aaa">aaa</option>
<option value=“bbb">bbb</option>
<option value=“ccc" selected="selected">ccc</option>
<option value=“ddd">ddd</option>
</select>
3.11 <.ol>
- 定义有序列表(有序:数字,字母)
- 属性:
Type:规定在列表中使用的标记类型(1,A,a,I,i)
Start:规定有序列表的起始值
Reversed:规定列表顺序为降序。(9,8,7…)
Eg:
<ol type="A" start="10" reversed>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
3.12 <.ul>
- 定义无序列表(圆点,空心点)
- 属性（Type）
disc:默认值。实心圆。
circle :空心圆
square :实心方块
Eg:
<ul type="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
3.13 <.li>
- 定义列表项目
- 可用在有序列表 (
-
) 和无序列表 (
- ) 中。
-
) 和无序列表 (
3.14 <.table>
- 定义 HTML 表格
- 结合标签标签使用
- 主要属性
Bgcolor
Border
Cellpadding:规定单元边沿与其内容之间的空白
Cellspacing:规定单元格之间的空白
Eg:
<table border="1px" bgcolor="red" cellpadding="30" cellspacing="100">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
3.15 <.tr>
- 定义 HTML 表格中的行
- 包含一个或多个 或 元素
- 属性
Bgcolor
Valign:规定表格行中内容的垂直对齐方式
top
middle
bottom
3.16 <.td>
- 定义 HTML 表格中的标准单元格
- 属性
Colspan:横跨列数
Rowspan:横跨行数
Eg:
<table border="1px" bgcolor="red" cellpadding="30" cellspacing="100">
<tr>
<td colspan="2">11</td>
</tr>
<tr>
<td rowspan="2">21</td>
<td>22</td>
</tr>
<tr>
<td>12</td>
</tr>
</table>
3.17 <.form>
- 表单
- 用于与服务器端的交互
Eg:
<form action=“url" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
扫一扫
2617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
