HTML-CSS基础学习

Web概述

HTML代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。 CSS代表了样式，样式是网页的外观，从审美的角度，美化页面。 JavaScript代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。

书籍推荐：

《代码整洁之道》 《程序员修炼之道: 从小工到专家》 《重构：改善既有代码的设计》

HTML5概述

术语

WWW：World Wide Web（Web） HTTP：HyperText Transfer Protocol（超文本传输协议） URL：Uniform Resource Locator（统一资源定位符） HTML：HyperText Markup Language（超文本标记语言） XML：Extensible HyperText Markup Language（可扩展标记语言） XHTML：Extensible HyperText Markup Language（可扩展超文本标记语言）

HTML5新增元素

结构元素

header 页面或页面中某个区块的页眉，一般为导航信息 footer 页面或页面中某一个区块的页脚 section 页面中的一块区域，通由内容和标题组成，应用于部分模块 article 独立的内容块，可独立于页面其他内容使用，也可以应用于整篇文章 aside 非正文内容，独立于页面的主要内容 hgroup 标识整个页面或页面中的一个内容区块的标题进行组合 nav 作为页面导航的辅助内容 figure 标识一段独立的流内容，一般表示文档主体流内容的一个独立单元 figcaption 定义figure标签的标题

功能元素

hgroup 用于对整个页面或页面中一个内容区块的标题进行组合 figure 表示一段独立的流内容，一般标识文档主题流内容中的一个独立单元 video 定义视频 audio 定义音频 embed 用来插入多媒体，格式：MIDI,WAV,AIFF,AU,MP3等 mark 高亮显示文字 time 标识日期或时间 canvas 表示图形 output 表示输出 source 为媒介元素定义媒介资源 menu 表示菜单列表，当需要列出表单控件时使用该标签 ruby 表示ruby注释 rt 表示字符的解释或发音 rp 在ruby解释中使用，定义不支持ruby的浏览器所显示的内容 wbr 表示软换行 command 表示命令按钮 detail 表示用户要求的到并且可以得到的细节信息，可与summary元素配合使用 datalist 可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表 datagrid 表示可选数据的列表，以树形列表形式显示 email 表示必须输入E-mail地址的文本输入框 url 表示必须输入URL地址的文本输入框 number 表示必须输入数值的文本输入框 range 表示必须输入一定范围内数字值的文本输入框 Date Pickers 可供选取日期和时间的新型文本输入框

HTML5废除元素

可以使用CSS代替的元素

废除basefont,big,center,font,s,strike,u,tt s、strike可以用del替代 tt可以用css中的font-family替代

不再使用frame框架

不支持frame框架，包括frameset、frame、noframes 只保留内联框架iframe

只有部分浏览器支持的元素

废除applet、bgsound、blink、marquee applet可以由embed或object替代 bgsound可以有audio替代 marquee可以有js脚本替代

其他被废除的元素

使用ruby代替rb 使用abbr代替acronym 使用ul代替dir 使用form代替input和isindex结合 使用pre代替listing 使用code代替xmp 使用GUIDS代替nextid 使用text/plain MIME类型代替plaintext

HTML5新增属性

表单属性

autofocus 页面加载后元素会自动获得焦点 paceholder 用户输入时提示信息 form 声明属于表单 required 提交表单时，检测输入值不能为空 autocomplete 自动完成功能 on/off formaction 重置表单默认行为的新属性 image:width/height 设置图片的宽高 list与datalist结合 提供可供选择的选项 max、min和step 最大值，最小值，步长 pattern 正则表达式 multiple 允许输入域可选择多个值 fieldest disable属性 label:control 通过control可以访问表单元素 selectionDirection 选取文字的方向 正：forward 反：backward

连接属性

media 为a和area新增该属性，规定url的默认打开设备 area 新增hreflang、media、rel、type属性 link 新增sizes属性，规定链接资源尺寸 base 新增target属性 其他 ol 新增reverse属性，倒序 meta 新增charset属性，指定编码集 menu 新增type属性和label属性，label定义标注，type定义形式 style 新增scoped属性 script 新增async属性，指定脚本是否异步执行，仅适用外部脚本 HTML5 新增manifest，指向一个用于结合离线web应用API的应用程序缓存清单 iframe 新增sandbox、seamless、srcdoc属性，提高页面安全性，防止执行不信任操作

HTML5常用标签

head的子标签，位于文档头部，不包含任何内容，定义HTML文档的相关信息，描述文档的属性，可以提供有关页面的元信息，利于搜素引擎搜索和更新频度的描述和关键词

