关于HTML的总结

HTML简单介绍

1、html简介

　　HTML （ Hyper Text Markup Language ）是一种超文本标记语言，是用来对网页文档信息进行格式化展示的一门语言。描述浏览器所需的信息，而主体则包括头部（head）和主体（body）两大部分。简而言之：HTML是一种专门对网页信息进行规范化展示的语言。html后缀：.html or .htm 可通过浏览器直接运行(推荐Google、火狐)

HTML语言被称为互联网的三大基石之一
三大基石简介：
HTTP协议：解决了服务器和浏览器之间数据如何传送、传送格式的问题！实现了分布式的信息共享。
URL统一资源定位符：解决了众多服务器中资源定位问题。从而让浏览器可以访问不同的服务器资源，实现了全球信息的精确定位。
HTML语言：解决了数据在浏览器中如何丰富多彩的展示，及如何合理标示信息的问题。
HTML规范
1：一个html文件有开始标签和结束标签<html>标签对</html>
2：html包含两部分
(1)<head>设置相关信息</head>
(2)<body>主体，用于显示内容</body>
(3)标签成对出现
(4)不区分大小写
(5)有些标签不需要结束标签 <br/>换行 <hr/>一条横线

2、html中常用标签
文字标签和注释标签
文字标签:修改文字的样式：-<font></font>
属性：
-size:文字的大小取值范围1-7
-color:文字的颜色(表示方式:英文单词，十六进制数#ffff)
- 通过取色工具去获取相关颜色
注释标签： -html注释

3、标题标签、水平线标签和特殊字符
标题标签
　-<h1></h1> 1-6级标题标签依次变小,自动换行
水平线标签：-<hr/>
属性：
　size:水平线粗细取值范围 1-7
　color:颜色
-代码：<hr size="5" color="blue"/>
特殊字符
　- 在网页上显示这样的内容 <html>:网页的开始
　- 这是就需要特殊字符进行转义： < < > > 空格:   & ： &

1 <!DOCTYPE html> 2 <html> 3 <head> 4  5 <meta charset="utf-8" /> 6  7 <title>标题标签、水平线标签和特殊字符</title> 8 9  10 <meta name="author" content="游戏解说柚子" /> 11 <meta name="keywords" content="girl,CF"/> 12 <meta name="description" content="游戏解说主播"/> 13 </head> 14 <body> 15 16  17 <h1>标题一</h1> 18 <h2>标题二</h2> 19 <h3>标题三</h3> 20 <h6>标题六</h6> 21  22 <hr size="3" color="blue"/> 23  24 <html>:是网页的     开始 25 </body> 26 </html>

4、列表标签
- 显示效果
信息工程学院
　　软件工程
　　计算机科学与技术
　　网络工程
<dl> </dl>:表示列表的范围
　　在dl里面 <dt> </dt>：上层内容
　　在dl里面 <dd> </dd>：下层内容

<table> <dl>信息工程学院 <dd>软件工程</dd> <dd>网络工程</dd> </dl> </table>

有序列表：
<ol> </ol>:有序列表的范围
　- 属性 type: 设置排序方式1(默认) a、 i
在ol标签里面<li>具体内容</li>

无序列表
<ul></ul>:无序列表的范围
　- 属性:type:空心圆circle、实心圆disc、实心方块square、默认disc
在ul里面<li>具体内容</li>

<ol type="1"> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol>  <ul type="square"> <li>Java</li> <li>JavaScript</li> <li>Python</li> </ul>

5、图像标签
<img src="img路径 /">
-src:图片的路径
-属性:width、height
-border:设置图片的边框
-alt:图片的描述信息，当图片加载失败的时候会显示alt中的内容
-title：当鼠标滑动到图片上显示的文本

6、路径的介绍
绝对路径
- D:JavaWebhtml_codeImg1P216130321-1.jpg
- http://www.baidu.come.jpg
相对路径
- 同个文件夹下读取

7、超链接标签
链接资源
- <a href="要链接的资源路径"> 显示在页面上的内容</a>
target:设置打开的方式，默认当前页面
-- _blank：新窗口打开
-- _self:当前页面[默认]
- 当超链接不需要任何的地址在href加上#
　- <a href="#">超链接3</a>

定位资源
如果想要定位资源:定义一个位置
<a name="top">顶部</a>
<a href="#top">回到顶部</a>
原样输出:<pre> </pre>

1  2 <a name="top">顶部在这</a><br/><hr/> 3 <a href="test.html" target="_blank">超链接1</a><br/> 4  5 <a href="">超链接2</a><br/> 6  7 <a href="#">超链接3</a><hr/> 8 9  10 <pre> 11 很多现实的文本加载进去就看的出效果回到顶部的效果 12 </pre> 13 <a href="#top">回到顶部</a>

8、表格标签:对数据进行格式化，使数据更加清晰
<table></table>：表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格的直接距离
- width：表格的宽度
- height：表格的高度
在table里面<tr></tr>：定义行
- 设置对齐方式 align：left center right
在tr里面<td></td>：定义单元格
- 设置显示方式 align：left center right
th 也表示单元格：居中且加粗
合并单元格
- rowspan:跨行
- colspan:跨列

<table border="1" bordercolor="blue" cellspacing="0" width="150" height="100"> <caption>武侠小说</caption> <tr align="center"> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>东方不败</td> <td>男</td> <td>20</td> </tr> <tr> <td>岳不群</td> <td>男</td> <td>21</td> </tr>

View Code

9、表单标签
<form></form>:定义一个表单的范围
属性
　- action:提交到的地址(默认当前页面)
　- method:表单的提交方式
　-常用的两种方式 get和post 默认是get
get和post区别:
1，get请求地址栏会携带提交的数据，post不会携带(请求体里面。)
2，get请求安全级别较低，post较高
3，get具有请求数据大小的限制，post没有限制
　 - enctype:一般请求下不需这个属性，文件上传时需要这个属性值

输入项:可输入内容或者选择内容的部分
- 大部分输入项:<input type="输入项内容"/>
普通输入项:<input type="text"/>
密码输入项:<input type="password"/>
属性值：placeholder【H5的新特性】、name、value等值
- placeholder 属性规定描述文本区域预期值的简短提示。该提示会在文本区域为空时显示，当字段获得焦点时消失。

登录:<input type="text" name="user" placeholder="账户/邮箱/手机号" /><br /> 密码:<input type="text" name="user" placeholder="请输入密码" />

单选输入项：<input type="radio"/>
- 有一个name属性
- name属性值必须相同
- 必须有一个value值
实现默认选中的属性
- checked="checked"【默认选择男性】

性别:<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女

复选输入项:<input type="checkbox"/>
- 有一个name属性
- name属性值必须相同
- 必须有一个value值
实现默认选中的属性
- checked="checked"

爱好:<input type="checkbox" name="hobby" value="ping-pong" checked="checked" />乒乓球　　 <input type="checkbox" name="hobby" value="basketball" />篮球　　 <input type="checkbox" name="hobby" value="badminton" />羽毛球

下拉输入项：
<select name="birth">
　<option value="0">请选择</option>
　<option value="1990">1990</option>
　<option value="1991">1991</option>
</select>
默认选择属性
-- selected="selected"

出生年月 <select name="birth"> <option value="0">请选择</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> </select>

文本域
<textarea cols="20" rows="5"></textarea>
属性： - cols宽　rows 高
隐藏项(不会显示在页面上，存在于html代码里)
<input type="hidden"/>

自我描述:<br /><textarea cols="30" rows="10" name="text" placeholder="请开始你的表演" ></textarea>

提交按钮
<input type="submit"/> 默认
<input type="submit" value="注册"/>
重置按钮(回到输入初始状态)
<input type="reset"/>
<input type="reset"/ value="撤销">
普通按钮(js点击事件用的比较多)
<input type="button" value="普通按钮"/>
图片提交
<input type="image" src="图片路径"/>
<input type="image" src="imgesug.png"/>
文件输入项:
<input type="file"/> 文件上传
表单的整合小案例：

效果图：

10、其他常用标签的使用
p:段落标签比 br 标签多换一行
b:加粗
s:删除线
u:下划线
i:斜体
pre:原样输出
sub:上标
sup:下标

=== css经常用===
div:自动换行
span:下一行显示

View Code

11、html头标签的使用
html两部分组成 head和body
在head里面的标签
title:表示在标签上显示的内容
<meta> 标签:设置页面的一些相关内容
　- <meta http-equiv="refre<sh" content="3;url=01-hello.html" />
<base>:设置超链接的基本设置
　- <base target="_blank" />//统一设置超链接的打开方式
link标签:引入外部文件
　- 引入css等文件

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5  6 <title>头标签的演示</title> 7 <base target="_blank" /> 8 </head> 9 <body> 10 <h1>头标签</h1> 11 <a href="01-hello.html">超链接1</a> 12 <a href="01-hello.html">超链接2</a> 13 <a href="01-hello.html">超链接3</a> 14 </body> 15 </html>

12、框架标签
<frameset>
- rows：按行进行划分
　-<frameset rows="80",*">
- cols：按列进行划分
　-<frameset cols="80",*">
<frame>
　- 具体显示的页面
** <frame name="lower_left" src="b.html">
frameborder=“yes”：是否显示框线,no不显示框线
frame：是 frameset分隔的一部分
noresize:使用者无法调节页面的大小
scrolling:是否有滚动条 yes有 no没有
注意：使用框架标签必须要把body主体部分去掉

<!--code解析-->
<frameset rows="80,*">    // 把页面划分上下两部分
　　<frame name="top" src="top.html"> // 上面页面
　　　　<frameset cols="150,*"> // 把下面部分划分成左右两部分
　　　　<frame name="lower_left" src="b.html"> // 左面
　　　　<frame name="lower_right" src="c.html"> // 右面
　　</frameset> 
</frameset>

案例效果图：

HTML常用标签差不多就这样了，具体参照w3school进行详细的学习。剩下的就是多练习多操作增加熟练度。

__EOF__

作　　者：Dilraba
出　　处：https://www.cnblogs.com/cao-yin/p/9778966.html
关于博主：编程路上的小学生，热爱技术，喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明：署名 - 非商业性使用 - 禁止演绎，协议普通文本 | 协议法律文本。
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！