HTML Table标签 Div属性 a标签

<!DOCTYPE HTML>

声明：表示这是一个html文件，满足html5规范，这句话必须写到第一行

1、注释：在代码旁进行说明语法：
2、网页：浏览网络信息的工具
本质：由html书写的一串代码
3、html：超文本标记语言
4、常用标签
1）文本标签：可以使用属性给文字设置样式语法：
属性：用于描述某个事物的特点
语法：属性名=“值” （多个属性使用空格隔开）
2）标题标签

<h1></h1>   #黑体加粗，默认换行
<h6></h6>

3）段落标签

<p></p>      #默认换行
特点：首行不会缩进，段落与段落之间默认换行

4）特殊符号

空格：&nbsp;

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