HTML详细代码分析01
HTML的概念:
概念 :
HTML: 超文本标记语言作用:
需要将java在后台根据用户请求结果在浏览器中显示给用户。
在浏览器中数据需要使用有好的格式展示给用户。
HTML是告诉浏览器收到的数据使用什么样的数据组织形式进行显示。使用：
HTML标准文档规范
HTML标签
互联网的三大基石：
- 1.URL：统一资源定位符。（唯一的定位一个网络资源）
- 2.HTTP：超文本传输协议。（规范浏览器和服务器之间数据的交互的格式）
- 3.HTML：超文本标记语言。（有效的组织数据在浏览器端的显示）
HTML文档声明
文件名：.html或者.htm
HTML的标准文档结构：
顶层标签：html
头标签：head 一般是给浏览器使用
主体标签：body 给用户进行显示的数据
HTML标签语法： <标签名><标签名/>（双标签） <标签名/>（单标签）
<!DOCTYPE html><!--声明文档类型为HTML-->
<html lang="en">
<head>
<!--
主要是配置 浏览器显示数据的配置信息
例如字符编码，文档标题等
-->
</head>
<body>
<!--
给用户进行显示的数据
-->
this is my first html
</body>
</html>
head标签
使用键值对的形式: 键： name="" 值:content=""
关键字：keywords
网页描述：description
作者：author
跳转：http-equiv="refresh"
<!DOCTYPE html>
<html lang="en">
<head>
<!--head标签中主要配置浏览器的配置信息-->
<!--<meta charset="UTF-8"><!–网页解析编码格式配置（HTML5）：告诉浏览器使用指定的编码格式解析文档–>-->
<meta http-equiv="content-type" content="text/html" charset="UTF-8"><!--HTML4:文档编码格式设置-->
<title>HTML学习</title><!--网页标题标签：告诉浏览器使用什么标题显示网页-->
<meta name="keywords" content="HTTP,STX,html,学习"/> <!--网页关键字：用于在使用搜索引擎时查找到对应数据-->
<meta name="description" content="本网页是关于HTML学习的呀，超级棒的艾！"/><!--网页描述：放在网站名下的宣传信息-->
<meta name="author" content="Lx"/><!--网页的作者-->
<!--5秒后发生跳转-->
<meta http-equiv="refresh" content="5;url=http://v.qq.com/x/cover/71ielauv44ray7v/b00308r5mh7.html"/><!--网页自动跳转-->
</head>
<body>
this is my second html
</body>
</html>
文字标签
标题标签 :
h1~h6:会将其中的数据加粗显示,并且字体大小逐渐变小,标题自带换行功能.(块级标签)
属性:
align : center left right
水平线标签 :
hr : 会在页面中显示一条水平线,默认居中显示
属性 :
width="宽度" 设置水平线的长度 单位px
size="高度" 设置水平线的尺寸(竖直的高度) 单位px
color="颜色" 设置水平线的颜色 使用十六进制的三原色组成,也可以使用特殊英语
段落标签 :
p :
会将一段数据作为整体显示,主要进行css和js操作时比较方便,会自动换行(块级元素)
特点 :
段间距较大
换行符 :
br : 告诉浏览器在此位置换行
空格符 :
  : 告诉浏览器在此位置增加空格 (一个 表示一个字节)
