您的位置：首页 > Web前端 > HTML

HTML快速入门笔记

2019-02-17 23:54 162 查看

1 HTML的概念

1.1概念

HTML是一种超文本标记语言。

1.2 作用

需要将java在后台根据用户请求处理的请求结果在浏览器中显示个用户。
在浏览器中数据需要使用友好的格式展现给用户。
HTML是告诉浏览器接收到的数据使用什么样的数据组织形式进行显示。

1.3 使用

HTML的标准文档规范
HTML的标签

2 HTML的三大基石

URL：统一资源定位符（唯一的定位一个网络资源）；
HTTP：超文本传输协议（规范浏览器和服务器之间数据交互的格式）；
HTML：超文本标记语言（有效的组织数据在浏览器端的显示）；

3 HTML的文档声明

文件名.html或者文件名.htm

4 HTML的标准文档结构

<html>
<head>
<!--
主要是配置 浏览器显示数据的配置信息
例如：字符编码等
一般是给浏览器进行使用
-->
</head>
<body>
<!--
给用户进行数据显示
-->
this is my first html.
</body>
</html>

HTML是由浏览器进行解析执行的。

5 HTML的头标签

5.1 网页标题标签

<title>html 学习</title><!--网页标题标签：告诉浏览器使用什么标题显示网页-->

5.2 编码格式标签

<meta charset="utf-8"/><!--网页解析编码格式配置：告诉浏览器使用指定的编码格式解析文档，此格式为HTML5的标记-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <!--H4的指定编码-->

5.3 网页搜索优化标签

<meta name="keywords" content="HTML,Learn"/><!--网页关键字：用于服务器检索-->
<meta name="description" content="本网页上时关于HTML的head标签学习的。"/><!--网页的描述-->
<meta name="author" content="TaoZi"/><!--网页作者-->

5.4 网页指定跳转标签

<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/><!--网页自动跳转-->

5.5 其他标签

css引入标签和js标签
你好

6 HTML的主体标签

6.1文档标签

标题标签：
h1到h6：会将其中的数据加粗加黑显示，并且显示一次减弱，标题标签自动换行。（块级标签，自占一行）
属性：
align：center left right

水平线标签：
hr：会在页面中显示一条直线
属性：width 600px（固定）  40%（窗口百分比）
size 高度
color 颜色
align 位置
pre:原样输出

段落标签;
p:会将一段数据作为整形进行显示，主要是进行css和js操作时比较方便
特点：
段落与段落之间会自动换行（块级元素会自动换行）；

换行符：
br：告诉浏览器需要进行在此处换行

空格符：
&nbsp；：

权重标签;
b:加黑显示
i：斜体显示
u:增加下划线
del：增加中划线
以上标签不会自动换行，并且会可以嵌套使用

注意：
标签的属性时对标签的功能进行进一步的补充，可以由开发人员自由指定标签的属性值，来达到想要的效果。

6.1 列表标签

列表标签学习：
无序列表：
ul:
li：该标签中书写列表内容，一个li标签代表列表中的一行数据。
特点：默认数据前面有一个黑圆圈符号。

有序列表：
ol
li：在该标签中书写列表的内容，一个li标签代表列表中的一行数据；
特点：会自动的给列表进行顺序编码，格式从小到大时联系的。
属性：type：可以改变顺序编码的值，可以时1 a A I，默认使用阿拉伯数字进行编码3

自定义列表：
dl；
dt：数据的标题
dd：数据的具体内容，一个dd表示一个数据

7 HTML的图片标签

图片标签：
img
src：图片路径
本地资源路径：一般本地图片资源使用相对路径即可
网络资源路径：图片资源的URL地址
width：设置图片的宽度，如果是单独设置，则在图片保证不失真的情况下自动缩小或者放大，单位可以是px也可以是百分比
height：设置图片的高度，如果是单独设置，则在图片保证不失真的情况下自动缩小或者方法，单位可以是px也可以是百分比
title：图片标题，鼠标放在图片上的时候会显示
注意：图片是不会自动换行的。
路径：
相对路径：从当前文件出发查找另一个文件
绝对路径：从根盘符出发查找文件的路径

8 HTML的超链接标签