meta分为：HTTP标签部分(http-equiv)和页面描述信息(name)

http-equiv

可以利用其设定浏览器的一些信息，以正确显示网页 http-equiv:指定协议头类型，content：指定协议头类型的值

常用http-equiv类型： -content-type 用于定义用户的浏览器以何种方式加在数据，或以何种应用程序打开资源 <meta http-equiv="content-type" content="text/html; charset=uft-8"/> -refresh 指定页面的刷新或跳转的间隔时间和跳转的资源 url为空为刷新当前页面 <meta http-equiv="refresh" content="3;url=index.html"/> -expires 用于指定网页的缓存的过期时间 -set-cookie 用于设置Cookie，必须使用GMT格式指定Cookie的过期时间 <meta http-equiv="set-cookie" content="cookievalue=xxx;expires=Mon,12 May 2021 00:20:00 GMT"/>

name

页面描述信息有name和content属性指定。 name属性指定要描述的页面信息的类型，conten用来描述页面信息的值

常见页面信息的类型： -keywords 为搜索引擎提供的关键字列表 <meta name="keywords" content="key1,key2,..."/> -description 为搜索引擎提供网页主要内容的描述 <meta name-"description" conten="About it"/> -author 标明网页的制作者 -robots 用于提示搜素机器人哪些页面需要索引，哪些不需要索引 robots-content参数： -index 搜索页面 -noindex 不把页面展示在搜索结果中 -noimageindex 禁止搜索引擎索引页面上的图片 -none 页面将不背搜索，且页面上的连接不可以被查询 -follow 不管页面是否允许索引，页面上的链接可以被查询 -nofollow 页面上的链接不可以被查询 -all 文件将被检索，且页面上的链接可以被查询

常用标签

h1-h6:标题 br:换行 hr:分割线

特殊字符:&xxxx;

lt: 小于 gt: 大于 amp： & quot: 双引号 copy: 版权 reg： 已注册商标 trade： 商标美国 times： 乘号 divide： 除号

列表

无序列表：ul 有序列表：ol 定义列表：dl

li:type属性 -disc 实心圆 默认 -circle 空心圆 -square 实心方块

ol: type属性 -1 数字 默认 -a 小写字母 -A 大写字母 -i 小写罗马字母 -I 大写罗马字母 start属性:默认值是1，可以修改

dl: dt表示列表项 dd描述列表项

超级链接

链接跳转

跳转方式target值： _blank 新窗口打开 _self 当前窗口或框架中打开，默认值 _parent 父框架中打开 _top 在窗口主体重打开

文本链接

<a href="#" target="...">文本</a>

锚链接

文章太长,通过创建锚点方便跳转要指定锚点，如：目录

代码语言：javascript复制

<a name="head">锚点</a>
<a href="#head">跳转到锚点</a>

电子邮件链接

<a href="mainto:name@email">给xxx发邮件</a>

其他链接

下载链接或js脚本使用 <a href='name.file'>下载该文件</a> <a href="javascript;">js脚本链接</a>

表格 table

表格属性： border:表格边框长度，为空为没有边框

td,th属性： colspan：横跨水平单元格数量 rowspan：纵跨垂直单元格数量

表格标签： table 表格 tr 行单元 td 单元格 th 单元格标题，表头行使用 thead 表头分组 tfoot 表尾分组 tbody 表格主体分组，只有一个可以省略 colgroup 对列进行组合，以便格式化 caption 表格标题

HTML5的新特性和新规则

新特性

用于绘画的canvas 用于媒介播放的video 对本地离线存储更好的支持 新的特殊内容 新的表单控件

新规则

新特性应该基于HTML、CSS、DOM以及JavaScript 减少对外部插件的需求 更优秀的错误处理 更多取代脚本的标记 HTML5应该独立于设备 开发进程透明

HTML5开发工具

Dreamweaver CS Nodeped HBuilder Sublime Text WebStorm Visual Studio Code

HTML5表单

form标签

form标签用于常见提供用户输入信息的表单 action：指定提交的处理程序 method：指定提交的方式

HTML5中： 使用id替代name autocomplete：表单的自动填充功能，on/off novalidate：提交表单不进行验证

HTML5新增的input元素

HTML4中input元素

代码语言：javascript复制

单行文本框	<input type="text">
单选按钮		<input type="radio">
复选框		<input type="checkbox">
下拉列表		<select><option>
密码框		<input type="password">
提交按钮		<input type="submit">
重置按钮		<input type="reset">
普通按钮		<input type="button">
滚动文本框	<textarea>
图像按钮		<input type="image">
隐藏域		<input type="hidden">
文件域		<input type="file">

