HTML Table标签 Div属性 a标签

<!DOCTYPE HTML>

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

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值