概念:是最基础的网页开发语言
Hyper Text Markup Language 超文本语言
超文本:
超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
标记语言:
有标签构成的语言。<标签名称>如html,xml
标记语言不是编程语言
语法:
标签分为:
围堵标签:有开始标签和结束标签。如:<html></html>
自闭和标签:开始标签和结束标签在一起。如:<br/>
属性由键值对构成,值需要用引号(单双都可以)引起来
html的标签不区分大小写,但是建议使用小写
标签学习:
1,文件标签:构成html最基本的标签
html:html文档的根标签
head:头标签。用于指定html文档的一些属性。引入外部的资源
title:标题标签。
body:体标签
<!DOCTYPE html>:html5中定义该文档是html文档
2,文本标签:和文本有关的标签
<h1> to <h6>:标题标签
h1-h6:字体大小逐渐减小
<p>:段落标签
<br/>:换行标签
<hr>:展示一条水平线
<b>:字体加粗
<i>:字体斜体
相对路径
以.开头的路径
./:代表当前目录
../:表示上一级目录
3,列表标签:
有序列表:
ol:
li:
无序列表:
ul:
li:
4,链接标签:
a:定义一个超链接
属性:
href:指定访问资源的URL(统一资源定位符)
target:指定打开资源方式
_self:默认值,在当前页面打开
_blank:在空白页面打开
5,div和span:
div:每一个占满一整行。块级标签
span:文本信息在一行。行内标签,内联标签
6,表格标签:
table:定义表格
width:宽度
border:边框
cellpadding:定义内容和单元格的距离
cellspacing:定义单元格之间的距离。如果为0,则单元格的线会合成一条
align:对齐方式
tr:定义行
td:定义单元格
colspan:合并行
rowspan:合并列
th:定义表头单元格
caption:表格标题
7,表单标签:
概念:用于采集用户输入的数据。用户和服务器进行交互
form:用于定义表单。可以的定义一个范围,范围代表采集用户数据的范围
属性:
action:指定提交数据的URL
method:指定提交方式
分类:(主要学习两种)
get:
1,请求参数会在地址栏中显示。会封装到请求行中。请求参数在请求行中
2,请求参数大小有限制
3,不太安全
post:
1,请求参数不会在地址栏中显示。会封装到请求体中
2,请求参数大小没有限制
3,比较安全
表单项中的数据想要被提交:必须指定其name属性。
8,表单项标签:
input:可以通过type属性值,改变元素展示的样式
type属性:
text:文本输入框,默认值
placeholder:指定输入的提示信息,当输入框的内容发生变化,会自动清空提示信息
password:密码输入框
redio:单选框
注意:
1,要想让多个单选框实现单选效果,则多个单选框的name属性值必须一样
2,一般会给每一个单选框提供一个value属性,指定其被选中后提交的值
3,checked属性,可以指定默认值
checkbox:复选框
注意:
1,一般会给每一个单选框提供value属性,指定其被选中后提交的值
2,checked属性,可以指定默认值
label:指定输入想的文字描述信息:
注意:
label的for属性一般会和inputd的id属性值对应。如果对应了,则点击label区域,会让input输入框获取焦点
file:文件选择框
hidden:隐藏域,用于提交一些信息
按钮:
submit:提交按钮。可以提交表单
button:普通的按钮
image:图片提交按钮
src属性指定图片的路径
select:下拉列表
子元素:option,指定列表项
textarea:文本域
cols:指定列数
rows:默认多少行
css外部样式:
1,定义css资源文件。
2,在head标签内,定义link标签,引入外部的资源文件
css语法:
格式:
选择器{
属性名:属性值;
....
}
选择器:筛选具有相似特征的元素
分类:
基础选择器:
id选择器:选择具体的id属性值的元素,建议在一个html页面中id值唯一
语法:#id属性值{}
元素选择器:选择具有相同标签名称的元素
语法:标签名称{}
注意:id选择器优先级高于元素选择器
类选择器:选择具有相同的class属性值的元素
语法:.class属性值{}
注意:类选择器优先级高于元素选择器
扩展选择器:
选择所有元素:
语法:*{}
并集选择器:
选择器1,选择器2{}
子选择器:筛选选择器1元素下的选择器2
语法:选择器1 选择器2{}
父选择器:筛选选择器2的父类选择器1
语法:选择器1>选择器2{}
伪类选择器:
语法:元素:状态{}
如:<a>
状态:
link:初始化的状态
visited:被访问过的状态
action:正在访问状态
hover:鼠标悬浮状态
属性:
背景:background:(URL)
(在后面加上 no-repeat可以取消图片的重复)
注意
每一个属性需要使用;隔开,最后一对属性可以不加
9,盒子模型:控制布局
margin:外边距
padding:内边距
默认情况下,内边距会影响整个盒子的大小
box-sizing:border-box;设置盒子的属性,让width和height就是最终盒子的大小
float:浮动
left
right