HTML

HTML简介

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

基本语法

1、HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如

HTML 标签通常是成对出现的，比如 和

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页

HTML 文档包含 HTML 标签和纯文本

HTML 文档也被称为网页

常用标签

块元素: 前后换行,自占一行

可以嵌套行内元素,普通文本,块元素

行内元素:宽度由自身撑起

可以嵌套行内元素,普通文本

1. a 超链接标签

href 连接路径

相对路径:相对项目

title 当鼠标悬停再内容上时显示的提示字

target 打开方式

_self 本页面打开 默认

_blank 新页面打开

特点:

未访问:蓝色

已访问:紫色

自带下划线

行内元素

a 锚点|锚链接

1)先在页面的某个位置定点 标签上id值

2)a标签的href值=#+定点的id值 点击a标签跳转到定点所在位置

h* h1~h6 标题标签

块元素

根据权重的不同,字体大小会以此减小

特点:字体大小 加粗

align 块元素中内容的对其方式

left

right

center

p 段落标签

正常显示

块元素

div 块

块元素

正常显示

img 图像标签

src 图片地址

相对|绝对

alt 当图片无法正常显示时的提示字

title 当鼠标悬停再内容上时显示的提示字

width 宽度 px像素值

height 高度

border 变框宽度 默认黑色

html常用标签

html常用标签

html常用标签

html常用标签

html常用标签

html常用标签

回到顶部

无序列表

ul 无序

type 修改列表项标记

desc 实心圆点

circle 空心圆圈

square 实心方块

li 列表项

有序列表

ol 有序

type 修改列表项标记

a A i I 1

li 列表项

ul,ol直接子元素只能是li标签

li可以嵌套任意标签

我爱吃的水果

• 车厘子
• 草莓
• 芒果
• 1. 小柿子
  2. 番茄

我不喜欢吃的食物

1. 香菜
2. 香菜
3. 香菜

• 手机
• 手机
• 手机
• 手机

table 定义表格

tr 行

td 表格体单元格

th 表格头单元格 加粗居中

属性:

border 变框

bordercolor 变框颜色

align 对其方式

width 宽度

height 高度

cellspadding 单元格内边距

cellspacing 单元格外边距

bgcolor 背景颜色

style="border-collapse: collapse" 双线变单线

rowspan 跨行

colspan 跨列

样式

课程表

	星期一	星期二	星期三	星期四	星期五
上午	体育课	体育课	体育课	体育课	体育课
	体育课	体育课	体育课	体育课	体育课
	体育课	体育课	体育课	体育课	体育课
下午	体育课	体育课	体育课	体育课	体育课
	体育课	体育课	体育课	体育课	体育课
晚自习

表单

收集用户数据

form 表单标签

属性:

action 表单数据提交的位置

name 表单名字

method 提交方式 get|post

enctype 如果表单中有文件上传multipart/form-data

表单元素:

input type属性不同的值代表不同作用的表单元素

1.text 普通文本输入框

2.password 加密框

3.radio 单选框 一组内容只能选择一个 name属性相同为一组

4.checkbox 多选框 默认选中 checked

submit 提交

5.file 上传文件

6.hidden 隐藏框

select 下拉框

option 下拉框选项

selected 默认选中

textarea 多行文本域

placeholder 提示

required 必填

readonly 只读可以提交

disabled 禁用不能修改不能提交

maxlength 最大字符个数

常用属性 id name class

id定义前台元素唯一 js用的多

name 表单用的多 后台区分前台的唯一

class css用的多

value 定义表单元素的值

相亲信息表

名字:

银行卡密码:

性别: 男

女

爱好: 唱

跳

rap

生活照:

理想型:

温柔型

萝莉型

御姐型

交友宣言:

私有信息:

身高

体重

CSS

1.css层叠样式表

2.语法格式:

选择器{

样式->样式名字:值;

....

}

3.使用css方式:

1)行内样式表 style="样式" 只作用当前行

2)内部样式表 style标签对定义在head中,作用与当前html文档

3)外部样式表

样式表的优先级: 谁离元素近优先显示谁

div{

color:green;

}

基本选择器:

id选择器 #

根据标签的id属性值选中某个元素

标签选择器

根据标签名选中一组元素

类选择器 .

根据标签的class属性值选择一组元素

通用选择器 *

清除浏览器的默认样式

*{

padding:0;

margin:0;

}

优先级: id > class > 元素 > *

群组选择器: 选择多个元素 选择器1,选择器2...{样式}

/*清除浏览器的默认样式*/

*{

padding:0;

margin:0;

}

#div1{

background: blue;

}

.yellow{

background: yellow;

}

.green{

color: lightgray; /*字体颜色*/

}

div{

background: red;

}

#div2,p{

border:1px solid greenyellow;

}

/*后代选择器*/

/*.food li {

border: 1px solid red;

}*/

/*直接子元素*/

.food > li{

border: 1px solid purple;

}

/*相邻兄弟选择器*/

#div1 + div{

color: lightcoral;

}

/*普通兄弟选择器*/

#div1 ~ div{

color: palegreen;

}

.circle{

width: 200px;

height: 200px;

background:red ;

border-radius:100px;

}

/*鼠标悬停在元素上显示的颜色*/

.circle:hover{

background: #c81623;

}

.ol li:nth-child(2){

background: greenyellow;

}

嘿嘿

• 水果
  • 香蕉
  • 苹果
  • 梨

1. 蔬菜
   • 白菜
   • 油菜
   • 卷心菜
2. 肉
3. 水果

背景样式:

背景颜色 background-color

颜色的英文单词

十六进制值 #6个字符

三原色 rgb(0~255,0~255,0~255)

rgba(0~255,0~255,0~255) a是透明度 0~1

背景图片 background-image:url("")

背景图片是否重复 background-repeat:

背景的复合属性 background 值顺序可以改变,选择性的给值

文本样式:

颜色 color

水平方向对其方式 text-align 行内元素无效

text-decoration 文本样式 underline

行内元素: display:inline

块: display:block

行内块: display:inline-block; 行内和块的特点都有 能够设置宽高,默认宽度自己撑起

p{

/*块元素能够设置宽高*/

width:500px;

height:500px;

background: rgb(139,0,0);

background: rgba(139,0,0,0.5);

background-image: url("img/大叔.jpg");

background-repeat: no-repeat;

background-repeat: repeat-x;

background: url("img/大叔.jpg") no-repeat;

font-size: 30px;

color: greenyellow;

border:1px solid red;

text-align: right;

display: inline;

display: inline-block;

}

span{

width:500px;

height:500px;

background: rgb(139,0,0);

}

a{

text-decoration: none; /*没有*/

text-decoration: overline; /*没有*/

text-decoration: line-through; /*没有*/

}

div{

border:1px solid red;

text-indent: 100px;

text-indent: 2em;

}

哈哈哈

呵呵

嘻嘻嘻嘻嘻嘻嘻