HTML5新增的input元素

提交表单时H5会自动检查输入格式是否正常

代码语言：javascript复制

邮箱文本框	<input type="email">
url文本框	<input type="url">
数值文本框	<input type="number">
range文本框	<input type="range">
日期选择器	<input type="date">
搜索文本框	<input type="search">
tel文本框	<input type="tel">
颜色文本框	<input type="color">

HTML5中新增的表单元素

datalist

可以为文本框提供选择的列表，也可以由用户自己输入，需要绑定文本框的list为datalist的id

代码语言：javascript复制

<input type="text"  list="editor" name="myEditor" id="myEditor">        
<datalist id="editor">
    <option value="DW"></option>
    <option value="VSCode"></option>
    <option value="Sublime"></option>
</datalist>

keygen

密钥对生成器，用户提交表单时，会生成两个键，私钥存储在客户端，公钥发送到服务器，公钥可以用来验证用户的客户端证书。

output

用于浏览器中显示计算结果或脚本输出（需要js辅助）

代码语言：javascript复制

<output name="result" for="a b" id="result"></output>

HTML5画布

HMTL5音频视频与本地存储

离线应用和Web Workers

Geolocation地理位置

CSS3

CSS3概述

CSS结合DIV可以方便地控制页面布局 整个网站可以统一风格，只要整个网站使用统一的CSS文件 网站的风格维护起来简单，只需要修改对应的CSS文件 浏览器的页面更友好 开发与维护的成本降低 页面性能提高 CSS存在继承关系，就近原则使用CSS属性

CSS基本语法

选择符 属性 属性值

代码语言：javascript复制

selector{
	property1:value;
	property2:value;
	propertyN:value;
}

CSS使用方式

内嵌方式

代码语言：javascript复制

<a style="CSS">
<p style="CSS">

内部样式表

代码语言：javascript复制

<head>
	<style>
		CSS
	</style>
</head>

使用标签链接外部样式表

href为css文件路径，link可以引入其他资源文件，跟页面同时加载

代码语言：javascript复制

<head>
	<link href="CSS_href" rel="stylesheet" type="text/css"/>
</head>

使用CSS的@import标记导入样式表

url为css路径，只可以引入css文件，页面加载完成后才加载css文件

代码语言：javascript复制

<head>
	<style>
		@import url("CSS_adr");
	</style>
</head>

CSS3元素选择符

通配选择符 *

代码语言：javascript复制

所有标签都具有属性
*{
	property:value;
}

类的后代才具有属性
.myclass *{
	property:value;
}

类型选择符 HTML选择符

代码语言：javascript复制

HTML标签设置对应属性
p{
	property:value;
}
a{
	property:value;
}

ID选择符

代码语言：javascript复制

指定id设置对应属性
#my_ID{
	property:value;
}

类选择符 .

指定类设置对应属性

代码语言：javascript复制

.classname{
	property:value;
}
类型选择符.classname{
	property:value;
}

CSS3关系选择符

包含选择符

只有存在包含关系(包括子类)对应的标签才设置属性

代码语言：javascript复制

p em{
	property:value;
}

<p><em>包含选择符</em></p>

子选择符 >

E>F中F仅仅是E的子元素，其他的子代不包含这内

代码语言：javascript复制

p>em{
	property:value;
}

<p><em>子选择符</em></p>

相邻选择符

只有 相邻的标签设置属性

代码语言：javascript复制

h1 p{
	property:value;
}
<h1>h1</h1>
<p>p1相邻</p>
<p>p2不相邻</p>

兄弟选择符 ~

只要~后的标签都设置属性

代码语言：javascript复制

h1~p{
	property:value;
}
<h1>h1</h1>
<p>p1相邻</p>
<p>p2不相邻</p>

CSS3属性选择符

正则选择符

代码语言：javascript复制

E[att] 具有att属性的E元素
E[att="val"] 选择具有且att值等于val的E元素
E[att~="val"] 选择具有属性值为使用空格分隔的且att包含val的E元素
E[att^="val"] 选择具有att且以val开头的E元素
E[att$="val"] 选择具有att且以val结尾的E元素
E[att*="val"] 选择具有且att包含val的E元素
E[att|="val"] 选择具有att且以val开头并用连接符'-'分隔属性的E元素

CSS3伪类选择符

语法：已定义好的对象

代码语言：javascript复制

