HTML知识

最新推荐文章于 2024-06-18 13:20:32 发布

java界扛把子

最新推荐文章于 2024-06-18 13:20:32 发布

阅读量266

点赞数

分类专栏：前端

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、HTML基本标签
1.1HTML介绍
1.1.1 什么是HTML?
HTML是用来描述网页的一种语言。
HTML是超文本标记语言（Hyper Text Markup Language）
超文本：是指文本、图片、音频、视频、链接等内容形式
HTML表示一种编程语言，而是一种标记语言（Markup Language）。
标记语言就是一套标记标签（符号）。
HTML使用标签来描述网页的
1.1.2HTML的作用
Web浏览器的作用就是读取Html文件，并以网页的形式显示内容。浏览器不会显示html标签，而是使用标签来解析页面上的内容。简单来说，HTML就是一门基于浏览器的语言。
1.1.3HTML书写规范
HTML标记通常被称为HTML标签。
HTML标签是由尖括号包围的关键词，比如
HTML标签通常是成对出现的，比如
标签对中的第一个标签是开始标签，第二个标签是结束标签
绝大多数的标签都具有属性，建议属性值使用引号引起来，例如：

xxx

大多数标签是可以嵌套使用的。
建议，HTML中所有的标签都小写

1.1.4创建html文件
HTML文件可以直接使用文本编辑器来创建，保存时，后缀名必须为html或htm。例如：记事本、ue、EditPlus，也可以使用集成化的开发工具:eclipse、IDEA、WebStorm。

1.2HTML基本标签
1.2.1标签
一个html文件中，它的根标签就是，整个网页中的内容，必须放在与标签之间。标签的子标签包括：与

<body></body>

1.2.2空的html标签
没有内容的HTML标签(元素)被称为空元素，空元素是在开始标签中关闭的

就是没有关闭标签的空元素(
标签定义换行）
在开始标签中添加斜杠，比如:
是关闭空元素的正确方法。
即使
在所有的浏览器中都是有效的，但使用
是更好的选择。

1.2.3HTML大小写
HTML标签对大小写不敏感，

等同于

，在实际的开发过程中，标签大写和小写都能够被浏览器正确的识别并解析。
W3School使用的是小写的标签，因为万维网联盟（W3C）作为HTML规范的指定者，推荐使用小写，而在未来的(xhtml)版本中必须使用小写。

1.2.4文件标签
A)html标签
整个文件都处于标签中

用以声明这是一个HTML文件，让浏览器识别并解析。

B)head标签

标签用于加载一些重要的咨询，它的内容不会被显示，只有标签中的内容才会在浏览器中显示。 C)title标签只能出现在标签中，它代表的是当前网页的标题 D)body标签标签中的内容用于在浏览器中显示 <title>这是我的第一个网页

<body>
	html是一门用来描述网页的语言！
</body>

常用属性: text：用于设定文字颜色 bgcolor:用于设定背景颜色 background：用于设定背景图片这是我的第一个网页

<body text="red"  background="1.jpg" bgcolor="blue">
	html是一门用来描述网页的语言！
</body>

说明:bgcolor和background两者同时使用,background优先级高

关于html中颜色取值：
颜色由红色、绿色、蓝色混合而成（rgb）
有三种取值方式：
1、rgb(0,0,0) 值是在0-255之间。
2、#000000、#ff00dd、#0000ff、#ffffff
3、red、blue、green

1.2.5排版标签
A)注释
在html中注释是
注意：在浏览器中查看网页源代码时，能够看到html注释的内容

B)p标签

标签是段落标签，可以将html文件分隔为若干段落，浏览器会自动在段落前后添加空格。

标签常用属性：align：用于设定对齐方式，可选值:left、right、center默认是left

C)br标签

标签是换行标签，因为浏览器会自动的忽略空白与换行，因此
标签成为了浏览器中用来换行的。

D)hr标签

标签会生成一条水平线。常用属性： align:设置水平线的对齐方式，可选值：left、right、center size：设置水平线厚度，以像素为单位，默认为2px width:设置水平线长度，可以是绝对值或相对值，默认为100% color:设置水平线的颜色，默认为黑色

关于html中数值单位
Html的数值默认单位为像素 px
在有些位置中可以使用百分比来设置

这是我的第一个网页 html是一门用来
描述网页的语言！

	<hr align="center"  width="50%" color="blue"/>

	<p align="center">段落一</p>
	<p align="right">段落二</p>

</body>

1.2.6字体标签
A)font
标签用于规定文本的字体、大小、颜色
常用属性：
face:规定文本的字体
size规定文本的大小
color规定文本的颜色
张三李四王五赵六田七

…

标题
Html中定义了6级标题，标签分别是:

、

标题最大

标题最小

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

1.2.7列表标签
a)ul

标签标示的是一个无序列表常用属性: type规定列表的项目符号类型，可取值:disc、square、circle默认为disc

b)li

