HTML/CSS笔记

World Wide Web即全球广域网，也称为万维网，是一种基于超文本和HTTP的，全球性的，动态交互的，跨平台的分布式图形信息系统，是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的，易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组成一个互为关联的网络状结构。
HyperText Markup Language 超文本标记语言
”超文本“就是指页面内可以包含图片，连接，甚至音乐，程序等非文字元素。
HTML不是一种编程语言，而是一种标记语言，描述网页的语言
HTML使用标签描述网页中图片，文本，音乐，视频，超链接等
开发工具有：txt,EditPlus,webstorm,hbulier,idea

html规范

1.都是以开头结尾
2.包含头部分
3.包含主体部分
4.不区分大小写
5.可以不写尾标签，html5会自动默认不全代码

font标签

color：标签属性
face：字体样式
size：字体大小：1-7范围
颜色：
1.设置英文的颜色：red,green,pink,yellow,blue,black,purple
2.设置16进制颜色 以#开头：6位
R 00 G FF B 00
3.用3位来代替：#0f0
注释：<!-- 注释-- >

段落标记

< p>标签自带段落间距</ p>

标题

<h 1></h 1>
<h 2></h 2>
<h 3></ h 3>
…
<h 7></h 7>

水平线

<h&r></h r>
特殊字符：空格&nbsp ; 大于号&gt； 小于号&lt； 引号&quot； 权限符号&copy

图片

< imgsrc="…/img/1 .png" a l t=“找不到 图片”>

超链接

< a href=“链接地址” target="_blank"></ a>
如何两个页面跳转链接
< a herf="#a"></ a>
< a name=“a”></ a>
< a herf="#上一个网页地址"></ a>

表格标签

table
属性:border边框粗细
cellspacing：表示单元格之间的距离
cellpadding：表示内容距离单元格边框的距离
width:表格的宽度
height:表格的高度
bgcolor:背景颜色
background:设置背景图片
align:对齐方式
center：居中
left：左对齐
right：右对齐
tr:表示行
td：单元格

center标签，标签内的所有内容居中

其他标签：

sub：下标
sup：上标
span：放文字，给文字设置CSS样式，网页布局，不换行
div：块，网页布局，什么都能放，自带换行

列表

有序列表
type表示的类型：a A i I 1
< ol>
< li></ li>
< /ol>
无序列表
< ul>
< li type=“circle”:空心圆></ li>
< li type=“disc”:实心圆></ li>
< li type=“square”:实心方块></ li>
</ ul>

表单

< form action="" method=“get/post”>
表单必须写form标签，action表示表单提交的地址，method表示表单提交的方式
< input type=“text” maxlength="" value="">
type确定是什么元素 ，maxlength最多能输入的字符数量 value代表默认值
password：密码框
radio：单选框
checkbox：复选框
file：上传文件

下拉框

< select>
< option selected:表示默认选中>选项</ option>
</ select>

文本域

< textarea></ textarea>

头标签

head里的标签就是头标签
< meta>:设置页面的相关内容
属性有：name,keyword关键字，description网页内容，http-equiv属性，< base target="_blank">可以统一设置超链接的打开方式，link引入外部文件
refesh:< meta http-equiv=“refesh” content=“3”; url=“链接”/>刷新页面

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应 用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可 以配合各种脚本语言动态地对网页各元素进行格式化。css3.0 : 支持各种动画
使用CSS的好处：美化页面，方便，可维护性
层叠，一层一层的，强调的是优先级
样式表，很多的属性和属性值

选择器

选择器就是用来选择标签，配合CSS来进行网页美化
语法:style标签，必须写在head部分
CSS注释/ * * /

引入css

href：引入外部文件
rel：表示样式脚本
type：引入的文件类型
第一种引入方式： < link href="" rel=“stylesheet” type=“text/css”/>
第二种引入方式：
< style>
@import url(".css文件")
</ style>

类选择器

class选择器：语法：
.class的属性名｛
属性1：属性值1；
属性2：属性值2；
｝

id选择器

id选择器只能给一个页面中当唯一标签使用
语法：
#id的属性名｛
属性1：属性值1；
属性2：属性值2；
｝

优先级问题：id>class>标签

内联样式：样式写在style标签中

外联样式：样式写在CSS文件中，当前页面引用

行内样式：直接写在style属性

优先级：行内样式>内联样式>外联样式

复合选择器

两个或者两个以上的基础选择器通过不同的方式连接在一起

后代选择器

语法：
选择器1 选择器2…｛
属性1：属性值1；
属性2：属性值2；
｝
注意：后代选择器必须用空格隔开，可以通过空格一直延续下去

子元素选择器

选择器1>选择器2｛
属性1：属性值1；
属性2：属性值2；
｝

并集选择器

选择器1，选择器2，选择器3｛
属性1：属性值1；
属性2：属性值2；｝

交集选择器

标签类（ID）选择器名称｛
属性1：属性值1；
属性2：属性值2；｝

相邻兄弟选择器

选择器1+选择器2｛
属性1：属性值1；
属性2：属性值2；｝

通用选择器

选择器1~选择器2｛
属性1：属性值1；
属性2：属性值2；｝

伪类选择器

link:表示正常情况下的样式
必须要按照顺序设置：L V H A
a:link{
正常状态样式
text-decoration:none;
设置下划线样式
}
a:visited{
鼠标松开后，移开超链接之后的样式
}
a:hover{
鼠标放在超链接上的样式
}
a:active{
鼠标不松开的样式
}

盒子模型

盒子：我们网页上的元素，我们都可以把他们看做一个盒子
盒子：边框 ： border
内边距 ：padding
外边距: margin
作用：就是用来进行元素的定位 ：在网上上位置。
我们使用padding和margin来进行元素的定位。
padding: 改变盒子内容的位置:相当于盒子的位置
进行padding的定位：
4个方向： top bottom left right
margin: 改变盒子相对于网页边框或者其他盒子的位置
设置边框的颜色：border-top-color
设置边框的样式：border-top-style:solid实线/dashed虚线/double双实线
设置边框的粗细：border-top-width
简化：border：3px dashed green
内边框距离：
padding-top: 1cm;
padding-right: 3cm;
padding-left: 3cm;
padding-bottom: 1cm;
padding: 1cm 3cm 1cm 3cm; /上 右 下 左/
padding: 1cm 3cm 1cm; /上 左和右 下/
padding: 1cm 3cm; /上和下 左和右/
padding: 3cm;/距离一样/
magin跟padding设置的规则是一样的

浮动

网页正常情况下都属于普通文档流：一一堆放在一块
让标签浮动起来，形成浮动拼接的效果，现在网页大多使用浮动和盒子模型处理网页排版
float浮动
左浮动：left
右浮动：right
无浮动：none