HTML
目录
一、超文本标记语言(HyperText Markup Language)
一、CSS：级联样式表(Cascading style sheets)
一、超文本标记语言(HyperText Markup Language)
超文本: 文字，网页中显示的超链接,图片,视频
标记: 标签，记号，用来描述网页内容 浏览器根据标签内容进行解释执行
学习html的本质就是学习各种各样的标签,
浏览器解析执行网页
html开发网页.
网页开发工具 :HBuilderX
二、HTML基本语法
html声明 html版本为html5 告诉浏览器如何解释网页
<!DOCTYPE html>
html称为根标签 网页中的所有内容都写在根标签中.
<html>
头部
<head>
设置网页信息 编码设置
<meta charset="utf-8" />
搜索引擎搜索使用的关键字
<meta name="keywords" content="手机,家电">
<title>网页标题</title>
<link href="img/baidu.ico" rel="icon"/>
</head>
身体
<body>
<b>网页中的内容都写body标签中</b>
</body>
</html>1、注释 <!-- --> ctrl+/
2、标签分类
闭合标签: <开始> 标签体 <结束/> 双标签
自闭和标签 ：没有要修饰的内容，只是完成特定的功能 <标签名/> 单标签
<br/>
<hr/>3、标签属性： 对标签内容进行修饰
写在开始标签中
属性名="值" 可以有多组属性值.
三、常用标签
1、标题 h1~h6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>2、段落 p
<p></p>//段落与段落之间有一个间隔 align属性设置对齐方式
3、换行 br
<br/>4、有序列表ol li
<ol>
<li></li>
</ol>5、无序列表ul li
<ul>
<li></li>
</ul>6、hr 标尺线
<hr color="red" width="800" align="left" size="10"/>7、超链接
a href="链接地址" target="_self / _blank" // _self 默认在当前窗口打开 _blank 在新窗口打开
<a href="连接地址" target="打开文件的位置"></a>
// _self 默认在当前窗口打开 _blank 在新窗口打开
//—top 顶级窗口打开 —parent 父级窗口打开(这两个在内联框架中使用)
超链接定义锚点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="top"></a>
<!--
锚点: 在网页中定义一个位置 可以精确的来到网页中的某个位置
-->
<a href="#p1">商品1</a>
<a href="#p2">商品2</a>
<a href="#p3">商品3</a>
<a href="#p4">商品4</a>
<a href="#p5">商品5</a>
<hr/>
<a name="p1"></a><!-- 定义锚点 -->
<h3>商品1</h3>
<img src="img/1.png" />
<hr/>
<a name="p2"></a>
<h3>商品2</h3>
<img src="img/2.png" />
<hr/>
<a name="p3"></a>
<h3>商品3</h3>
<img src="img/3.png" />
<hr/>
<a name="p4"></a>
<h3>商品4</h3>
<img src="img/4.png" />
<hr/>
<a name="p5"></a>
<h3>商品5</h3>
<img src="img/5.png" />
<a href="#top" style="position: fixed; right: 20px; bottom: 30px;">返回顶部</a>
</body>
</html>
特殊符号转义：
空格 ：
标尺线： <hr/>；
< : <
> : >
注册商标（R）：®
版权（C）：©
商标（TM）：™
8、图片
img src="引用图片" width height border alt title
<img src="图片的地址" alt="图片不能显示时的提示信息" title="鼠标移入到图片上的提示信息"/>9、表格
有行有列
里面可以存放数据，还可以用来网页布局
由四组标签构成
<table> //表示表格
<tr> //行
<th></th> //单元格，表头，内容会自动加粗，并居中显示
<td></td> //单元格
</tr>
</table>表格内容只能放在单元格中
属性：table： border、weight、height、bgcolor(背景颜色)、background(背景图片，优先于背景颜色)
cellpadding(内容到边框的距离)、cellspacing(单元格与单元格之间的距离)
tr: bgcolor、height、align、valign(默认：middle)
td,th: bgcolor、weight、align(水平方向：左中右)、valign(竖直方向：上中下， 默认：middle)
单元格合并：
colspan="合并的数量"(从那个单元格开始合并，就在哪个单元格中添加colspan属性，然后删除多余的单元格) 列合并
rowspan="合并的数量"(从那个单元格开始合并，就在哪个单元格中添加rowspan属性，然后删除多余的单元格) 行合并
10、表单
有许多可以输入或选择的组件，用户可以在表单中输入信息
<form action="提交到服务器的地址" method="提交方式"> //表示一个表单
文本框：<input type="text"/> //readonly="readonly" 只读 disabled="disabled" 禁用组件
密码框：<input type="password"/>
单选框：<input type="radio" checked="checked"(默认选中一项)/> //name属性值相同为一组，可以互相排 斥，只能选择其中一个
复选框：<input type="checkbox" checked="checked"(默认选中一项)/>
文件选择框：<input type = "file" accept="筛选文件"/>
下拉选择框:<select selected="selected"(默认选中选项)>
<option></option> //选项
<option></option>
</select>
多行文本输入框：<textarea cols="" rows=""></textarea>
提交按钮：<input type="submit"/> //提交按钮，可以触发表单提交
重置：<input type="reset"/> //重置表单，让表单还原到原始状态
普通按钮：<input type="button"/> //普通按钮，触发事件
</form> 11、中划线
在HTML中使用的中划线标签： <del></del> <s></s>
12、内联框架
在一个窗口内嵌入一个子窗口，在子窗口中显示一个网页
<iframe src="子窗口网址" ></iframe>CSS
一、CSS：级联样式表(Cascading style sheets)
作用：用来修饰网页外观的样子
级联（关联）：将页面的内容与样式表
样式表：修饰网页标签的语法集
html是网页的内容，CSS是网页的样式
二、CSS基本语法
1、行内(行级)样式表 （使用较少）
<a href="" style="color: red;font-size: 20px;">百度</a>style=“属性名：值；...........”
2、内嵌样式表（练习使用）
将样式表与内容分离，通过选择器将内容与样式关联
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- style标签中用来写css样式表 -->
<style type="text/css">
/* 一组{ } 就是一个样式表
.aa{
color: green; font-size: 30px;
}*/
</style>
<!--在html中引入外部css文件-->
<link href="css/out.css" rel="stylesheet" />
</head>
<body>
<a href="" class="aa">百度</a>
<a href="">百度</a>
</body>
</html>3、外部样式表（实际开发用的多）
把CSS代码放到一个CSS文件中，然后在HTML中引入CSS文件
<link href="css所在位置" rel="stylesheet"/>三、选择器
1、标签选择器：以标签名作为选择参照
2、类选择器：以类名作为选择参照
3、id选择器：id属性的值不允许重复
4、通配选择器：选中所有的标签
5、选择器组合：将多个有共同属性的选择器组合在一起，对应同一个样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 */
a{
color: red; font-size: 30px;
}
/* 类选择器*/
.aa{
color: #008000; font-size: 20px;
}
/* id选择*/
#aid{
color: aqua; font-size: 30px;
}
/* 选择器组合*/
p,b,.aa{
font-family: 隶书;
}
/*通配选择器*/
*{
color: blue;
}
</style>
</head>
<body>
<a href="" class="aa" id="aid" style="color: yellow;">百度</a>
<a href="" class="aa">百度</a>
<a href="">百度</a>
<a href="">百度</a>
<p>段落</p>
<b>段落</b>
</body>
</html>选择器优先级问题:
行级样式表 > id选择器 > 类选择器 > 标签选择器 > 通配选择器
四、文本
字体颜色 color: ；
字体大小 font-size: ；
字体 font-family: ；
字体粗细 font-weight: ；
字体样式 font-style:italic(斜体)；
文本对齐 text-align: ；
文本删除线 text-decoration:line-through；
文本下划线 text-decoration:underline；
标准文本 text-decoration:none；
行间距(行高) line-height: ；
字与字之间的距离 letter-spacing: ；
首行缩进 text-indent： ；(可以使用em单位，em为一个字的大小)
五、背景
背景颜色 backgroung-color: ;
背景图片 background-image: ;
背景重复 background-repeat: ;
背景位置 background-position: ;
背景尺寸 background-siza: ;
六、CSS列表
可以改变列表的标志，或者可以将图像作为列表的标志
将图像设置为列表项的标志 list-style-image：url(图片地址)；
设置列表项中标志的位置 list-style-position：inside(在列表项的里面)/outside(在列表项 的外面)
设置列表项的类型 list-style-type：；
七、CSS伪类
用来表示标签的一种特殊状态，为标签不同状态时设置属性
鼠标移入状态 ：hover
激活 点击 ：active
聚焦，对于可输入内容的组件 ：focus
八、透明度
opacity: 0(完全透明)~1(完全不透明)
九、标签分类
块级标签：无论内容多少，独占一行
<p></p>
<h1></h1>
<ul></ul>
<ol></ol>
<hr/>默认尺寸：宽与父级标签一致，高位0，可以通过width、height设置宽高
行级标签：只占自身内容大小，不会占一行，设置宽高无效
<a href=""></a>行级块标签：不占一行，可以设置宽高
<img />
<input/>块级标签主要网页布局
行级标签主要用选中文本，修饰文本
注：一般使用块级标签包含行级标签
a标签可以包含任何标签，除去自身
p标签不可以包含任何的块级标签
十、Display属性
修改标签的类型
display：inline；行级标签
display：block；块级标签
display：inline-block；行级块标签
display：none；隐藏标签(标签将在页面中完全消失)
十一、div和span
div标签是一个纯净版的块级标签，可以放置任何的标签，没有任何的附加属性，给什么属性就变成什么样子，主要作用：网页布局
span标签是一个纯净版的行级标签，没有任何附加的属性，给什么属性就变成什么样子，主要作用：选中文档的文字
十二、盒子模型
CSS处理网页时，它会认为每一个标签都包含在一个不可见的盒子里，如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于摆放盒子，只需要将盒子摆放在相应的位置即可完成网页的布局。
1、内容区
盒子中放置内容的区域，即标签中的文本内容，子标签都是在内容区中的；
通过width和height两个属性可以设置内容区的大小，而不是整个盒子的大小；
如果没有为标签设置内边距和边框，则内容区的大小默认为和盒子大小是一致的。
2、内边距
标签内容区与边框以内的距离，内边距会影响盒子的大小，使用padding属性来设置边框的内边距。
padding-left：； 内左边距 padding-right：；内右边距
padding-top：；内上边距 padding-bottom：；内下边距
简写：padding：；上 右 下 左
3、边框
可以给标签周围设置边框，边框是标签可见框的最外部，可以使用border属性来设置盒子的边框
border:1px red solid; //分别指定了边框的宽度、颜色、样式，没有顺序，但三者缺一不可
border-top/left/right/bottom：；//分别指定上、左、右、下四个方向的边框
边框也可以设置样式：dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(槽线)
border-radius：； //可以设置边框四个角为圆角边框
border-top-left-radius：； //设置左上为圆角边框
4、外边距
外边距是标签边框与周围标签的距离，可以使用margin属性来设置外边距。
margin-top/right/bottom/left：；//分别设置上、右、下、左四个方向的外边距
margin的值可以为负值
margin：auto；//水平居中----水平方向外边距会最大化
外边距不会影响盒子的大小，但会影响盒子的位置
清除游览器的默认的padding和margin：
*{
margin:0;
padding:0;
}十三、文档流
文档中的标签在排列时所占用的位置，一行行，从左至右摆放，块级标签占一行，行级标签不占一行
十四、浮动
使标签脱离原来的文档流，在父级标签中浮动起来，使用float属性
float：none(不浮动)/left(向左浮动)/right(向右浮动)；
任何标签都可以浮动，浮动后的标签都变为块级标签
浮动后的标签的尺寸默认为内容的大小
存在的问题：当标签浮动后，是脱离文档流的，不占用标签的空间，所以没有将父级的标签撑开（高度塌陷）。会影响后面的网页布局
解决方案：1：为父级标签定义高度
2：清除浮动，可以根据浮动标签的高度，自动撑开父级标签。（在浮动的标签后面再加一个标签，添加属性：clear：left/right）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.dh{
float: left;
width: 100px;
background-color:#0051f5;
padding: 12px 0px;
text-align: center;
color: white;
}
.dh:hover{
background-color: #0000FF;
}
.dh_box{
margin: 10px auto;
width: 500px;
/* height: 41px; */
}
.box1{
width: 500px;
height: 200px;
background-color: #008000;
margin: auto;
}
</style>
</head>
<body>
<div class="dh_box">
<div class="dh">首页</div>
<div class="dh">公司介绍</div>
<div class="dh">产品介绍</div>
<div class="dh">客户案例</div>
<div class="dh">联系我们</div>
<div style="clear:left;"></div>
</div>
<div class="box1"></div>
</body>
</html>十五、定位
允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至游览器窗口本身而出现的位置。
1、相对定位(position)
相对于它的起点进行移动，移动后原来的位置还被占用。
通过position：relative；开启相对定位，left、right、top、bottom四个属性来设置偏移量
开启相对定位后，标签不会发生任何变化
相对定位的标签不会脱离文档流
相对于它原来的位置进行移动
2、绝对定位(absolute)
绝对定位不占空间
通过position：absolute；开启绝对定位，left、right、top、bottom四个属性来设置偏移量
开启绝对定位后，标签就会脱离原来的文档流，不占原来的空间
相对于离它最近的开启了定位的父级标签进行定位，如果所有的父级标签都没有开启定位，name会以浏览器为参照物进行定位。（一般情况下，开启了标签的绝对定位，都会开启父标签的相对定位）
3、固定定位（fixed）
会脱离文档流，以游览器为参照物进行定位
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