超链接标签学习：
a标签：
htef：要跳转的资源路径
本地资源：相对路径
网络资源：网络资源（网页）的URL
target:志明要跳转的网页资源的显示位置
_self：在当前页中刷新显示
_blank：在新的标签页中显示
_top：在顶层页面中显示
_parent:在父级页面中显示
注意：
超链接标签中一定要声明访问的方式；

锚点学习：
作用：早一张网页中进行资源的跳转；
使用：
先使用超链接标签在指定的网页位置增加锚点，格式为：
<a name="锚点名"></a>
使用a标签可以跳转指定的锚点，达到网页内部资源跳转的目的。格式：
<a href="#锚点名">访问名</a>
回到顶部：<a href="#">回到顶部</a>

9 HTML的表格标签

表格标签学习：
table：声明一个表格
tr:声明一行,设置行高及该行所有单元格的宽度
th：声明一个单元格，表头格，默认居中加黑显示
td:声明一个单元格，默认居左显示原始数据
注意:
行高及该行所有单元格的宽度；
单元格的宽度即列宽
属性：
border:对表格添加边框；
width:设置表格的宽度
height：设置表格的宽度
cellpadding:内容到边框的距离
cellspacing：设置边框的大小
特点：
默认根据数据的多少进行表格的大小显示
单元格合并：
第一步：首先确认表格是一个规整的表格；
第二步：根据要合并的单元格，找到其所在的源码位置；
第三步：
行合并：在要合并的单元格中的第一个单元格上使用属性rowspan=“要合并的单元格的个数”，并删除其他要合并单元格完成合并；
列合并：在要合并的单元格中的任意一个上使用属性colspan="要合并的单元格的个数"，并删除要合并的其他单元格。

10 HTML的内嵌和框架标签

内嵌标签：
iframe：
src：要显示的网页资源路径
可以使用本地（相对路径）也可以使用网络资源（URL）
注意：
默认当前网页打开及加载src指向的资源
width：设置显示区域的宽度；
height：设置显示区域的高度
name：设置内嵌区域的名字，结合超链接标签的target属性使用
作用：
在当前网页中加载其他网页的资源，达到不同网页资源之间不相互干扰，并能在同一个页面中展现给用户的目的。

框架标签：
注意：
第一步一定要删除body标签
框架标签学习：
frameset：
rows：按照行进行切分页面；
cols：按照列进行切分页面
字标签：
frame：进行切分区域的占位，一个frame可以单独加载网页资源；
src：资源路径（本地或者网络）
name：区域名，结合超链接使用。

11 HTML的表单

form标签：
作用：收集并提交用户数据给指定服务器；
属性：
action：收集的数据提交地址也就是URL；
method：收集的数据的提交方式；
get：适合小量数据，表单数据以？隔开拼接在URL后面，不同的键值对使用&符号隔开，不安全
post：适合大量数据，安全，隐式提交。
注意1：
表单数据的提交，要提交的表单项必须拥有name属性值，否则不会提交，提交的表单项数据为键值对。键位name的属性值，值为用户书写的数据。
注意2：form标签会收集其标签内部的数据；
注意3：form表单的数据提交需要依赖submit体检按钮。
注意4：表单数据提交的是表单标签的value值。
使用：
type：
文本框：
input：
text：收集少量的文本数据，用户可见；
password：收集用户密码数据
name：数据提交的键，也会被js使用
value：默认值。
单选框：
input：
type：<input type="radio" name="sex" /> <input type="radio" name="sex" />
radio
name:name属性值相同的单选框只能选择一项数据。
value：要提交的数据
checked：checked 使用此属性的单选默认是选择状态
多选框：
input：
type：
checkbox
name：一个多选组需要使用相同的name属性值；
value：要提交的数据
checked：checked 使用此属性的单选默认是选择状态
单选下拉框：
select：
name:数据提交的健名，必须声明；
子标签option：一个option标签表示一个下拉选项，
value：要提交的数据
selected：selected 使用此属性的下拉框子标签默认是选择状态
文本域：
textarea：声明一个可以书写大量文本的文本区域；
name：数据提交的键名，js和css也会使用
rows：声明文本域的行数
cols:声明文本域的列数
普通按钮：
input：
type：
button
value：
隐藏标签：
input：
type：
hidden：

form表单标签的使用：
点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式提交给action属性所指定的提交地址。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航