HTML
html基本结构和属性
HTML :超文 本标 记语言
超文本︰文本内容＋非文本内容（图片、视频、音频等)
标记:<单词>
语言︰编程语言
标记也叫做标签
写法分成两种:
单标签：
双标签：
创建标签的快捷键:单词+ tab键-><单词>
标签可以嵌套
HTML5 元素标签含义大全(元素周期表)—HTML5星空 (html5star.com)
html初始代码
每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。 ! + tab键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
htm语义化
好处：
- 在没有CSS的情况下，页面也能呈现出很好的内容结构。
- 有利于SEO，让搜索引擎爬虫更好的理解网页。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器等)。
- 有利于团队开发与维护
标题与段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<p>段落</p>
</body>
</html>
文本修饰标签
<strong></strong> 表示强调(加粗)
<em></em>表示强调（斜体），strong的强调性更强，em较弱
<sub></sub>下标文本,<sup></sup>上标文本
<del></del>删除文本，<ins></ins>插入文本
图片标签和属性
<img src="" alt="">单标签 ，
src：引入图片的地址，
alt :当图片出现问题的时候，可以显示一段友好的提示文字。
title : 提示信息
width、height :图片的大小
引入文件的地址路径
相对路径
.在路径中表示当前路径
…在路径中表示上一级路径
绝对路径
E:/ke/qf_dl201901/20190108/img/animal/dog.jpg
跳转连接
<a></a>
href属性:连接的地址
target属性：可以改变连接打开的方式，默认是当前页面打开_self，_blank新开窗口
<base>改变默认行为，<base target="_blank">都新窗口打开
跳转锚点
作用：
页内跳转
实现一：#号 id属性
实现二：#号 name属性
特殊符号
无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
type属性:改变前面标记的样式(一般都是用CSS去控制)
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
type属性:改变前面标记的样式(一般都是用CSS去控制)
定义列表
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
嵌套列表
<ul>
<li>辽宁省</li>
<ul>
<li>沈阳</li>
<li>大连</li>
</ul>
<li>安徽省</li>
<ul>
<li>济南</li>
<li>烟台</li>
</ul>
</ul>
表格标签
<table> :表格的最外层容器
<tr> ∶定义表格行
<th>∶定义表头
<td>∶定义表格单元
<caption>:定义表格标题
表格属性
border :表格边框
cellpadding :单元格内的空间
cellspacing :单元格之间的空间
rowspan :合并行
colspan :合并列
align :左右对齐方式
valign :上下对齐方式
表单input标签
<form> :表单的最外层容器
<input> :标签用于搜集用户信息，根据不同的type属性值，展示不同的控件．如输入框、密码框、复选框等。
表单标签
<textarea> :多行文本框
<select>、<option> :下拉菜单
<label> :辅助表单
div和span
div(块)
div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span(内联）∶
用来修饰文字的，div乌span都是没有任何默认样式的。需要配合CSS才行，
CSS
CSS语法格式
格式:
选择器{属性1∶值1;属性2:值2}
单位:
px ->像素( pixel )、%-→>百分比基本样式:
width、height、background-color
内联样式与内部样式
内联(行内、行间)样式：在html标签上添加style属性来实现的
内部样式：在<style>标签内添加的样式
注:内部样式的优点，可以复用代码
外部样式及两种写法
<link>标签
rel 属性指定资源跟页面的关系;
href 指定资源地址
@import
注:这种方式有很多问题，不建议使用。
<style>
@inport url( './common.css ' );
</style>
CSS颜色表示法
- 单词表示法
- 十六进制表示法
- RGB三原色表示法
CSS背景样式
- background-color:背景颜色
- background-image:背景图片
- background-repeat :背景图片的平铺方式
- background-position:背景图片的位置
- background-attachment:背景图随滚动条的移动方式
CSS边框样式
-
border-style :边框的样式
-
border-width:边框的大小
-
border-color :边框的颜色
注∶针对某一条边进行单独设置
family字体类型
font-family :字体类型
英文字体:Arial，Times New Roman
中文字体:微软雅黑，宋体
中文字体的英文名称
微软雅黑:'Microsoft YaHei'
宋体:SimSun
字体大小粗细样式
CSS段落样式
textdecoration:文本装饰
取值
添加多个
text-transform :文本大小写
取值
text-indent :文本缩进，首行缩进
em单位
text-align :文本对齐方式
line-height :定义行高
letter-spacing :定义字间距
word-spacing :定义词间距（针对英文)
CSS复合样式
一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合样式：
- background
- border
- font
注:尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式.
CSS选择器
ID选择器
css : #elem{}
html : id= "elem"
- 在一个页面中，ID值是唯一的。
- 命名规范，字母_-数字(命名的第一位不能是数字）。
- 命名方式，驼峰式、下划线式、短线式。
CLASS选择器
css :.elem{}
html : class ="elem"
- class选择器是可以复用的。
- 可以添加多个class样式。
- 多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序。
- 标签+类的写法工
标签选择器
css : div{}
html : <div>
使用的场景:
1，去掉某些标签的默认样式时
2．复杂的选择器中，如层次选择器
群组选择器
css : div , p, span
可以通过逗号的方式，给多个不同的选择器添加统一的CSs样式，来达到代码的复用。
通配选择器
*{} ->div,ul,li,p,h1,h2....
注:尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。|
层次选择器
- 后代:M N
- 父子:M>N
- 兄弟:M~N
- 相邻:M+N
属性选择器
复合选择器
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代
语法：
元素1 元素2 {样式声明}
上述语法表示选择元素1里面的所有元素2(后代元素)。
例如:
ul li { 样式声明 } /* 选择ul里面所有的1i标签元素*/
- 元素1和元素2中间用空格隔开
- 元素1是父级,元素2是子级,最终选择的是元素2
- 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器
子选择器
**子元素选择器(子选择器)**只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
语法:
元素1>元素2{样式声明}
上述语法表示选择元素1里面的所有直接后代(子元素)元素2。
例如:
div > p {样式声明} /*选择div里面所有最近一级p标签元素*/
-
元素1和元素2中间用大于号隔开
-
元素1是父级,元素2是子级,最终选择的是元素2
-
元素2必须是亲儿子,其孙子、重孙之类都不归他管.你也可以叫他亲儿子选择器
并集选择器
**并集选择器可以选择多组标签,同时为他们定义相同的样式。**通常用于集体声明
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法
元素1,元素2{样式声明}
上述语法表示选择元素1和元素2
例如:
u1,div {样式声明} /*选择u1和div标签元素*/
-
元素1和元素2中间用逗号隔开
-
逗号可以理解为和的意思
-
并集选择器通常用于集体声明
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素
伪类选择器书写最大的特点是用冒号(:)表示,比如:hover、:first- child
链接伪类选择器
链接伪类选择器注意事项
-
为了确保生效,请按照LVHA的循顺序声明:link- :visited - :hover- :active
-
记忆法: love hate或者LV包包hao
-
因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
链接伪类选择器实际开发中的写法
/* a 是标签选择器 所有的链接*/
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候,由原来的 灰色变成了红色*/
}
: focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况类表单元素才能获取,因此这个选择器也主要针对于表单元素来说
input: focus {
background-color: yellow;
}
CSS的元素显示模式
元素显示模式
作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素(标签)以什么方式进行显示,比如
HTML元素一般分为块元素和行内元素两种类型
块元素
常见的块元素有<h1~h6>,
,
-
,
- ,
- 等,其中**
标签是最典型的块元素**
块级元素的特点:
①比较霸道,自己独占一行
②高度,宽度、外边距以及内边距都可以控制
③宽度默认是容器(父级宽度)的100%
④是一个容器及盒子,里面可以放行内或者块级元素
注意:
- 链接里面不能再放链接
- 特殊情况链接里面可以放块级元素,但是给
<a>转换一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签——<img />,<input />,<td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素
行内块元素的特点:
①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)
②默认宽度就是它本身内容的宽度(行内元素特点)
③高度,行高、外边距以及内边距都可以控制(块级元素特点)
元素显示模式转换
特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性
比如想要增加链接的触发范围
- 转换为块元素: display: block;
- 转换为行内元素; display: inline;
- 转换为行内块: display: inline-block;
单行文字想要垂直居中,令行高等于盒子的高度即可
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