seletor:pseudo-class{
	property1:value;
	propertyN:value;
}

常见伪类选择符

代码语言：javascript复制

a标签：
:acitve			将样式添加到被激活的元素
:foces			将样式添加到被选中的元素
:hover			当鼠标悬浮这元素上方时，向元素添加样式
:link			将样式添加到未访问的元素
:visited		将样式添加到已被访问过的元素
:first-child	将样式添加到元素的第一个子元素
:lang			设置元素使用特殊语言的内容的样式

p标签：
p:empty			选择没有子元素的每个p元素
p:ratget		选择当前活动的p元素
:not(p)			选择非p元素的每个元素
....

表单：
:enabled		控制表单控件的可用状态
:disabled		控制表单空间的禁用状态
:checked		单选框或复选框被选中

CSS伪元素选择符

使用定义的伪元素设置一些特殊的字体格式

代码语言：javascript复制

::after			用来跟content属性一起使用，设置这元素后发生的内容
::before		用来跟content属性一起使用，设置这元素前发生的内容
::first-letter	设置元素内的第一个字符的样式，适用于块元素，
				内联元素使用时，需要设置元素的height或width或设置position属性为absolute或设置display属性为block
::first-line	设置元素内的第一行字符的样式，使用于块元素,内联元素使设置于first-letter一样

::selection		设置浏览器默认的背景颜色和文字颜色
::placeholder

CSS3样式属性

字体属性

代码语言：javascript复制

font-style			字体样式 normal 正常, italic 斜体,  oblique 倾斜
font-variant		是否为小型的大写字母 	normal 正常, small-caps 小型
font-weight			字体的粗细，normal 正常, lighter 细体, bold 粗体,bolder 特粗体
font-size			文本的字号，absolute-size 根据对象字号调节,relative-size 相对于父元素调节,length 文字大小，percentage 百分比表示字号
font-family			文本的字体，多种字体逗号隔开,字体多单词双引号括起来
font-stretch		文字是否横向拉伸变形，normal,ultra-condensed,extra-condensed,condensed
font-size-adjust	对象的aspect，用以保持首选字体的x-height

font：font-style、font-variant、font-weight、font-size、font-family	

文本和文本装饰属性

文本属性

代码语言：javascript复制

text-transform 		文本大小写
white-space			空格的处理方式
tab-size			制表格的长度
overflow-wrap		当内容超过指定容器的边界时是否断行
word-break			对象内文本的字内换行行为，默认normal，允许字内换行
text-align			内容的水平对齐方式
text-align-last		块内最后一行或者被强制打断的行的对齐方式
text-justify		调整文本使用的对齐方式
word-spacing		单词直接的间距
letter-spacing		字符之间的间距
text-indent			文本的缩进
vertical-align		内容的垂直对齐方式
line-height			对象的行高

文本装饰属性

代码语言：javascript复制

text-decoration-line	文本装饰线条的位置
text-decoration-color	文本装饰线条的颜色
text-decoration-style	文本装饰线条的形状
text-decoration-skip	文本装饰线条略过的部分
text-underline-position	文本下画线的位置
text-shadow				文本的阴影及模糊效果
text-decoration			复合属性

背景属性

代码语言：javascript复制

background-color		背景颜色
background-image		背景图像
background-repeat		背景图像如何铺排填充
background-attachment	背景图像随着对象内容滚动或者固定
background-position		背景图像位置
background-origin		背景图像显示的原点
background-clip			背景向外剪裁的区域
background-size			背景图像的尺寸大小
background				复合属性

边框属性

边框颜色

代码语言：javascript复制

border-top-color		上边框颜色
border-right-color		右边框颜色
border-bottom-color		下边框颜色
border-left-color		左边框颜色
border-color			复合属性 参数（all；上下左右；上下、左右；上、左右、下）

边框样式

代码语言：javascript复制

border-top-style		上边框样式
border-right-style		右边框样式
border-bottom-style		下边框样式
border-left-style		左边框样式
border-style			复合属性 参数（all；上下左右；上下、左右；上、左右、下）
取值：
-none	无边框
-hidden	隐藏边框
-dotted 点线边框
-dashed	虚线边框
-solid  实现边框
-double 双线边框
-groove	3D凹槽边框
-ridge	菱形边框
-inset	3D内嵌边框
-outset 3D凸边框

边框宽度

代码语言：javascript复制

border-top-width		上边框宽度
border-right-width		右边框宽度
border-bottom-width		下边框宽度
border-left-width		左边框宽度
border-width			复合属性 参数（all；上下左右；上下、左右；上、左右、下）

