HTML基本语法:
标签分类:
开始和结束标签:<h1></h1>
自闭和标签:如:换行标签:<br/> ,水平分割线标签:<hr/>
块级元素:在页面中以块的形式展现,自己独占一行,后面的内容会自动换行。<p><hr><div>
行内元素:在页面中以行的形式套现,不会换行<b><i><u><span>
<div>:是一个通用的内容容器,没有特殊寓意,用来对其他元素进行分组,用于样式化相关需求
<span>:是一个同意的内容同期,没有特殊语义,一般用来编织元素以达到某种样式
特殊字符表示:
原意 等价字符
< <
> >
" "
' &aqos;
& &
空格  ;
HTML样式演示:
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式演示</title>
<style>
div {
/*显示边框*/
border: 1px solid pink;
/*宽度控制*/
width: 60%;
/*高度控制*/
height: 500px;
/*边框的外边距*/
margin: auto;
}
</style>
</head>
<body>
<div>第一个div</div>
</body>
</html>
效果展示:
HTML文本标签:
这里偷个懒,把图片偷过来了,别介意。
图片标签:img
属性:src 必需属性,显示图片地址
tittle属性 鼠标悬停时显示文本
alt 属性:图片不显示时替换文本
height属性 : 图片的高度
width属性: 图片的宽度
超链接标签:a
属性:href属性: 表示超链接的URL地址
target属性:页面的打开方式:self当前页面,blank新标签页。
图片标签超链接设置:只需把图片标签嵌套到超链接标签中即可
表单标签:form
属性:action属性 用于提交数据的路径
method属性 提交表单的方法(get和post)
autocomplete属性 是否记录补全(on和off)
表单项标签:
标签type属性:
<input type="text"/> 普通文本输入框
<input type="password"/> 密码输入框
<input type="email"/> 邮箱输入框
<input type="radio"/> 单选框,必须有相同的name属性值 value属性值默认提交数据,checked属性值默认选中
<input type="checkbox"/> 多选框,必须有相同的name属性值 value属性值默认提交数据,checked属性值默认选中
CSS选择器:
1.基本选择器:
.标签名{}
2.属性选择器:
[type=标签名]{}
3.伪类选择器:
标签名:link{} 表示未访问的状态
标签名:visited{} 表示已访问的状态
标签名:hover 表示鼠标悬浮的状态
标签名:active 表示已选中的状态
4.组合选择器:后代选择器 .标签名 后代标签名{}
分组选择器 标签名1,标签名2{}