<!DOCTYPE html> //首行声明
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--
水平分割线 <hr> width 1.百分比 2.px
align 对齐方式 left right center
size 水平线粗细
-->
<meta charset="utf-8">
<tilte>标题和水平线</tilte>
</head>
<body bgcolor="pink" text="blue"></body>
<p>文本内容</p>
<hr width="50%" size="5">
<hr width="500px" size="10">
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落和换行</title>
</head>
<!--
段落标签<p></p>
align 对齐方式 left(default) right center justify(两端对齐)
换行标签<br>
-->
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<!--
列表
无序列表 <ul><li></li><li></li></ul>
常用属性 type 列表图标 square(实心方块) circle(空心圆) disc(实心圆.default) 有序列表<ol><li></li><li></li></ol>
常用属性 type 列表图标 1数字序号(default) a小写字母 A大写字母 i小写罗马字母 I大写罗马
-->
<body>
<h2>无序列表</h2>
<ul type="square">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<h2>有序列表</h2>
<ol type="i">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span</title>
</head>
<!--
div便签
层,块级元素,标签会自动换行,常用于布局
常用属性: align div中元素的内容对齐方式
span标签
块,行内元素,标签不会自动换行
-->
<body>
<div>层,块级元素,标签会自动换行</div>
<div>高度取<br>决于内容</div>
<div align="center">
常用于布局
</div>
<span>写多少,占用多少宽度</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式化标签</title>
</head>
<!--
font 设置字体相关属性
color(颜色名称,rgb,十六进制) size(1-7) face(字体)
pre 定义域格式化的文本 保留文本原始格式 <pre></pre>
粗体 <b></b> <strong></strong>
斜体 <i></i>
下划线 <u></u>
删除线 <del></del>
下标 <sub></sub>
上标 <sup></sup>
-->
<body>
你好
<font color="red" size="5" face="楷体">你好</font>
<pre>hello
world
</pre>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签</title>
</head>
<!--
<a href="绝对路径或者相对路径/网络路径">跳转链接名称</a> //原窗口打开 _self(default)
<a href="路径" target="_blank">链接名称<a> //新窗口打开
-->
<body></body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<tilte>a标签锚点的实现</tilte>
</head>
<!--
1.利用a标签的name属性
2.利用其他标签的id属性
-->
<body>
<a name="here">here</a>
........
<p id="there">there</p>
........
<a href="#">回到顶部</a>
<a href="#here">回到here</a>
<a href="#there">回到there</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>image</title>
</head>
<!--
img 行内标签,不会自动换行
必须属性 src 被引入图片地址
常用属性 title 当鼠标悬停时显示的文字 alt 当图片加载失败显示的文字
width height (只修改一个时默认等比例变化) border 边框 align 对齐方式
<img src="路径.jpg" >
-->
<body></body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<!--
表格
table 表格
tr 行(可包含多个tr或th)
td 标准单元格
th 表头单元格(具有标题效果,字体加粗,居中显示)
table常用属性 border 边框 width
width:像素值或百分比,参考的是上级元素的宽度,如果上一次元素未设置,则参考屏幕宽度
align (left,right,center)
tr常用属性
align(每行文本内容对齐方式)
valign(垂直对齐方式 top,bottom,medium)
bgcolor 行的背景色
合并单元格
<td>的colspan和rowspan分别规定单元格的行数和列数
纵向合并rowspan
横向合并cowspan
-->
<body>
<table border="1" align="center" width="500px" height="300px" style="border-collapse:collapse;">
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center" valign="top">
<td>101班</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
<td>19</td>
<td>男</td>
</tr>
<hr>
<tr align="center">
<td rowspan="2">101</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td></td>
<td>李四</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
<td>19</td>
<td>男</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<!--
所有标签都有id属性,用来标识元素的唯一性
name属性, 提交数据时的参数名
style属性 ,设置元素的行内样式(具体的样式)
class属性, 设置元素的样式名
表单 form:用于向服务器传输数据,form是块级元素,其前后会产生折行
必须设置 name属性值
常用属性:action(提交地址) method(提交方式 GET,POST,不区分大小写)
target 提交数据时打开窗口的方式 _self 当前窗口 _blank 空白窗口
GET请求与POST请求的区别:(POST请求需要服务器的支持)
1.GET请求时参数会跟在浏览器地址栏的后面,而POST请求不会(数据存放在请求体中)
2.GET相对于POST请求而言,不那么安全
3.GET请求传递的数据长度是有限的,而POST请求基本没有什么限制(长度与服务器相关)
4.GET请求比POST请求快(2倍左右)
5.GET请求有缓存(会将数据存放在浏览器中,即本地磁盘中),而POST请求无缓存
-->
<body>
<form action="http://www.baidu.com" method="get" target="_blank">
姓名:<input type="text" name="uname"/>
<button>提交</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input标签</title>
</head>
<!--
input标签
type 元素类型[[text,value,password,radio,checkbox,file,hidden,date],[button,submit,reset]]
disabled 禁用标签
readonly,maxlength
注意:
1.单选框,复选框需要通过name属性设置为一组
2.如果是上传文件的表单,则表单需要设置一个属性ebctype="multipart/form-data",
提交方式为POST请求
3.没有name属性则无法提交数据!!!
-->
<body>
<form action="../" method="POST">
文本框:<input type="text" value="zhangsan" maxlength="10" disabled=disabled/><br/>
文本框:<input type="text" value="zhangsan" readonly/><br/>
密码框:<input type="password"/><br/>
单选框:<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女
复选框:<input type="checkbox" value="1" name="test">1
<input type="checkbox" value="2" name="test">2
<input type="checkbox" value="3" name="test">3<br/>
日期框:<input type="date"><br/>
文件域:<input type="file"><br/>
隐藏域:<input type="hidden" value="admin"><br/>
普通按钮:<input type="button" value="普通按钮"><br/>
提交按钮:<input type="submit" value="提交按钮"><br/>
重置按钮:<input type="reset" value="重置按钮"><br/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textarea</title>
</head>
<!--
textarea 定义可输入多行文本的控件
cols 文本的可见宽度
rows 文本的可见行数
label标签
for属性
当for属性与元素的id属性值一致时,点击label标签,会自动元素聚焦
-->
<body>
姓名:<input type="text" name="uname"/><br/>
简介:<textarea></textarea>
简介2:<textarea cols="30" rows="10"></textarea>
<hr>
<label for="uname1">姓名</label>:<input type="text" name="uname1" id="uname1">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>button标签</title>
</head>
<!--
input按钮
type="button"
type="submit"
type="reset"
button标签 双标签
type="button"
type="submit"(default)
type="reset"
button标签的优点:
双标签,标签之间可以添加内容(文本或标签等)
-->
<body>
<form action="http://www.baidu.com">
<input type="text" name="uname">
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<hr/>
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
</form>
</body>
</html>
<!DICTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉框</title>
</head>
<!--
下拉框
select 下拉框标签
option 下拉框的选项标签
select 常用属性
multiple 设置下拉框可多选
size 设置下拉框可见选项数
disabled 禁用元素
option 常用属性
selected 默认选中项
disabled 禁用某个选项
value 如果设置了value属性值,则提交的是value的值
如果未设置value属性值,则提交的是option双标签中的文本值
-->
<body>
<select name="city">
<option>上海</option>
<option>北京</option>
<option disabled="disabled">深圳</option>
</select>
<hr/>
<select name="city" multiple="multiple" size="2" disabled="disabled" selected="selected">
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
</body>
</html>
<!DICTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>字符实体</title>
</head>
<!-- 字符实体
< <
> >
空格
版权 ©
-->
<body>
<h2>你 好<h2>
版权声明©
</body>
</html>
HTML中标签元素分为三种不同类型:块状元素,行内元素,行内块状元素.
css(Cascading Style Sheets)层叠样式表,美化网页,依赖于HTML
CSS样式由选择器和一条或多条以分号隔开的样式声明组成,每条声明的样式中包含着一个CSS属性和属性值
? 属性 值 属性 值
? h1 {color:red;font-size:14px;}
? 选择器 声明 声明
选择器名{
属性: 属性值;
........
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--样式设置在style标签中
注意:
1.CSS声明要以";"结尾,声明要用花括号括起来{}
2.建议一行一个声明
3.如果属性值由多个单词组成,要给值加上引号
注释
/* 注释内容 */
-->
<style type="text/css">
body{
background-color: antiquewhite; /* 背景颜色 */
color: red; /* 字体颜色 */
}
</style>
</head>
<body>
HEllO
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的使用</title>
<!-- 定义内部样式 -->
<style type="text/css">
/* p标签 */
p {
color:red;
font-family:楷体;
}
</style>
</head>
<!--
CSS的使用:
1.行内样式
将样式定义在html标签上的style属性中;
以行内样式写的CSS耦合度较高
2.内部样式
定义在head标签中的style标签中
3.外部样式
通过link标签引入外部css文件
rel:当前文件与引入文件之间的关系
type:类型, css类型
href: 引入的资源路径
优先级: 就近原则
-->
<body>
<p style="color:red;font-family:楷体;">这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
</body>
</html>
p {
color:red;
font-family:楷体;
}
--------------------------------命名为.css文件即可style.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head> /*引入资源类型*/
<body>
</body>
</html>
<!DOCTYE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
/* 通用选择器 *
选择所有元素
* {
属性名:属性值;
}
*/
* {
/* 字体颜色 */
color: #000FF;
}
/*
元素选择器/标签选择器
选择指定标签
标签名 {
属性名:属性值;
}
*/
div {
width: 200px; /* div标签的宽度 */
height: 200px; /* div标签的高度 */
background-color: #FAEBD7;
}
/*
id选择器 #
选择指定id属性值的元素 #
#id属性值 {
属性名: 属性值;
} id值最好保持唯一,
id定义规则: 以数字,字母,下划线,中划线组成,且不能以数字开头
*/
#div1 {
color: red;
}
/*
class类选择器 .
选择设置指定的class属性值的元素
.class属性值 {
属性名: 属性值;
}
*/
.cls1 {
font-weight: bold; /* 字体粗细 */
}
/*
分组选择器
选择指定选择器选中的元素
选择器1,选择器2,选择器3,...{}
*/
#div1,.cls1,p{
/* 边框 边框的粗细 边框的风格(虚实线) 边框颜色*/
border: 1px solid #0000FF;
}
</style>
</head>
<!--
选择器的优先级(权重值):
id选择器(100) > 类选择器(10) > 元素选择器(1) > 通用选择器(0)
行内样式 style属性中 权重值是1000
-->
<body>
<div id="div1">div1</div>
<div class="cls1">div2</div>
<div>div3</div>
<p>一段话</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<!--
组合选择器
1.后代选择器(以空格分隔)
选择指定元素的后代元素
指定元素 指定子代元素 {
属性名: 属性值;
}
2.子代选择器(以大于号分隔)
选择指定元素的第一代元素
3.相邻兄弟选择器(以加号分隔)
选择指定元素的相邻的下一个指定元素,且二者具有相同的父元素
4.普通兄弟选择器(以波浪号分隔)
选择指定元素后的指定同级元素(只会向下找)
-->
<style type="text/css">
/* 后代选择器(以空格分隔) */
.food li {
border: 1px solid orchid;
}
/ *子代选择器(以大于号分隔)* /
.food > li {
border: 1px solid orchid;
}
#d + div {
color: #FF0000;
}
#t ~ li {
color: blue;
}
</style>
</head>
<body>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉??</li>
<li>苹果??</li>
<li>梨??</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
<div id="d">
<ul>相邻兄弟选择器1
<li>开心麻花</li>
<li>贾玲</li>
<li>宋小宝</li>
</ul>
</div>
<div>
<ul>相邻兄弟选择器2
<li>开心麻花</li>
<li>贾玲</li>
<li>宋小宝</li>
</ul>
</div>
<div id="t">
<ul>普通兄弟选择器1
<li>皮卡丘</li>
<li>小火龙</li>
<li>杰尼龟</li>
<li>妙蛙种子</li>
</ul>
</div>
</body>
</html>
背景
background-color background-image background-repeat
background-size background-attachment
Usage:
body {
background: #FF0000;
background-img: url(‘./1.jpeg‘); /* 默认重复 */
background-repeat: no-repeat;
/* repeat-x 横向重复 repeat-y 纵向重复 no-repeat 不重复*/
background-size: 200px; /*只设置一个值时,为等比例缩放,设置两个值时,为宽 高200px 200px*/
background-attachment:fixed; /*背景图片是否随内容的滚动而滚动;
value: fixed(固定) scroll(滚动) */
}
文本
color text-align(center,left.right) line-height /*行间距*/ leter-spacing /*字间距*/
text-decoration(overline,underline,line-through,none)
text-indent(设置首行缩进)
a {
text-decoration: none; /* 去除a标签的下划线*/
}
#id {
text-indext: 2em; /* em 一个文字的高度*/
}
字体
font-family
1.当font-family的属性值包含空格或特殊字符时,需要将font-family属性值用引号括起来
2.font-family有"后备机制",可以为元素设置多种字体,当浏览器不识别第一种字体时,就会尝试找下一种字体
3.当font-family的属性值有多个时,使用逗号隔开
font-size 设置字体大小
font-style 设置字体风格 normal(正常体), italic(斜体), oblique(强制斜体)
font-weight 设置字体粗细 bold(粗体) 100~900(值越大,字体越粗,400为正常字体,700为粗体)
<style type="text/css">
div {
font-family: 楷体;
font-family: "agency fb";
font-size: 30px;
font-style: italic;
font-weight: 700; /* bold效果相同*/
}
</style>
对齐方式
text-align 设置元素中字体水平方向的对齐方式 left, right, center, justify
列表和超链接伪类
通过选择器设置属性
list-style-type 设置列表项标记的类型
square(实心方块) circle(空心圆) disc(实心圆)
list-style-position 设置在何处放置列表项标记
list-style-image 使用图像来替换列表项的标记
inherit 规定应该从父元素继承list-style属性的值
超链接的伪类
a{text-decoration: none;} /*去除a便签的下划线*/
a:link {color:#FF0000;} /*未访问的链接*/
a:visited {color:#00FF00;} /*已访问的链接*/
a:hover {color:#FF00FF;} /*鼠标滑过的链接*/
a:active {color:#0000FF;} /*已选中的链接*/
display属性
规定元素生成框的类型
value
block 元素会被显示,且元素会变成块级元素(元素前后会有换行符)
none 元素会被隐藏
inline 元素会显示为行内元素(元素前后没有换行符)
inline-block 行内块级元素
块级元素:可以设置元素的宽高和边距,元素会自动换行
行内元素:不可以设置元素的宽高和边距,元素不会自动换行
行内块级元素:可以设置元素的宽高和边距,元素不会自动换行
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<!--
边框border
1.设置元素边框的宽度,颜色,类型
2.单独设置边框的颜色,宽度,类型
border-color
border-width
border-style
-->
<style type="text/css">
#div1 {
border: 2px #0000FF dotted;
}
#div2 {
border-style: dashed;
border-color: #DA70D6;
border-width: 1px;
}
#div3 {
border-style: solid dashed dotted none; /* 全局|上/右(左)/下/左 */
border-color: #00FFFF; /* 同上*/
/*即只有一个值时,边框全局属性相同,有两个值时,上下边框属性可能不一样,有三个值时上下左样式可能不一样,有四个值时,上下左右边框属性可能不同*/
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="div1">
这是一段文本
</div>
<hr/>
<div id="div2">
这又是一段文本
</div>
<hr/>
<div id="div3">
这还是一段文本
</div>
<hr/>
<table border="1">
<tr><th>Header</th><th>Body</th></tr>
<tr><td>data</td><td>data</td></tr>
</table>
</body>
</html>
boder-collapse属性 设置是否将表格边框折叠为单一边框
属性值:separate(默认,单元格边框独立),collapse(单元格边框合并)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内边距</title>
<style type="text/css">
td {
padding: 10px;
}
</style>
</head>
<!--
padding内边距
设置内边距
设置一个值,表示四个方式相同
设置两个值,表示上下一致,左右一致
设置三个值,表示上,右,下不一致,左右一致
设置四个值,表示上,右,下,左都不一致
单独设置各边的内边距:padding-top,padding-left,padding-bottom,padding-right
-->
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;">
<tr><th>班级</th><th>姓名</th><th>年龄</th><th>性别</th></tr>
<tr align="center" valign="top" bgcolor="antiquewhite">
<td>101班</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距</title>
<style type="text/css">
p {
background-color: #00FFFF;
}
#p1 {
margin: 100px;
}
</style>
</head>
<!--
margin外边距
设置外边距
设置一个值,表示四个方式相同
margin:0px auto;中
设置两个值,表示上下一致,左右一致
设置三个值,表示上,右,下不一致,左右一致
设置四个值,表示上,右,下,左都不一致
单独设置各边的外边距:margin-top,margin-left,margin-bottom,margin-right
-->
<body>
<p>这是文本</p>
<p id="p1">这是文本</p>
</body>
</html>
<!DOCTYPE htlml>
<html>
<head>
<meta charset="utf-8">
<title>float浮动 块级元素 行内元素</title>
<style type="text/css">
ul {
list-style: none;
}
.nav-left,.nav-left li{
float: left;
margin-left: 20px;
}
.nav-right,.nav-right li{
float: right;
margin-right: 20px;
}
/* clear:both 清除所有浮动 left right */
a{text-decoration: none;}
</style>
</head>
<body>
<ul class="nav-left">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">工具</a></li>
<li><a href="#">更新</a></li>
</ul>
<ul class="nav=right">
<li>登录</li>
<li>注册</li>
</ul>
</body>
</html>
浮动
float的属性值有none, left, right
1.只有横向浮动,没有纵向浮动
2.会将元素的display属性变更为block
3.浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)
4.浮动元素的前一个元素不会受到任何影响(如果想让两个块状元素并排显示,必须让两个块状元素都应用float)
JS需要和HTML一起使用才有效果,可通过直接或间接的方式将JS代码嵌入在HTML页面中
行内JS:写在标签内部的JS代码
内部JS:定义在script标签内部的JS代码
外部JS:单独的JS文件,在HTML中通过script标签引入
一般将javascript代码放在网页中的head或者body部分,但由于页面的加载方式是从上往下依次加载的,这对放置的js代码运行是有影响的.
放在<head>部分,最常用的方式是在页面中的head部分放置<script>元素,浏览器解析head部分就会执行此代码,然后才解析页面的其余部分.
放在<body>部分,JavaScript代码在网页读取到该语句的时候就会执行.
原文：https://www.cnblogs.com/zxarj/p/14880394.html