作者: 阿伟
个人主页: Flyme awei希望大家多多支持一起进步呀!
文章对你有帮助关注✨点赞收藏
HTML知识点总结
文章目录
- HTML知识点总结
- 一、HTML
- 1.1网络传输的三大基石
- 1.2什么是HTML
- 1.3HTML标准结构
- 1.4集成开发环境
- 二、HTML中标签的使用
- 2.1head中的标签
- 2.2body中的标签
- 2.2.1文本标签
- 2.2.2多媒体标签
- 2.2.3超链接标签
- 2.2.4设置锚点
- 2.3列表标签
- 2.3.1无序列表
- 2.3.2有序列表
- 2.4表格标签
- 三、框架
- 3.1内嵌框架
- 3.1.1练习:邮箱
- 登录首页
- 邮箱首页
- 邮箱上侧
- 邮箱左侧
- 3.2框架集合
- 四、form表单
- 4.1form表单作用
- 4.2forme表单细节
- name属性
- action属性
- method 属性
- 4.3form表单练习:模拟百度搜索
- 4.4表单元素
- 4.4.1文本框
- 4.4.2密码框
- 4.4.3单选按钮
- 4.4.4多选按钮
- 4.4.5文件
- 4.4.6影藏域
- 4.4.7普通按钮
- 4.4.8重置按钮
- 4.4.9提交按钮
- 4.4.10下拉按钮
- 4.4.11多行文本框
- 4.4.12lable标签
- 五、HTML5新增
- 5.1新增type类型
- 5.2新增属性
- 总结
一、HTML
1.1网络传输的三大基石
URL:在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL(Uniform Resource Locator,统一资源定位符),它是WWW的统一资源定位标志,就是指网络地址。
HTTP协议:http是一个简单的请求-响应协议,它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出;而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣,因为它使得开发和部署是那么的直截了当。
HTML:HTML称为超文本标记语言。
1.2什么是HTML
HTML 指的是超文本标记语言: HyperText Markup
超文本:比普通的文本厉害标记:标记=标签
标签:
分类:双标记标签/封闭类型标签
单标记标签/非封闭类型标签语言:HTML是一个描述网页的语言
HTML的作用:
学习HTML就是学习各种各样的标签,然后组成一个页面,这个页面可以被浏览器解析,解析完以后可以在浏览器中将页面进行展示。
1.3HTML标准结构
标准结构:
运行界面: 让浏览器解析:直接用浏览器将文件打开即可:
1.4集成开发环境
集成开发环境(IDE,Integrated Development Environment ):是用于提供程序开发环境的应用程序,一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套(组)都可以叫集成开发环境。如微软的Visual Studio系列,Borland的C++ Builder、Delphi系列等。该程序可以独立运行,也可以和其它程序并用。IDE多被用于开发HTML应用软件。
例如,许多人在设计网站时使用IDE(如webstorm、DreamWeaver等),因为很多项任务会自动生成。
二、HTML中标签的使用
2.1head中的标签
head标签—》里面放的是页面的配置信息
head标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分:
。
应该把 标签放在文档的开始处,紧跟在 后面,并处于 标签之前。
文档的头部经常会包含一些 标签,用来告诉浏览器关于文档的附加信息。
<!DOCTYPE html><html><head><meta charset="UTF-8"><style></style><script></script><meta name="author" content="awei"/><meta name="keywords" content="关键字"/><meta name="keywords" content="head标签" /><!----><link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"/><title>head标签</title></head><body>This is awei a html ...</body></html>
2.2body中的标签
body标签—》里面放的就是页面上展示出来的内容
body 元素是定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)body是用在网页中的一种HTML标签,标签是用在网页中的一种HTML标签,表示网页的主体部分,也就是用户可以看到的内容,可以包含文本、图片、音频、视频等各种内容!
2.2.1文本标签
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文本标签</title></head><body><h1>H1标题</h1><h2>H2标题</h2><h3>H3标题</h3><h4>H4标题</h4><h5>H5标题</h5><h6>H6标题</h6><p>文 本</p> <p>文本</p> <b>加粗</b><i>倾斜</i><u>下划线</u><i><u><b>加粗倾斜下划线</b></u></i><pre><font size="5">public static void main(String[] args){System.out.println("预编译")}</font></pre><del>Flyme awei</del><!--换行效果
shift + Enter--><p>hello,<br />word</p><font size="7" color="aqua" face="微软雅黑">字体大小颜色样式</font></body></html>
页面展示:
2.2.2多媒体标签
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>多媒体标签</title></head><body><img src="img/76cc7e7c572c4bd7b368add704a02383.png" width="300px"title="这是一张图片" alt="图片加载失败提示语"/><br /><embed src="vido/日落.mp4"></embed><embed src="music/我要你.mp3"></embed></body></html>
页面展示:
2.2.3超链接标签
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>超链接标签</title></head><body><a href="01head标签.html">超链接</a><br /><a href="02文本标签.html" target="_self">这是一个超链接</a><br /><a href="03多媒体标签.html" target="_blank">这是一个超链接</a><br /><a href="https://blog.csdn.net/m0_68744965" />" target="_blank"><img src="img/76cc7e7c572c4bd7b368add704a02383.png"/></a></body></html>
页面展示:
2.2.4设置锚点
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>设置锚点</title></head><body><a name="1F">java语言</a><h1>java</h1><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><a name="2F">python语言</a><h1>python</h1><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><a name="3F">javascript语言</a><h1>javascript</h1><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><a href="#1F">java</a><a href="#2F">python</a><a href="#3F">javascript</a></body></html>
2.3列表标签
2.3.1无序列表
2.3.2有序列表
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><h1>Python</h1><ul type="circle"><li>django</li><li>flask</li><li>pygame</li><li>numpy</li><li>pandas</li></ul><h1>Python Web学习路线</h1><ol><li>Python基础语法</li><li>Python高级</li><li>Python网络</li><li>Mysql</li><li>Web前端</li><li>Linux</li><li>Flask Django</li></ol><h1></h1></body></html>
页面展示:
2.4表格标签
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><table border="1px" cellpadding="0px" width="600px" height="300px" background="img/1d08d8edcc7c432cb36ec517d5d859b0.png"><tr bgcolor="cornsilk" align="center"><td>姓名</td><td>学号</td><td>性别</td><td>年龄</td><td>成绩</td></tr><tr align="center"><td>张三</td><td>1901</td><td rowspan="3" align="center">男</td><td>18</td><td>97</td></tr><tr align="center"><td >李四</td><td >1902</td><td colspan="2">66</td></tr><tr align="center"><td>王二</td><td>1903</td><td>18</td><td>68</td></tr></table></body></html>
页面展示:
三、框架
3.1内嵌框架
内嵌框架是用于在网页中嵌入一个网页并让它在网页中显示.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><h1>java图书展示</h1><ol><li><a href="imgbook/java核心技术.jpg" target="my_iframe">java核心技术</a></li><li><a href="imgbook/think in java.jpg" target="my_iframe">think in java</a></li><li><a href="imgbook/大话设计模式.jpg" target="my_iframe">大话设计模式</a></li><li><a href="imgbook/深入理解java虚拟机.jpg" target="my_iframe">深入理解java虚拟机</a></li><li><a href="imgbook/算法图解.jpg" target="my_iframe">算法图解</a></li></ol><body></body></html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>内嵌框架</title></head><body><iframe src="书籍导航.html" height="700px" width="30%"></iframe><iframe name="my_iframe" width="69%" height="700px" src="imgbook/算法图解.jpg"></iframe></body></html>
3.1.1练习:邮箱
登录首页
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>登录首页</title></head><body><button>用户名</button>:<input type="text" /><br /><button>密 码</button>:<input type="password" /><br /><a href="邮箱首页.html" target="_blank">登 录</a></body></html>
邮箱首页
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>邮箱首页</title></head><body><iframe width="100%" height="100px" src="邮箱上侧页面.html"></iframe><iframe width="20%" height="600px" src="邮箱左侧页面.html"></iframe><iframe name="right_iframe" width="79%" height="600px"></iframe></body></html>
邮箱上侧
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><h1>欢迎<font color="aqua">Flyme awei</font>来到邮箱</h1></body></html>
邮箱左侧
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul><li><a target="right_iframe">写信</a></li><li><a target="right_iframe">收信</a></li><li><a target="right_iframe">通讯录</a></li></ul></body></html>
3.2框架集合
frameset
元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset
元素仅仅会规定在框架集中存在多少列或多少行。您必须使用cols
或rows
属性。
里面如果只有一个框架用frame
标签,如果多个框架用frameset
标签,用cols
或rows
进行行,列的切割
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>框架集合</title></head><frameset rows="20%,*,30%"><frame /><frameset cols="33%,*,33%"><frame /><frame /><frame /></frameset><frameset cols="50%,*"><frame /><frame /></frameset></frameset></html>
四、form表单
4.1form表单作用
表单在 Web 网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能。一般是将表单设计在一个Html 文档中,当用户填写完信息后做提交(submit)操作,于是表单的内容就从客户端的浏览器传送到服务器上,经过服务器上程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。
所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。
一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
表单在 Web 网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能。一般是将表单设计在一个Html 文档中,当用户填写完信息后做提交(submit)操作,于是表单的内容就从客户端的浏览器传送到服务器上,经过服务器上程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。
所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。
一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
4.2forme表单细节
name属性
表单提交时的名称
action属性
提交到的地址
method 属性
默认情况下不写method属性的时候就相当于method=“get”
get:提交的数据可见,不安全
post:提交的数据不可见,安全.
<!DOCTYPE html><html><head><meta charset="UTF-8" method="get"><title>frome表单</title></head><body><form action="提交到目标资源路径"><button>用户名</button>:<input type="text" name="username"/><br /><button>密 码</button>:<input type="password" name="pwd"/><input type="submit" /></form></body></html>
<input type="text" name="wd"/><input type="submit" value="百度一下"/></form></body></html>
4.4表单元素
form表单中可以放入的标签 就是表单元素
4.4.1文本框
input
标签用途很广泛,通过type
属性值的不同,来表现不同的形态。
type="test"
文本框,里面的文字可见
表单元素必须有一个属性
:name
有了name
才可以采集提交数据
提交的时候会以键值对的形式拼接在一起
value
属性:文本框中的具体内容。
键值对:name=value
的形式
如果value
提前写好,那么默认效果就是value
中的内容。
一般默认提示语:用placeholder
,不会用value
,value
只是文本框中的值
readonly
只读:只是不能修改,可以正常提交
disable
:禁用,不能提交
4.4.2密码框
type="password"
4.4.3单选按钮
–单选按钮
注意:一组单选按钮,必须通过name
属性来控制,让他们在同一个分组中
正常情况下,提交数据为:gender
为on
,通过不同的value
值来控制
默认选中:checked="checked"
4.4.4多选按钮
type="checkbox"
4.4.5文件
type="file"
4.4.6影藏域
type="hidden"
4.4.7普通按钮
type="button"
4.4.8重置按钮
type="reset"
4.4.9提交按钮
type="submit"
4.4.10下拉按钮
下拉列表:
标签
默认选中:selected="selected"
多选:multiple="multiple"
4.4.11多行文本框
请在这里填写信息
4.4.12lable标签
一般会在想要获得焦点的标签上加一个
id
属性,然后lable
中的for属性与id
配合使用
全部代码:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表单元素</title></head><body><form action="" method="get"><h1><font color="antiquewhite">请输入身份信息</font></h1><input type="text" name="uname" placeholder="请输入身份证信息"/><input type="password" name="pwd" id="" value="" placeholder="请输入密码"/><input type="text" value="请检查信息" readonly="readonly"/><input type="radio" name="gender" value="0" checked="checked"/>男<input type="radio" name="gender" value="1"/>女<br /><h1><font color="aqua">你喜欢的语言</font></h1><input type="checkbox" name="favlan" value="0"/>java<input type="checkbox" name="favlan" value="1"/>python<input type="checkbox" name="favlan" value="2"/>php<input type="checkbox" name="favlan" value="3"/>javascript<input type="file" /><input type="hidden" name="uname2" value="6666"/><input type="button" name="" id="" value="" /><input type="reset" /><img src="img/1d08d8edcc7c432cb36ec517d5d859b0.png" /><input type="image" /><br />你喜欢的城市:<select name="city" multiple="multiple"><option value="0" selected="selected">昆明</option><option value="1">长沙</option><option value="2">青岛</option><option value="3">大理</option><option value="4">丽江</option></select><br /><br />自我介绍:<textarea style="resize: none;" rows="10" cols="30">请在这里填写信息</textarea><br /><br /><label for="uname">用户名:</lable></lable></liable><input type="text" name="username" id="uname"/><input type="submit" value="提交"/></form></body></html>
页面汇总:
五、HTML5新增
5.1新增type类型
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><form action="" method="get"><input type="email" name="email" /><input type="url" /><input type="color" /><input type="number" min="1" max="10" step="3" value="4"/>1<input type="range" min="1" max="10" name="range" step="3"/>10<input type="date" /><input type="month" /><input type="week" /><input type="submit" /></form></body></html>
5.2新增属性
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><select multiple="multiple"></select><input type="text" autofocus="autofocus" /><input type="text" required="required" /></body></html>
总结
学习HTML就是学习各种各样的标签,然后组成一个页面,这个页面可以被浏览器解析,解析完以后可以在浏览器中将页面进行展示。