圆角边框

代码语言：javascript复制

border-top-left-radius		边框左上角圆角半径
border-top-right-radius		边框右上角圆角半径
border-bottom-right-radius	边框右下角圆角半径
border-bottom-left-radius	边框左下角圆角半径
border-radius				复合属性 参数（all；上下左右；上下、左右；上、左右、下）

边框阴影

代码语言：javascript复制

box-shadow: h-shadow v-shadow blur spread color inset;
-h-shadow	必需，水平阴影位置，允许负值
-v-shadow	必需，垂直阴影位置，允许负值
-blur		可选，模糊距离
-spread		可选，阴影尺寸
-color		可选，阴影颜色
-inset;		可选，将外部阴影改为内部阴影

图像边框

代码语言：javascript复制

border-image-source 	用于绘制边框的图像的位置
border-image-slice	 	图像边界向内偏移
border-image-width	 	图像边界的宽度
border-image-outset	 	指定这边框外部绘制的量
border-image-repeat 	用于设置图像边界的平铺方式
border-image			复合属性
border-image: source slice width outset repeat;

定位属性

代码语言：javascript复制

position 	对象的定位方式 static 无特殊定位,relative 相对定位对象不可层化,absolute 绝对定位对象可以层叠
z-index		对象的层叠顺序 auto表示遵循父元素的定位，自定义数值：无单位的整数值，可为负数，值大会覆盖值小的对象，相同值先声明的显示
top			对象参照相对物相对顶边界向下偏移的位置。auto表示无特殊定位；自定义数值：百分比或长度，只有position取值为absolute或relative时生效。
right		对象参照相对右边界向左偏移的位置，auto类似top
bottom		对象参照相对上边界向左偏移的位置，auto类似top
left		对象参照相对左边界向左偏移的位置，auto类似top
clip		对象的可视区域，区域外的部分是透明的。auto表自动；shape表按照形状定义显示

布局属性

代码语言：javascript复制

display属性 		用来确定页面元素是否显示以及显示方式，不可继承
float属性		用来定义元素是否浮动以及浮动方式
clear属性		用来定义不允许有浮动对象的边
visibility属性	用来确定元素是否显示，不可继承
overflow属性		复合属性，指对象处理溢出内容的方式
overflow-x属性	指明如果溢出元素内容区域的话是否对内容的左右边缘进行裁剪
overflow-y属性	指明如果溢出元素内容区域的话是否对内容的上下边缘进行裁剪
overflow
-visible 	不裁剪内容，可能会显示这内容框外
-hidden 	裁剪内容，不提供滚动机制
-scoll		裁剪内容，提供滚动机制
-auto		如果溢出，则赢提供滚动机制
-no-display 如果内容不适合内容框，则删除整个内容
-no-content	如果内容不适合内容框，则隐藏整个内容	

列表属性

代码语言：javascript复制

list-style-type属性	用来定义列表项的现实符号，可继承
-disc			实心圆
-circle			空心圆
-sqiare			实心方块
-decimal		阿拉伯数字
-lower-roman	小写罗马数字
-upper-roman	大写罗马数字
-lower-alpha	小写英文字母
-upper-alpha	大写英文字母

list-style-position属性 	用来定义项目符号这列表中显示的位置，可以继承
-outside	项目符号放置这列表项文本以外
-inside		项目符号放置这列表项文本以内

list-style-image属性 用来定义代替列表项符号的图像

复合属性：
list-style:list-style-type list-style-position list-style-image;

光标属性

代码语言：javascript复制

cursor属性 设置光标的现实图形
-crosshair	十字准线
-pointer|hand	手形
-wait			表或沙漏
-help			问号或气球
-no-drop		无法释放
-text			文字或编辑
-move			移动

n-resize		向上改变大小
s-resize		向下改变大小
e-resize		向右改变大小
w-resize		向左改变大小
ne-resize		向上右改变大小
nw-resize		向上左改变大小
se-resize		向下右改变大小
sw-resize		向下左改变大小

CSS3页面布局

概述

盒子和DIV

盒子：content（内容） padding（边框） border（填充） margin（间隔） width/height

position

overflow

display

float

clear

页面布局

DIV浮动

实用技巧

CSS hack

主流的浏览器

IE、Firefox、Safari、Chrome、Opera

CSS hack的分类

CSS属性前缀法

选择器的前缀法

IE条件注释法

JavaScript基础

JavaScript对象

DOM编程

AJAX

jQuery

http html5 html css ruby

0 人点赞