标签标示的是一个列表项常用属性 type：这个属性只适用于无序列表，用于设定项目符号 value:这个属性只适用于有序列表，用于设定列表的项目数字
c)ol
1. 标示的是一个有序列表常用属性: type:这个属性规定列表中使用的标记类型，可取值: 1、A、a、罗马数字 start这个属性规定列表的起始数据
```
	<ul type="circle">

		<li>张三</li>
		<li type="square">李四</li>
		<li>王五</li>
		<li>赵六</li>
	</ul>

	<ol type="a" start="a">

		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
		<li>赵六</li>
	</ol>
```
1.2.8图形标签
是一个图片标签，用于在页面上引入一个图片。
常用属性：
src:用于设定要引入图片的url
alt:用于设定图片的替代文字
width:用于设定图片的宽度
height:用于设定图片的高度
border:设定图片的边框厚度
align:用于设定图片和文字的对齐方式，可选值:top、bottom、middle
title:图片的标题
```
	<img src="1.jpg" alt="这是一张图片" width="100px" hegith="100px" border="1px" 
```
title=“html图片标签” align=“middle” />这是一张很不错的图片

1.2.9链接标签
标签用于定义超链接，用于从一个页面链接到另一个页面。常用属性：
href：用于设定链接指向的页面url
target:用于设定在何处打开页面，可选值: _blank、_self
name:用于设定锚的名称，例如：页面中的回到顶部

百度一下
```
	<a href="#top">回到顶部</a>
```
1.2.10表格标签
A)table标签
标签用于定义表格常用属性： align:用于设定表格的对齐方式可选值，left、、right bgcolor:用于设定表格的背景颜色 border:用于设定表格边框的宽度 width:用于设定表格的宽度

B)tr标签
标签用于定义表格的行，包含一个或多个th或td元素常用属性： align:用于设定表格中行的内容对齐方式 bgcolor:用于设定表格中行的背景颜色
C)td标签
标签用于定义表格单元(列) td标签中的文本一般显示为正常字体其左对齐常用属性： align:用于设定单元格内容的对齐方式 bgcolor:用于设定单元格的背景颜色 height:用于设定单元格的高度 width:用于设定单元格的宽度 colspan:用于设定列合并 rowspane:用于设定行合并
D)th标签
用于定义表格的表头(列标题)，内部文本通常程序为剧中加粗文本
E)caption
标签用于定义表格标题标签必须紧随标签之后，一个表格只能有一个标题，通常这个标题会被居中于表格之上。

F)thead
标签用于定义表格的页眉标签用于组合html表格的表头内容标签应用与和元素结合起来使用注意：内部必须有标签
G)tbody
标签用于定义表格的主体标签用于组合HTML表格的主体内容
H)tfoot
标签用于定义表格的页脚
```
<head>
	<title>html表格标签</title>
</head>

<body>

	<h3>html表格标签</h3><hr/>
	<table border="1px" align="center" width="100%">
		<caption>html中的表格示例</caption>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>住址</th>
			<th>分数</th>
		</tr>
		<tr align="center">
		   <td>张三</td>
		   <td>22</td>
		   <td>男</td>
                       <td>北京</td>
                       <td>96.69</td>
		</tr>

		<tr align="center">
		   <td>李四</td>
		   <td>22</td>
		   <td>男</td>
                       <td>北京</td>
                       <td>96.69</td>
		</tr>
		<tr align="center">
		   <td>王五</td>
		   <td>22</td>
		   <td>男</td>
                       <td>北京</td>
                       <td>96.69</td>
		</tr>

		<tr align="center">
			<td colspan="4" rowspan="2">
				占五列
			</td>
			<td>
				abc
			</td>
		</tr>
		<tr align="center">
			<td>
				123456
			</td>
		</tr>
	</table>


	<h3>thead、tbody、tfoot标签</h3><hr/>

	<table>

		<thead>
			<tr>
				<td>aaaaaaaaaaaaaaaaa</td>
			</tr>
		</thead>

		<tfoot>

			<tr>
				<td>4564645613213212313</td>
			</tr>
		</tfoot>

		<tbody>
			<tr>
				<td>bbbbbbbbbbbbbbbbbbbbb</td>
			</tr>
		</tbody>

		
	</table>	
</body>
```
表格练习：

1.3HTML表单标签
关于表单的标签，无论我们使用什么语言来完成web项目的开发，必然会使用到form表单，索引这是必须掌握的。

1.3.1form标签
标签代表一个表单，表单用于向服务器传送数据。标签能够包含，可以是文本字段，复选框，单选框或者提交按钮等。还可以包含，等常用属性： name:用于定义表单的名称 action:用于规定提交表单时向何处发送表单数据 method:用于规定提交的方式，一般取值POST或GET
1.3.2input标签
标签用于搜集用户信息
根据不同的type属性值，输入字段拥有很多中形式，输入字段可以是文本字段，复选框，密码框，单选按钮、按钮等。
关于标签type属性值的说明:
text
定义单行的输入字段，用户可以在其中输入文本、默认宽度为20个字段，其它常用属性：
name:定义标签的名称
value:定义标签的初始值
size:定义输入字段的长度
maxlength:定义输入最大字符的个数

