目录
1.介绍HTML文本结构和head、body的作用
-
head作用：在里面可编写文档元数据、定义文档标题、引入层叠样式表文件、引入js文件、编写css样式
-
body作用：文档的主体部分，编写显示在网页里的内容，编写javascript脚本，引入js文件
<!DOCTYPE html>
<!--html 文档的根元素 -->
<html>
<!-- head标签作用：在里面可编写文档元数据、定义文档标题、引入层叠样式表文件、引入js文件、编写css样式 -->
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
</head>
<!-- body 文档的主体部分，编写显示在网页里的内容，编写javascript脚本，引入js文件 -->
<body>
<p>hello world!</p>
</body>
</html>2.非构造页面标签元素介绍
-
head标签 放style标签 script标签 title标签 meta标签
-
meta 页面元信息标签
-
script标签 写js的标签或者引入js文件的标签 利用src可引入外部js脚本
-
link标签 引入外部样式表
-
title 页面标题标签
-
style标签 写嵌入样式表的标签
3. 构造页面必备之HTML标签元素介绍
3.1 常见HTML标签元素介绍一
-
div标签 在网页制作过程中可以把你认为捆绑在一起的东西装在一个里面,div充当的是一个容器的角色
-
p标签 如果想在网页上显示文章或段落，这时就需要标签了，把文章或段落放到标签即可。
-
br标签 需要加回车换行的地方加入
<br/>标签作用相当于word文档中的回车 -
strong标签 用粗体表示
-
em标签 用斜体表示 strong和em都是表示强调
-
span标签
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的
3.2常见HTML标签元素介绍二
-
ul li 标签 当你网页需要做一个展示信息列表的时候可以使用 无序列表
-
ol li 标签 当你网页需要做一个展示信息列表的时候可以使用 有序列表
-
hx(x可以是1-6)标签 此标签为标题标签
-
hr标签 信息展示时需要分隔的横线时可使用
3.3 常见HTML标签元素介绍三
-
a标签 实现超链接跳转，只要有链接的地方就可以用此标签 此外a标签还可以设置title和target等属性
-
<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">click here!</a>
-
-
img标签 美丽的网页图片是一个不可划缺的部分，img可以插入图片 如下为使用方式
-
<img src="******" />
-
3.4常见HTML标签元素介绍四
-
input标签 文本输入框：常见的type有text、radio、checkbox、button、submit、file、password
-
textarea标签 文本输入域： 用户需要在表单中输入大段文字时，需要用到
-
select option标签 下拉选择 option里面设置selected="selected"即为默认选中
-
label标签 label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上） 使用方式有如下两种：
第一种：<label for="控件id名称">
例子：<label for="male">男</label>
<input type="radio" name="sex" id="male" />
第二种：<label>男 <input type="radio" name="sex" id="male" /></label>4.页面常见元素之HTML表格
-
table标签 用来定义 HTML 表格，可以用作展示数据 border可设置
-
tr标签 定义HTML表格中的一行单元格
-
th标签 表示HTML表格的表头部分，该标签中的内容会以粗体显示
-
td标签 表示table标签中的单元格
-
thead标签 定义了一组HTML表格的头
-
tfoot标签 定义了一组HTML表格的尾(表格的页脚)
5.重量级元素之HTML表单
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据，使用方式如下例子：
<form method="传送方式" action="服务器文件">-
- form标签是成对出现的双闭合标签
- action里面传入浏览者输入的数据被传送到的地方，可以是json文件、php文件等等
- method里面传入的是数据传送的方式（get/post）
-
注意:
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间（否则用户输入的信息可提交不到服务器上的）。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。完全取决去后端人员，他会告诉你是以什么方式传输的。
6.行内元素、块级元素和行内块级元素的区别
-
块级元素
-
总是另起一行
-
可以设置其宽度、高度，内外边距
-
在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
-
可以容纳行内元素和其他块元素。
-
常见的块级元素有：
<div>/<h1>~<h6>/<p>/<ul>/<table>等(注意这里只是常见的)
-
-
行内元素
-
总是和相邻的行内元素在同一行上
-
设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
-
默认宽度是他自身内容的宽度。
-
行内元素只能容纳其他行内元素或者文本。
-
常见的行内元素有：
<span>/<a>/<img>/<br>/<input>/<textarea>/<select>/<strong>/<em>等(注意这里只是常见的)
-
-
行内块元素
-
在行内元素中就有那么几个特殊标签，比如
<img>/<input>/<td>,可以给他们设置宽高、对齐属性 -
行内块元素综合了块元素和行内元素的不同特点
-
和相邻行内元素在同一行，但是之间会有空白缝隙。
-
默认宽度是他本身内容的宽度。
-
宽度、高度、行高、外边距以及内边距都可以手动设置。
-
-
7.css基本样式
7.1详细讲解盒子模型
-
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：margin、border、padding、content(width、height)
-
盒子模型分两种
-
标准盒子模型
-
模型成员：margin、border、padding、content
-
content不包含其他成员
-
-
怪异盒子模型(IE盒子模型)
-
模型成员：margin、border、padding、content
-
-
content包含border和padding
-
给元素设置box-sizing可改变盒子模型类型
-
标准盒子模型：box-sizing:content-box;
-
怪异盒子模型：box-sizing:border-box;
-
7.2 关于css选择器的权重计算艺术
-
谁优先级高用谁的样式
-
第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。 第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，尽量少用。 第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3px} 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;} 第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
-
第六优先级：通配选择器，如*{marigin:6px;}
-
-
权重计算值分级
-
第一等级：代表内联样式，如style=""，权值为 1000
-
第二等级：代表id选择器，如#content，权值为100
-
第三等级：代表类，伪类和属性选择器，如.content，权值为10
-
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
-
7.3 讲解css常见样式属性
-
height 设置高度
-
width 设置宽度
-
padding 设置内边距可以设置一到四个值，例子如下
-
padding:10px;
-
所有四个填充都是 10px
-
-
padding:10px 5px;
-
上填充和下填充是 10px
-
右填充和左填充是 5px
-
-
padding:10px 5px 15px;
-
上填充是 10px
-
右填充和左填充是 5px
-
下填充是 15px
-
-
padding:10px 5px 15px 20px;
-
上填充是 10px
-
右填充是 5px
-
下填充是 15px
-
左填充是 20px
-
-
-
margin 设置外边距
-
border 设置边框
-
color 设置字体颜色
-
background 设置背景颜色
-
font-size 设置字体大小
7.4 详细讲解浮动float跟清除浮动
-
设置浮动布局，float的属性有：
-
left 元素向左浮动
-
right 元素向右浮动
-
none 默认值。元素不浮动，并会显示在其在文本中出现的位置
-
inherit 规定应该从父元素继承 float 属性的值(这种情况一般可忽略)
-
-
清除浮动的方法
-
在父元素上设置overflow:hidden;
-
在父元素上设置伪类，属性设置为content: "";display: block;clear: both;
-
使用空标签设置 clear:both
-
7.5 深度讲解css定位position
-
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。(祖上元素都没定位就相对第一个即最外层的祖先元素进行定位，如果有祖上元素设置了position：relative、absolute、fixed就相对此祖上元素定位)
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
-
fixed 生成固定定位的元素，相对于浏览器窗口进行定位。
-
relative 生成相对定位的元素，相对于自身正常位置进行定位
-
static 默认值。没有定位，元素出现在正常的流中
-
inherit 规定应该从父元素继承 position 属性的值(这种情况一般可忽略)
7.6 见水平居中垂直居中实现方式
-
第一种用text-align：center；height与line-height设置同高
-
第二种图片的水平垂直居中 用text-align：center；height与line-height设置同高，然后图片设置 vertical-align: middle;
-
第三种利用position定位例子如下：
.imgbox{
width: 300px;
height: 300px;
position: relative;
border: 1px solid #465468;
}
.imgbox img{
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
height:20px;
width:20px;
margin: auto;
}
<div class="imgbox"> <img src="******" /> </div>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
