学习ＨＴＭＬ的内容总结

最新推荐文章于 2021-08-23 19:17:50 发布

yb1887

最新推荐文章于 2021-08-23 19:17:50 发布

阅读量316

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yb1887/article/details/79764821

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习ＨＴＭＬ的内容总结

　　HTML5本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术。作为未来前端开发技术的潮流和风向标，HTML5绝对不容忽视。自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

　　为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位等。我在学习的时候很多以前的元素在html5就不支持了，所以在学习的过程中，要多去练，多查，多记，与别人多交流。

一．知识点总结

　　HTML:全称:hyper Text Markup Language:超文本标记语言

超文本标记:

针对字体的颜色,大小

针对图片,动画,音频,视频等等进行操作!

１．HTML语言的结构

<html>

<head> 编码规范的(gbk/utf-8) -à头文件标签

</head>

<body>

html主体部分:这些内容最终会在浏览器中显示

</body>

</html> -à有标签体的标签

２．HTML结构的解释

html:根标签-à标签体中会很多子标签

head:头文件

body:网页的主体部分,会显示内容

３．文本标签

标题标签: h1~h6

水平线标签:hr

换行标签<br/>

段落标签:p

段落缩进:blockquote

上下标标签:sup和sub

原样输出标签:pre

字体标签:font

居中标签:center

４．图像标签

图像标签:img 空标签体

<img/>

属性:

src:链接到的资源图片

width:图片的宽度两种方式:一种指定px(像素) 第二种:百分比

title:悬停状态,会显示文字

alt:当图片失效的时候,用来解释说明该图片

height:图片的高度

转义字符:

空格: 注意事项(分号一定要带上)

<: < ; (letter than)

>:>(greater than)

注册商标:® ®

表格标签

５．表单标签

作用:就是采集用户输入的数据

应用场景:

6.CSS使用方式

1) 行内样式 <input style=”书写样式” />

弊端:不利于维护(style属性和html标签混合在一块)

2) 内部样式

在head标签体中,书写style标签

书写样式;

</style>

讲课(习惯使用这种方式)

3) 外部样式

A:创建一个独立一后缀名为.css结尾的css文件

选择器{

书写样式

}

B:导入外部css文件

书写:<link href=”xx.css” rel=”stylesheet”/>

７．CSS的语法

选择器(id选择器,类选择器,标签选择,并集选择器,交集选择器,通用选择器){

CSS属性:CSS的属性值; 分号可以省略,建议永远给出分号

CSS属性(字体,背景,边框,背景图片的起始位置…(大小,颜色,边框的样式,边框的尺寸left/center/right…)

}

８．CSS的选择器

选择器的分类:

ａ．标签选择器(最普通一种方式)

书写格式:

标签名称{

CSS属性:css属性值;

}

ｂ． id选择器

在标签中一定要给定一个id属性,并且指定id属性值

书写格式:

#id属性值{

书写样式;

}

注意事项:

1) 一个标签同时被标签选择和id选择器选中,那么id选择器的优先级要高于标签选择器

2)在同一个html页面中,不要给多个标签指定同名id属性,如果指定同名id属性值,那么js的时候,获取标签对象的时候,获取不到:getElementById(“id属性值”) ;

ｃ．类选择器

在一个标签中使用类选择器,要指定一个属性:class属性

书写格式:

.class属性值(inputCls){

书写样式;

}

注意事项:

在同一个页面下,多个标签可以指定同名的class属性

　ｄ．并集选择器(同时选中多个标签)

选择器1,选择器2,…{

书写样式;

}

e:交集选择器

书写格式:

选择器1 选择器2 选择器3{

书写样式;

}

ｅ．伪类选择器

伪类表示一种状态:超链接标签a的几种状态

link:鼠标没有访问过的状态

hover:鼠标经过的状态

active:鼠标激活状态(鼠标点击了,但是没有松开的状态)

visited:鼠标访问过的状态(已经点击了,并且松开的状态)

书写格式:a:四个状态{….}

显示的效果顺序:link visited hover active

９．CSS属性

１．CSS文本属性

text-decoration：值；文本下划线的设置 none没有下划线 underline下划线 overline上划线 line-through穿过文本的线

color：值；字体颜色的设置

text-height：值；设置行高

text-align：值；设置对其方式

letter-spacing：值；字符间距

word-spacing：值；字间距（默认两个为一个单词）

２．CSS字体属性

font-family：值；设置字体

font-size：值；设置字体大小

font-style：值；设置字体样式 normal标准样式 italic斜体

font-weight：值；设置字体粗细 normal标准样式 bold适当加粗 bolder更粗 lighter更细 100 200 300

简写样式font：style weight size family；必须按此样式书写例如font：italic bold 30px “宋体”；

color：值；指设置字体颜色

３．CSS背景属性

background-color：值；设置背景颜色

background-image：url（图片位置）；设置背景图片

background-repeat：：值；设置图片是否重复

repeat x轴，y轴都重复 no-repeat不重复 x-repeat水平方向重复 y-repeat竖直方向重复

background-position：值；设置图片的位置

图片的三种位置top content bottom 图片在浏览器中的位置left center right

简写样式background：color url（） repeat position；例如background：black url（） no-repeat top center；

４．CSS列表属性

list-style-image：url（图片路径）；可以设置有序或无序列表前的图片

５．CSS表格属性

border-left-color：值；设置左边框颜色

border-right-color：值；设置右边框颜色

border-top-color：值；设置上边框颜色

border-bottom-color：值；设置下边框颜色

简写属性border-color：值值值值；默认顺序为上右下左（某一边框未设置则会取对边颜色）

border-left-width：值；设置左边框宽度

border-right-width：值；设置右边框宽度

border-top-width：值；设置上边框宽度

border-bottom-width：值；设置下边框宽度

简写属性border-width：值值值值；默认顺序为上右下左

border-left-style：值；设置左边框样式

border-right-style：值；设置右边框样式

border-top-style：值；设置上边框样式

border-bottom-style：值；设置下边框样式

简写属性border-style：值值值值；默认顺序为上右下左 dotted点状 solid实线 double双实线 dashed虚线 none无边框

整体的简写属性border：width style color；必须按照此顺序例如border：1px dotted black；

width：值；边框宽度

height：值；边框高度

６．CSS浮动

float：值；使快标签一条线排列 left左浮动 right右浮动

clear：值；设置元素左右师傅可以有浮动

none默认值左右都允许有浮动 left不允许左边有浮动 right不允许右边有浮动 both左右两边都不允许有浮动

display：值；规定元素应该生成的框的类型

none不会被显示 block左右两边带有换行符 inline默认属性前后不带有换行符

１０．CSS框模型

margin-top：值；上外边框宽度

margin-bottom：值；下外边框宽度

margin-left：值；左外边框宽度

margin-right：值；右外边框宽度

简写属性margin：值值值值；默认顺序：上右下左

padding：值；内边框宽度

padding-top：值；上内边框宽度

padding-bottom：值；下内边框宽度

padding-left：值；左内边框宽度

padding-right：值；右内边框宽度

简写属性padding：值值值值；默认顺序：上右下左

yb1887

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习ＨＴＭＬ的内容总结

学习ＨＴＭＬ的内容总结　　HTML5本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术。作为未来前端开发技术的潮流和风向标，HTML5绝对不容忽视。自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。　　为了更...
复制链接

扫一扫