目录
Html简介
超文本标记语言HTML:关心的是标签的语义,至于样式交给css控制即可
(假如一些字用h1标签包着,那代表他是内容标题,至于样式,css随便设置,所以html不管样式,只管它这一块代表的含义是什么)超文本:超出文本范畴
标记语言:由标签构成的语言。<标签名称>
操作思想:为了操作数据,都需要对不同的数据进行不同标签的封装(HTML),通过标签中的属性对封装的数据进行操作,标签就相当于一个容器,对容器中的数据进行操作,就是在不断改变容器的属性值(CSS)
Html发展历程:(三个版本:h4,xhtml,h5)
1999年html4.0 ——》2007年xhtml(本来w3c觉得html语法太松散,而xml扩展标记语言语法严格,所以想让程序员都用xml,但是怕一下子适应不了,所以出现了xhtml过度版本,但是还是没成功)——》2015 H5(WHATWG和W3C组织共同合作指定)
所以我们在编写Html网页的时候我们总要确定用的是哪个版本,这样才能更正确的使用标签,这是就出现了doctype去帮助浏览器解析这个网页采用的是哪个版本的html,不同的版本声明的是不同的doctype,放在html最上边 ,这就是文档声明,用于标识你用的是哪个版本的html,至于具体版本的文档声明想知道可以上网查一下,H5的文档声明是最简单的:<!DOCTYPE html>
Html文件说明
根标签html
根标签内部:分头部分和体部分
头部分:主要来放置页面的一些设置信息(标题title,html页面的编码方式meta标
签中的charset等)
meta标签是自结束标签:
<meta charset="utf-8"> 设置页面的字符编码
<meta name="keywords" content="关键词,关键词,关键词">
在搜索引擎中搜索什么样的关键词能够找到该页面
<meta name="description" content="页面的描述">
体部分:主要放置Html的页面内容,标签为body
图片的格式学习
图片的格式
JPEG(JPG)
- JPEG图片支持的颜色比较多,图片可以压缩,但是不支持背景透明
- 一般使用JPEG来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少,只支持简单的透明,支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多,并且支持复杂的透明(背景可以设置为透明)
- 可以用来显示颜色复杂的透明的图片
图片的使用原则:
效果不一致,使用效果好的
效果一致,使用占用大小中比较小的
标签语法
1. html文档后缀名 .html 或者 .htm
2. 标签分为
1. 围堵标签:有开始标签和结束标签。如 <html> </html>
2. 自闭和标签:开始标签和结束标签在一起。如 <img />、<br />、<hr />
3. 标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
错误:<a><b></a></b>
正确:<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
5. html的标签不区分大小写,但是建议使用小写。
普遍使用的标签
文件标签
构成html最基本的标签
html:html文档的根标签
head:头标签。用于指定html文档的一些属性。引入外部的资源
title:标题标签。
body:体标签
<!DOCTYPE html>:html5中定义该文档是html文档
文本标签
和文本相关的标签
(这些标签用css也能展现出他们的效果,但是我们关心的是html的语义,而不是他们的表现形式)
注释:<!-- 注释内容 -->
<h1> to <h6>:标题标签
* h1~h6:字体大小逐渐递减
<p>:段落标签(有间隔)
<br>:换行标签
<hr>:展示一条水平线
属性:
color:颜色
width:宽度(表示线的长度)
size:高度
align:对其方式
center:居中(默认)
left:左对齐
right:右对齐
<font>:字体标签
属性:
color:颜色
size:大小
face:字体
<center>:文本居中
em和i标签:斜体,i没有语义
strong和b标签:粗体,b没有语义
small:缩小字体,多用于合同细则,版权等地方
cite:表示参考的内容,书名,歌名,话剧名,电影名等
q:默认帮内容加引号
sup:幂次方标签 :比如2的2次方 2<sup>2</sup>
sub:下标 例如化学元素中的H2O H<sub>2</sub>O
del:内容会自动添加删除线
ins:内容自动添加下划线
pre:将内容原样表现标签
属性定义:
color:
1. 英文单词:red,green,blue
2. rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
width:
1. 数值:width='20' ,数值的单位,默认是 px(像素)
2. 数值%:占比相对于父元素的比例
列表标签
无序列表:ul里面加li,默认前面是实心原点,可以在ul中使用type属性改变,type属性有disc(实心圆点),square(正方形方块),circle(空心圆点)
如果想去掉前面的点,则使用css选中ul再设置list-style: none;去掉
有序列表:ol里面加li,至于前面的顺序样式,也是利用type属性控制
Type属性可以写1(默认值),a,A,I(大写罗马数字),i(小写罗马数字)
如果想去掉前面的排序标记,则使用css选中ul再设置list-style: none;去掉
有序和无序列表标签可以互相嵌套,可以将有序和无序嵌套在li中
定义列表:dl里面加dt和dd标签,dt指的是标题,也可以说是被定义的内容,而dd指的是对标题的描述
超链接标签
自带下划线和字体色为蓝色,属于行内元素
a标签总共两个作用:跳链接和跳指定的位置
属性:href控制跳转地址 target控制跳转网页打开方式 默认值_self 在当前窗口打开,如果是_blank,则新开一个窗口在空白页面打开
如果用a标签去包裹img标签,则图片会成为一个超链接点击跳转的按钮
跳转到指定位置:用#加上锚点位置名称,通常用于底部跳顶部,或者顶部跳底部,实现当前页面快速定位
<a name="dingwei">被定位的锚</a>
<a href="#dingwei">跳转定位位置</a>
如果这个href的值只写一个#号,则是跳转到当前页面的最顶部
这个name属性也可以定义在iframe中,这样跳转的时候,就会将内容展示到iframe页面
图片标签
img标签:
使用src属性指定图片路径
(./:代表当前目录 ../:代表上一级目录)
width,height指定图片宽高
alt是加载失败图片时的提示内容
img默认的大小为图片的分辨率
框架页iframe标签
iframe标签,页面中引入另外一个页面,属于行内块标签,设置宽高有效,且不占一整行
属性src引入另一个页面的地址:例如:https://www.baidu.com
表格标签
总诉
在HTML中,使用table标签来创建一个表格
在table标签中使用tr来表示表格中的一行,有几行就有几个tr
在tr中需要使用td来创建一个单元格,有几个单元格就有几个td
在表格中嵌套表格是在td中嵌套table,也可以嵌套其他的内容
td中的两个重要属性:
rowspan用来设置纵向的合并单元格,跨行
colspan横向的合并单元格,跨列
表格的一些样式
margin: 0 auto 表格在父元素内居中显示
table的属性:(下面写的是style里面的属性,如果是标签中的属性名称有点不同,效果是相同的)
border:边框宽度
height:表格高度
width:表格宽度
background-color(bgcolor):设置表格背景颜色
text-align:设置单元格中内容位置
margin:0 auto或者align:center;设置整个表格在父元素中居中显示
border-spacing:设置单元格之间的距离,如果指定为0,则单元格的线会合为一条
table中属性:
cellpadding:设置单元格内容与单元格边框的距离
cellspacing:设置单元格之间的距离(等同style中的border-spacing)
比如table与td同时设置了border:1px solid black
table和td边框之间默认有一个距离
通过border-spacing属性可以设置这个距离:border-spacing:0px
但是这样会让两个边框宽度合一,变成2px;这时候就可以用border-collapse,
border-collapse可以用来设置表格的边框合并变成1px,如果设置了边框合并,则border-spacing自动失效
两个小技巧:
隔行变色:even是奇数行变色,odd是偶数行变色,如果具体第几行就写数字
tr:nth-child(even){(注:tr为选中元素)
background-color: #bfa;
}
nth-last-child(odd)
和上面两个达到相同效果的就是
nth-last-of-type和nth-of-type跟上面两个用法是一样的
长表格
有一些情况下表格是非常的长的,
这时就需要将表格分为三个部分,表头,表格的主体,表格底部
在HTML中为我们提供了三个标签:
thead 表格的标题
tbody 表格的内容
tfoot 表格底部
这三个标签的作用,就来区分表格的不同的部分,增强可读性,他们都是table的子标签,
都需要直接写到table中,tr需要写在这些标签当中,而th和td写在tr当中
thead中的内容,永远会显示在表格的头部
tfoot中的内容,永远都会显示表格的底部
tbody中的内容,永远都会显示表格的中间
通过这三部分进行分组,让其耦合性降低,维护起来更方便
如果表格中没有写tbody,浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素
CSS无法通过table > tr 无法选中行 需要通过tbody > tr
<table> <thead> <tr> <th>编号</th> <th>姓名</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>张三</td> <td>100</td> </tr> <tr> <td>002</td> <td>李四</td> <td>80</td> </tr> </tbody> </table>
换行标签br
一个br标签表示一个回车,该标签不包裹任何内容,没有结束标签