password
定义密码框，其它常用属性：
name:定义标签的名称
value:定义标签的初始值
size:定义输入字段的长度
maxlength:定义输入最大字符的个数
radio
定义单选按钮，其它常用属性：
name:定义标签的名称，注意，对于单选按钮，如果要想做到单选的效果，多个radio的name值必须一样。
value:定义标签的值,或者说当发送表单数据到服务器时，单选按钮会把value属性的值发送到服务器端。
checked:定义该标签默认被选中
checkbox
定义复选框，其它常用属性：
name:定义标签名称，一组的checkbox它们的name值必须是一样的。
value:定义标签值，也就是要发送到服务器端的值
checked：定义默认被选中的复选框
button
定义一个可点击的按钮，普通按钮，其它常用属性：
name:定义标签名
value:定义按钮显示的内容

hidden
定义隐藏的输入字段，常用属性：
name:定义标签名
value:标签值
file
定义文件域，常用属性：
name:标签名称
submit
定义提交按钮，提交按钮会把表单的数据发送到服务器端。常用属性：
name:标签名
value：按钮显示的内容
reset
定义重置按钮，重置按钮会清除表单中的所有数据。常用属性：
name:定义标签名
value:按钮显示的内容
image
定义图片形式的提交按钮，这个标签主要用于替换submit按钮，因为默认产生的提交按钮并不美观，这个标签允许你采用指定的图片作为提交按钮。常用属性：
name:标签名
src:定义图片的url
alt:定义图片的替代文本

1.3.3select标签
标签用于定义一个下拉列表，常用属性:
name:定义标签名
size:定义下拉列表中可见选项的个数
multiple:定义是否可以选择多个选项
用于定义下拉列表中的选项。需要位于标签的内部，常用属性： value:定义往服务器发送的选项值 selected：定义默认被选中的下拉项
1.3.4textarea标签
标签用于定义一个多行文本框也就是文本域，常用属性：
name:标签名
cols:定义多行文本框可见宽度
rows:定义多行文本框的行数
wrap:规定多行文本框中的文字如何换行

1.4前端开发工具 WebStorm
前端开发工具，其实有很多，Eclipse，DW，WebStorm。。。

1.5HTML框架及特色字符
1.5.1其它标签和特殊字符
1.5.1.1其它标签
meta标签
标签可以提供有关页面的元信息（meta-information），比如针对搜索引擎和更新拼读的描述和关键字。标签位于文档的头部，也就是标签里，它不包含任何内容。标签的属性定义了与文档相关的名称/值对。常用属性： content:定义与http-equiv或name属性相关的元信息 http-equiv:把content属性关联到HTTP头部 name:把content属性关联到一个名称。
link标签
标签定义文档与外部资源的关系标签最长见的用途是引入CSS样式表标签只能存放于标签之间，不过它可以出现任何次数常用属性： type:定义被连接的文档的MIME类型 MIME类型是互联网中标准的数据类型，任何形式的内容都有标准的MIME类型.例如：网页的MIME类型：text/html 、image/jpg、image/jpeg、image/gif href：定义被链接的文档的URL rel：定义当前文档与被链接文档之间的关系关于标签的详细用法，我们会在CSS中介绍。
1.5.1.2特殊字符
空格
< < 小于号
> > 大于号
&req; ® 已注册的商标
© © 版权

学习网站: http://www.runoob.com

1.5.2框架标签
所谓框架就是将页面划分成几个窗框，就可以让我们在同一个浏览中显示不止一个页面。

是框架结构标签，它定义如何将窗口分割为框架. 注意：不能与标签一起使用，也就是说如果一个页面有frameset就一定不能有body 常用属性: cols:垂直切割 rows:横向切割 frameborder:定义框架的边框，其值可以有0和1,0表示不显示边框，1表示显示边框 border:定义框架的边框厚度 bordercolr:定义框架边框的颜色 framespacing:定义框架与框架的间距

是框架标签，它定义放置在每个框架中的页面。常用属性 Src:定义词框架要显示的页面url Name:定义词框架的名称 Frameborder:定义框架的边框，其值可以有0和1,0表示不显示边框，1表示显示边框 Framespacing定义框架与框架的间距 bordercolr:定义框架边框的颜色 Scrolling：定义是否显示卷轴(滚动条) yes表示显示 no表示不显示,AUTO自动 Noresize:定义框架大写不可以改变

java界扛把子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML知识

一、HTML基本标签1.1HTML介绍1.1.1 什么是HTML?HTML是用来描述网页的一种语言。HTML是超文本标记语言（Hyper Text Markup Language）超文本：是指文本、图片、音频、视频、链接等内容形式HTML表示一种编程语言，而是一种标记语言（Markup Language）。标记语言就是一套标记标签（符号）。HTML使用标签来描述网页的1...
复制链接

扫一扫