本文详细介绍了HTML的基本结构和标签，包括标题、段落、换行、分隔线、格式化标签、图像、视频音频、超链接和结构化标签。同时，阐述了CSS的作用、基本语法、使用方式、选择器以及常用属性，如文字、边框、背景等。此外，讲解了盒子模型的组成、大小和位置关系，以及元素的分类和转换。最后，提到了布局模型，如流动模型、层模型和浮动模型，并介绍了表单的用途、元素和属性。
第一章 HTML 结构 标签
1.1 HTML
HTML ( 超文本标记语言) 可以被浏览器直接解析执行的语言 由一系列标签组成
B/S : 浏览器/服务器
C/S : 客户端/服务器
1.2 结构
<html>
<head>
标题 脚本 样式
</head>
<body> </body>
</html>
1.其中html是网页根标签
2.head;网页头部，里边包含了网页标题(title)，脚本(script)，样式(style)，属 性(meta)
3.body:网页主题部分,要呈现用户的内容需要在body进行编辑
2. 标签
注意事项:
1.构成 :由<和 >和特定单词
2.一般为闭合标签 成对存在,一个开始一个结束 例如:<head> </head>
3.也存在部分标签单独存在
4.标签不区分大小写,一般为小写
5.标签的正确嵌套
2.1 标题标签
用于设置文章标题, 有 h1-h6 h1标题最大 逐次递减
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
2.2 段落标签
区分段落 <p></p>
2.3 换行标签
实现换行 <br/>
2.4 分隔线
实现分割线效果 <hr/>
2.5 格式化标签
如下图：
居中:center
有序列表:ol 需要配合列表项li使用 <ol><li></li></ol>**
无序列表:ul 需要配合列表项li使用 <ul><li></li></ul>**
自定义列表:dl 需要配合列表项dt dd(使用后存在缩进 )使用 <dl><dt></dt><dd></dd></dl>
预定义格式:pre
2.6 字体标签
font设置字体颜色 (color) 大小(size) 类型(face)
<font size="1px" color="red| 16进制|rgb()" face=" ">
2.7 字体形状标签
i :斜体 b: 加粗 u:下划线 sub:下标 sup: 上标
<i>斜体</i> <b></b> <u></u> <sub></sub> <sup></sup>
2.8 图像标签
用于向网页中插入图片 也可以在其中调整图片 <img src="路径"/> !!!!!!图片后缀一定加上
width=" 宽度" height="高度 " align="对齐方式"(left center right 实现文字环绕效果)
路径区分
绝对路径: 从电脑的根路径开始一直找到目标资源所在位置结束形成的路径
相对路径: 从当前文档开始一直找到目标资源所在的位置结束形成的路径
2.9 视频 音频标签
video 用于插入加载视频 audio 插入播放音频 用法与图片相同 但需要添加controls控制条属性使视频可以播放 controls="controls" <video src="路径 "/> <audio src=" "> loop循环播放
2.10 超链接
实现跳转功能
href=" 一般为网址或本地文件路径 " 1. < a href="路径">dd </a> 路径若为网址需要加 http:// 2.作为锚点实现在本页面的某处定向跳转 1.设置锚点 <a name/id="名称"> </a> 2.提供跳转链接) <a href="#name/id(#为在当前页面) 对应名称"> </a> 例: <a name/id="test"> </a> <a href="#test"> </a>
2.11 结构化标签
html5 新增结构化标签: header (设置页眉 ) nav(设置导航栏) footer(设置页脚)
<header>页眉</header>
<nav>
<a> 导航栏</a>
<a>导航栏</a>
</nav>
<footer>页脚</footer>
第二章 表格和样式
1.表格 (结构,属性,合并,表格嵌套)
2.css (作用 语法 方式 选择器)
第一节 表格
1.1 表格基本结构
生活中一般用于数据统计,在网页中除了信息统计还用于页面布局
Excel 信息表 工资表
表格基本标签结构
| 属性名 | 说明 |
|---|---|
| table | 表格根标签 |
| tr | 表格行标签, 包含在table中 |
| td | 单元格.tr的子标签 |
| caption | 表格标题,默认文本居中显示 |
| th | 单元格,一般用来做表头,文本加粗居中 |
| thead | 结构化标签,用于标识表格头部 (非必要) |
| tbody | 结构化标签,用于标识表格主体部分 (非必要) |
例:
<table>
<caption>标题</caption>
<tr>
<th>用作表头</th>
</tr>
<tr>
<td></td>
</tr>
</table>
1.2 常用属性
| 属性名 | 说明 |
|---|---|
| border | 表格边框,一般取值是0/1 |
| height | 用于设定表格的高 |
| width | 用于设定表格的宽 |
| align | 水平对齐方式 left 左对齐 center居中 right 右对齐 放置位置相对于其父元素进行水平对齐方式的表现 |
| cellspacing | 单元格与单元格之间的距离 |
| rules | cols 只显示列的线 rows只显示行的线 all 行和列的线 none 均不显示 |
| bgcolor | 背景颜色,不推荐使用,推荐使用样式控制,可以设置在table,tr,td中, |
| background | 背景图,不推荐使用,推荐使用样式控制,可以设置在table,tr,td中, |
<table border="1px" rules="all" height="300px" width="400px" align="center">
<caption>人物表</caption>
<tr >
<th>姓名</th>
<th>性别</th>
<th>绰号</th>
</tr>
<tr align="center">
<td>张三</td>
<td>男</td>
<td>法外狂徒</td>
</tr>
<tr align="center">
<td>李四</td>
<td>男</td>
<td>酱油 </td>
</tr>
<tr align="center">
<td>王五</td>
<td>女</td>
<td>杀手 </td>
</tr>
</table>
1.3 单元格合并
1.3.1 跨行合并
跨行合并:同一列不同行的几个单元格进行合并,保留最上一的单元格,
通过rowspan属性完成,并删除多余单元格
1.3.2 跨列合并
跨列合并:同一行不同列的几个单元格进行合并,保留最左一的单元格,
通过colspan属性完成,并删除多余单元格
1.4 表格嵌套
嵌套:表格中包含表格
<table>
<tr>
<td>
/* <table>
*
* <tr>
*
表格的嵌套 <td></td>
*
* </tr>
*
*/ </table>
</td>
</tr>
</table>
小节:
可以使用表格实现页面的局部设计,但不推荐使用表格进行整体布局
表格整体结构 table tr td
th caption thead tbody
表格属性: border width height rules cellspacing cellpadding
单元格合并: rowspan colspan
table 的嵌套 : 表格中包含表格
第二节 CSS入门
2.1 css样式的作用
通过学习各种标签,网页
的基本结构大概进行学习了解,但是网页没有进行任何修饰,为了网页效果更加绚丽多彩,就会使用css样式对网页进行修饰,通过控制页面元素 ,字体,背景等完成修饰,并通过css样式实现样式和内容进行分离,提高大代码利用率和页面简洁程度,提升美观感.
CSS:Cascading style sheet (级联样式表,又称层叠样式,简称样式表或CSS)
2.2 CSS基本语法
CSS基本结构: 选择器和声明 (属性和属性值)
选择器{
属性:属性值;
属性:属性值;
}
2.3 CSS使用方式
2.3.1 内部样式
内部样式又称内嵌样式,在当前网页head 结构中,使用 style 标签实现样式
当需要给某一个页面实现特殊样式时,使用该样式.
2.3.2 行内样式
在每一个标签中添加一个style属性
除非需要给某一标签做特殊处理,一般不推荐
<a style="属性:属性值;"></a>
2.3.3.外部样式 (推荐)
1). 需要在外部编写一个独立的css文件 (**.css)
2). 把外部样式引入/链接到网页中
1.链入式
<link href="路径" rel="stylesheet"></link>
2.导入式
<style>
@import url("路径");
</style>
2.4选择器
通过选择器选中要修饰的元素,对页面进行调整,美化
2.4.1基本选择器
1.标签选择器
选择器的名字都为标签的名称 ,页面内的所有该标签都会被改变
p{
属性:属性值;
}
a{
属性:属性值;
}
2.类选择器
在需要被修饰的元素上添加class属性;使用class的值作为选择器的名称,并加上 .作为类选择器的标识, 可以将不同元素使用相同的class变成一个类别.也可以使用相同元素使用class变成不同类别
p{ /*标签选择器*/
color:blue;
}
.demo{ /*类选择器 .为标识符*/
color:red;
}
<p class="demo">hahaah</p>
hahaah 就会变成红色字体
则,当对相同元素的不同选择器时,可以得到优先级: 标签选择器 < 类选择器
3.ID选择器
在需要被修饰的元素上添加id属性的值作为选择器的名称,加上#为标识,
#id1{ /*id选择器 */
color:blue;
}
.demo{
color:red;
}
<p class="demo" id="id1">hahaah</p>
hahaah 就会变成蓝色字体
则,当对相同元素的不同选择器时,可以得到优先级: 类选择器 < id选择器
即选择器的优先级(相同元素相同属性时):
标签选择器 < 类选择器 < id选择器
小结
css:修饰网页
基本结构:选择器(声明:声明1(属性:属性值))
三种样式:行内 内部 外部
基本选择器: 标签 类 id
第三章 css深入
内容:
1.常用属性
2.组合选择器
3.伪选择器
第一节 CSS常用属性
1.1 文字属性
| 属性 | 说明 |
|---|---|
| font-size | 字体大小 |
| font-family | 字体类型 |
| font-weight | 加粗:bold bolder 或100-900 |
| font-style | 字形:normal |
| color | color_name(英文单词) 16进制 rgb rgba |
| font | 上述font的综合属性 顺序为 font-weight ( font-size font-family 是必须要写的.其他属性可以不写) |
1.2 文本格式属性
| 属性 | 说明 |
|---|---|
| line-height | 行高 |
| line-spacing | 字间距 |
| line-align | 文本水平对齐方式:left center right |
| text-indent | 缩进 单位em |
| text-decoration | 文本的修饰线 |
| text-shadow | 阴影 text-shadow:水平位移 垂直位置 模糊度 颜色 |
| 属性 | 说明 |
|---|---|
| border | 综合属性有 border-width border-style border-color |
| border-width | 边框宽度 |
| border-style | 边框样式 |
| border-color | 颜色 |
| border | 综合属性,上述 |
第二节 列表属性
| 属性 | 说明 |
|---|---|
| list-style | 列表样式 |
| list-style-image | 可以使用本地图片作为列表前的图标 |
| list-style-position | inside outside 决定是否属于列表的一部分 |
第三节 组合选择器
组合选择器:基本选择器的配合使用
| 选择器 | 说明 |
|---|---|
| E,F | E和F选择器平级,共享样式 |
| E F | E的后代选择器的样式 |
| E > F | E的子代选择器的样式 E为父级 F为子级 |
| E + F | E 和F为相邻兄弟选择器 EF元素相邻是样式才会显露 |
| EF | 既是E选择器又是F选择器的元素样式(即EF选择器相交的标签元素块) 一般为标签选择器配合一个类选择器 |
| * | 通配符,全局选择器,选中所有标签 |
第四节 伪选择器
| 伪选择器 | 说明 |
|---|---|
| :link | 未激活状态 |
| :active | 激活状态,鼠标点击未松开 |
| :hover | 悬浮状态,鼠标停留 (常用) |
| :visited | 访问后的状态,鼠标点击松开后的状态 |
第五节 背景属性
| 属性 | 属性名 |
|---|---|
| background | 综合属性 |
| background-color | 背景颜色 |
| background-image | 背景图 |
| background-repeat | 重复方式 默认平铺 repeat-x 水平方向平铺 repeat-y垂直方向 no-repeat 不平铺 |
| background-position | 背景位置(bottom top left right center) 像素 百分比 数字 都可以进行对它的设置控制 |
| background-size | 背景大小 (cover 完全填充整个容器, contain 适应宽或高填充) 数值一个宽高相同 两个对应 宽 高 |
滑动门技术,多用于导航栏中,运用background-position,进行定位
小结:
字体属性:font-size , font-family font-weight, font-style.可以使用font综合,但注意顺序,整体weight style size family 其中size和family是必须的,而且顺序不能颠倒
文本属性:line-height line-spacing text-align text-shadow(水平位移,垂直位移,模糊度,颜色)
边框属性:border(style width color)
列表属性:list:style(image,position,type)
组合选择器: “,” “ ”（空格 “>”
伪选择器：状态
第四章 盒子模型与元素分类
内容:
1.盒子模型(属性,大小,位置关系)
2.元素分类(块状元素 行内元素 以及二者转换)
第一节盒子模型
盒子模型是网页的基本模型,网页中的每一个元素都可以看做是一个盒子,(但盒子模型并不是布局模型之一)
每一个盒子都有四部分组成: margin(外边距,补丁),padding(内边距,內补丁,内填充
),border(边框),content(内容)
1.1 组成部分
1.1.1 margin
外边距:盒子与盒子的距离,一般有上下左右四个属性(margin-top,margin-bottom,margin-left,margin-right)
注意:1.行内元素margin-top,margin-bottom,无效
2.居中可以使用auto
| 属性 | 说明 |
|---|---|
| margin:1px; | 上下左右都为1px |
| margin:1px 2px; | 上下 1px 左右2px |
| margin:1px 2px 3px | 上 1px 左右2px 下3px |
| margin:1px 2px 3px 4px | 上 1px 右2px 下3px 左4px |
1.1.2 padding
内边距:内容与边框之间的距离,一般有上下左右四个属性(padding-top,padding-bottom,padding-left,padding-right)
其属性合写与上margin一致.
注意:padding不能为负数
1.1.3 border
border:边框
border-radius
1.2 盒子大小
盒子大小:指的是盒子在整个网页中占据的空间
盒子大小:margin+padding+content+border
width和height 知识内容的大小
使用box-sizing属性进行盒子大小定义
content-box 以内容区为基准进行计算,不包含padding和border
border-box 以border为基准进行计算,内容区包含padding和border的
部分资料说的IE盒子和w3C盒子,就是上边两个盒子的种类
1.3 盒子位置关系
1. 水平位置关系
在水平方向上两个盒子的间距是两个盒子的margin的间距之和
2.垂直关系
在垂直方向上两个盒子的间距是两个盒子的margin的最大值,不是二者之和
3.重叠关系
使用margin的值为负值实现重叠也可以通过定位方式实现
第二节 元素分类
网页将所有标签分为两类:块状元素,行内元素
2.1 块状元素
特点:默认宽度是100%,独占一行,可以设置宽高, 如h1-h6,div,一般而言块状元素可以包含行内元素和块状元素,但行内元素不能包含块状元素
div:无语义标签,一般充当容器,包含网页其他标签,主要进行布局,现在主要使 用div+css布局代替以前的表格布局
span:无语义标签,一般充当容器
2.2 行内元素
特点:宽高都由内容决定,无法设置宽高.不能独占一行, 如:span ,a, font
2.3 转换
1.使用display属性
display:none block(以块状元素显现) inline-block(以行内元素显现)
2.使用float
float:left right
元素浮动以后有可能改变原来的位置,块状元素和行内元素设置浮动以后会失去独占一行的特点,但可以设置宽高,一般使用这个特点来实现浮动模型的布局,注意不要产生浮动塌陷.
浮动塌陷
原因(父级元素不能包 裹子元素,变成一条线):
1.父元素没有设置高度
2.子元素全部浮动
如何消除浮动塌陷
1.使用clear:left right both(左右浮动都消除 )
2.overflow(溢出): (该属性在父级元素中添加)
auto(自适应) 子元素高度超过父元素,产生滚动条
hidden (超出的隐藏) 子元素高度超过父元素,剩余子元素隐藏
scroll(添加滚动条) 子元素高度超过父元素,产生滚动条
3.使用空div 设置属性清除浮动塌陷(不推荐)
<div style="clear:both"></div>
4.使用伪选择器 : after (伪元素选择器 相当于在father末尾生成了一个新元素 相当于在father后边生成了一个空的div，但是这个div不是实际存在，却达到空div消除塌陷的效果)
伪类选择器: m没有虚拟一个新的元素的，只是给现有的元素添加了一个状态
#father:after{
content:"";
clear:both;
}
总结:
1盒子模型: 理解盒子大小
2.元素分类
第五章 布局模型和表单
1.布局模型(流动模型,层模型,浮动模型)
2.表单(作用,元素,属性)
第一节 布局模型
1.1流动模型
是网页布局的默认布局模型,块状元素从上向下布局,行内元素从左向右布局
1.2层模型--定位
层模型主要通过定位来完成,其定位方式:1.静态定位 2.相对定位 3.绝对定位 4.固定定位 5.吸附定位
1.2.1 静态定位:
position: static
指的是元素默认的位置,被浏览器解析以后不做任何改变的位置,一般用来恢复盒子的定位
1.2.2相对定位
position:relative
相对于原来的(静态)位置进行偏移(水平移动left,向右为正,垂直移动top,下为正) ,不会脱离文档流(位置发生改变,原位置的空间依然保留)
当子元素进行绝对定位时,父级元素可以使用该属性使自身成为包含块,
1.2.3 绝对定位
position:absolute
绝对定位是相对于其父级元素(包含块)进行定位,当该元素没有父级元素包含块时,相对浏览器左上角(0,0)来进行定位,脱离文档流(看似在当前网页中,但是不占用任何的空间,相当于漂浮在当前网页上)
包含块:1.块状元素 2.该元素必须被定位(相对 绝对)
1.2.4 固定定位
position:fixed
固定在指定位置,不会随着网页的滚动而发生改变
1.2.5 吸附定位(粘性定位)
position:sticky
指页面滚动到指定位置时,元素不会随着页面发生改变
1.3 浮动模型
不要出现浮动塌陷
第二节 表单
2.1表单作用
将收集到的用户信息发送给服务器,如登录和注册
2.2 常见的表单元素
| 标签名 | 说明 |
|---|---|
| form | 表单跟标签,重要属性action(数据提交URL映射路径) method(提交方式 get,post) |
| input | 输入框,根据属性不同,输入框有多种形式 |
| textarea | 文本域, |
| select | 下拉框 |
2.3 input
<input id="" name="" value="" maxlength="" type="" placeholder/> 单标签 常用属性: name:标签名字,服务器接收表单数据通过name属性来完成 size:输入框的大小 value:输入框的值,提交给服务器的数据 maxlength:输入的最大字节度 placeholder 默认显示
type:属性:
| 属性 | 说明 |
|---|---|
| text | type="text",普通文本框,默认 |
| password | type="password",密码框 |
| radio | type="radio", 单选框 |
| checkbox | type="Checkbox",复选框 |
| button | type="button",普通按钮 |
| submit | type="submit",提交按钮 |
| file | type="file" 文件域,文件上传 |
| reset | type="reset". 重置 |
| image | type="image" 可以给按钮添加图片 |
| HTML5新属性 ,邮箱 | |
| number | type="number" , 表示数字(只能输入数字),e |
| hidden | type="hidden",隐藏 , 当前输入框不显示 |
总结:
1.布局模型: 流动 层 浮动
定位:静态. 相对 ,绝对 ,固定 , 吸附
2.表单元素: type属性(记忆)
以上内容闲暇时,总结上传,如有错误或者存在其它问题欢迎指正!
3345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
