<!DOCTYPE HTML>
声明：表示这是一个html文件，满足html5规范，这句话必须写到第一行
1、注释：在代码旁进行说明 语法：<!-- -->
2、网页：浏览网络信息的工具
本质：由html书写的一串代码
3、html：超文本标记语言
4、常用标签
1）文本标签：可以使用属性给文字设置样式 语法：<font></font>
属性：用于描述某个事物的特点
语法：属性名=“值” （多个属性使用空格隔开）
2）标题标签
<h1></h1> #黑体加粗，默认换行
<h6></h6>
3）段落标签
<p></p> #默认换行
特点：首行不会缩进，段落与段落之间默认换行
4）特殊符号
空格：
5）字体类型
倾斜：<i></i>
加粗：<b></b>
下划线：<u></u>
6）图像标签
<img src="图片路径" alt="为图片定义一串预备的可替换文本" width="宽度" height="高度" />
如果只设置宽或者高，那么图片可以成比例缩放
相对路径：相对于当前文件的位置，返回上一级：…/ ，进入下一级： / ，当前路
径：./(可默认不写)
绝对路径：以http或者https开头的都是绝对路径
7）a标签 超链接
#通过绝对路径去访问其他项目
<a href="https://www.baidu.com/">链接显示的文本</a>
#通过相对路径去访问其他项目
<a href="HelloWorld.html">跳转页面</a>
#通过锚点在同一个页面进行跳转
<a href="#font_id">回到顶部</a> font_id：为某个标签所命名的id
8）换行标签 单标签
<br/>
9）分割线
<hr size="" color="red" width="200" height="100" />
背景图片：background=""
背景颜色：bgcolor=""
行内元素、行列元素
Table常用属性
选择器：id选择器、类选择器、标签选择器
样式：内联样式、外联样式、行内样式
cellspacing="0"：单元格的间距
cellpadding="2"：边框线与文字内容的间距
align="center"：设置表格对于父元素的水平方向位置
border="1" ：边框宽度
width="20"：表格的总宽度
height="20"：表格的总高度
background=“”：表格的背景图片
bgcolor="red"：表格背景颜色
valign="top"：顶部对齐
colspan：跨列
rowspan：跨行
border-spacing：单元格间距
border-bottom：底边框
border-left：左边框
行列元素：独自占用一行，元素与元素之间会换行
行内元素：行内插入，元素与元素之间不会换行
布局
设计网页基本流程：
1、设计布局，搭建框架
2、使用代码实现框架部分
3、完善每个模块
4、调整样式
Css基础
1、CSS层叠样式：美化页面
2、使用css样式：需要在head里写style标签，css代码全部写到style标签中
3、id选择器：通过id选择页面的某个元素，然后设置其样式
# id{
css属性:值;
css属性:值;
}
4、元素/标签选择器：选择页面上所有的某类元素
标签名{
css属性:值;
css属性:值;
}
5、类选择器：选择一类需要设置相同样式的元素
.class{
css属性:值;
css属性:值;
}
6、组合选择器：将多个选择器使用，连接
# id,标签名,.class{
css属性:值;
css属性:值;
}
7、层级选择器：多个选择器之间选择空格连接，表示父子关系
选择器 选择器 选择器{
css属性:值;
css属性:值;
}
Css使用
1）内联样式：将样式写到head中的style标签中
p{
color: red;
}
2）外联样式：将css写进一个单独的css文件中，在需要的地方调用
<link rel="stylesheet" type="text/css" href="../css/day02.css"/>
3）行内样式：将css作为元素属性来写
<p style="color: blue;background-color:red;border-style: dotted;border-color: green;">sfdsfsfe</p>
行内>id>类>标签
内联、外联按照 id>类>标签，如果选择器相同，就近原则
常用属性
table设置倒角
四个参数：从左上开始，顺时针设置
border-radius: 5px 6px 7px 10px; #两个参数： 5px：左上、右下 10px：左下、右上
border-radius: 5px 10px; #一个参数：给所有的角设置半径
border-radius: 5px;
background-image:url(); 设置背景图片
background-size 宽 高
background-color 背景颜色
color 字体颜色
font-size 字体大小
border:soild 1px black; 边框
border-spacing 单元格间距
border-radius 单元格倒角
width 宽度
height 高度
cursor:pointer; 设置鼠标变小手
margin:0 auto; 标签相对页面居中
text-align:center 标签里的内容对齐方式
DIV属性
盒模型：盒子，页面上所有元素都可以看做一个盒子
外边距margin：元素与元素之间的距离
margin: 外边距，4参数顺时针，2参数上下、左右
内边距padding：内容与边框的距离
盒子的宽=宽度+内边距+外边距
border:1px solid black; #设置线宽
width:10px; #宽度
height:10px; #高度
margin:10px; #设置外边距
padding:10px; #设置内边距
float:left; #浮动
box-sizing:borde-box; #设置宽度不变，如果增加线宽或者内边距都压缩内容区
content-box #保持内容的宽高不变，如果添加内外边距，则会将盒子撑大
定位
绝对定位：相对于最近的有定位设置的父元素，如果没有这
样的父元素，那么就相对于body
position:absolute;
相对定位：相对于父元素
position:relative;
固定定位：相对于浏览器
position:fixed
其他Div常用属性
overflow:hidden; #当标签里内容溢出的处理方式hidden隐藏 scroll滚动条
float:left/right #浮动
line-height #设置字体行高，设置后字体默认居中
vertical-align:middle #设置图片的垂直对齐方式
text-decoration:none; #去掉超链接下划线 有线默认：underline
font-style:'weight' #设置字体倾斜
font-style:'italic' #设置文字不倾斜
text-indent:20px; #设置文字首行缩进
min-width:200px; #设置div最小宽度
min-height:200px;
font-family:"宋体";
font-decoration-color:rgb(142,20,20); #设置下划线颜色
vertical-align: middle; #图片垂直居中
line-height:50px; #文字垂直居中 (50px=行高)
a标签
下拉列表
<select>
<option>1</option>
<option>2</option>
</select>
有序列表
<ol>
<li>
</li>
</ol>
无序
<ul></ul>
文本域
<textarea name="" rows="10" cols="20"></textarea>
输入框
<input type="text" name="" id="" value="" />
密码
type='password
单选：radio 多选：checkbox
约束
数字：type = “number”
日期：date
邮箱：email
文件：file
2462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