权重标签 :
b : 将内容加黑显示
i : 将内容斜体显示
u : 将内容增加下划线显示
del : 增加中划线(过时的代码或数据)
以上标签不会自动换行,并且可以嵌套使用.
注意:
1.标签的属性对标签的功能进一步补充,可以由开发人员自由指定标签的属性值,来达到想要的显示效果
2.像素单位占据的是电脑屏幕的大小,百分比占据的是浏览器窗口的大小.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字标签学习</title>
</head>
<body>
<!--标题标签-->
<h1 align="center">今天天气真好,适合学习</h1>
<h2>今天天气真好,适合学习</h2>
<h3>今天天气真好,适合学习</h3>
<h4>今天天气真好,适合学习</h4>
<h5>今天天气真好,适合学习</h5>
<h6>今天天气真好,适合学习</h6>
<hr width="600px" size="20px" color="red" align="left"/> <!--水平线标签-->
<p>
人生有笑有泪，再浓烈的事情在时间的磨合下都会慢慢的变淡，<del>岁月流逝</del>，<br/>
会带你看更好的<b>风景</b>，让你遇见<u>更好的人，更好的事。</u> <br>
一只杯子，只有倒空了，才可以重新容纳水，生活，删繁就简才能更好地前行，<br>
我们没必要一味的停留在从前。<br>
</p>
<p>
生命走的再远也要回归原点，往事是用来回味的，今天是用来珍惜的，<br>
明天是用来期许的，人生路上，或交集，或擦肩，不曾改变的曾经牵过手的温暖。<br>
时光磨练人的心性，人到中年，于岁月已经隔着几重山水，终于明白，淡然的才是生命的最终归宿。<br>
人生不能彩排，每个清晨，都是一个新的开始，每一个黄昏，都是一个终结，<br>
忘掉昨天的不快乐，做一株向日葵，向着明媚微笑前行。<br>
</p>
<p>
一花一世界，一笑一尘缘，人生有相遇就有别离，花开花谢，缘起缘落，所有浮沉。<br>
有一天都会变成午后的那一窗风清云淡，而阳光依旧温暖，时间面前，一切终将释 文字：春暖花开。<br>
</p>
<i><b><u>与失去的时间相比，所有的失去都是一种赠与，无怨无悔</u></b></i>
</body>
</html>
显示效果:
图片.png
列表标签
列表标签 :
无序列表:
ul: type一般有disc（圆点）、circle（圆圈）、square（方块）、等！
li : 该标签书写列表内容,一个li标签代表列表中的一行数据
特点: 默认数据前有一个黑圆点
有序列表:
ol : type 值有 a i I 1 A
li : 该标签书写列表内容,一个li标签代表列表中的一行数据
特点:
会自动的给列表进行顺序编码,格式从小到大并且是连续的.
属性:
type :默认为 1
自定义列表 :
dl :
dt : 数据的标题
dd : 数据的具体内容,一个dd表示一条数据.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签学习</title>
</head>
<body>
<!--
演示特殊符号
< : 小于
> : 大于
-->
3<78>64 <!--纯数字大于小于不受影响--> <br/>
a<cd>b <!--系统会认为大于小于号是标签 需要转义--><br>
a<cd>b <br>
<h3>热门城市 : </h3>
<ul type="circle"><!--无序列表-->
<li>成都</li>
<li>重庆</li>
<li>厦门</li>
<li>上海</li>
<li>北京</li>
</ul>
<h3>爱好:</h3>
<ol type="a">
<li>打游戏</li>
<li>看电影</li>
<li>听音乐</li>
<li>逛街</li>
</ol>
<dl>
<dt>IT课程 : </dt>
<dd>Java课程</dd>
<dd>c语言课程</dd>
<dd>python课程</dd>
<dd>c++课程</dd>
<dt>热门景区城市:</dt>
<dd>广西</dd>
<dd>西安</dd>
<dd>洛阳</dd>
</dl>
</body>
</html>
显示效果为:
图片.png
图片标签
img:
src :
图片路径 :
本地资源路径: 一般本地资源路径可以使用相对路径即可
网络资源路径: 图片资源的URL地址
width:
设置图片的宽度,如果是单独设置,则在保证图片不图片失真的的情况下自动缩小或放大
单位可以是px或者百分比 默认是px
height:
设置图片的高度,如果是单独设置,则在保证图片不图片失真的的情况下自动缩小或放大
单位可以是px或者百分比 默认是px
title:
图片标题,鼠标放在图片上会显示
alt :
图片加载失败后的提示语
以上标签里 图片不会自动换行
注意 :
相对路径: 从当前文件出发查找到另外一个文件所经过的路径
如果是子目录,例如images里面,就用images/1.jpg
如果是上一级目录就是../1.jpg
绝对路径 : 从盘符开始查找文件的路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签学习</title>
</head>
<body>
<h3>img图片标签学习</h3>
<hr>
<!--使用本地资源 : 图片位于本地电脑中-->
<img src="img/1.jpg" height="200px" title="这是一个励志图片" alt="这是一张优美的图">
<!--如果在上一级目录下的图片-->
<img src="../imgs/4.jpg" height="200px"title="这是一个励志图片">
<img src="img/2.jpg" height="200px"etitle="这是一个励志图片">
<img src="img/3.jpeg" height="200px" title="这是一个励志图片" alt="这是一张优美的图">
<hr>
<!--使用网络资源: url图片地址-->
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4093623448,711716644&fm=26&gp=0.jpg" title="鞠经纬" alt="鞠经纬">
</body>
</html>
显示效果
图片.png
