前台Html5
2019-11-18 10:48:25 0 举报AI智能生成
Html+CSS知识总结
作者其他创作
大纲/内容
Html5
基本结构
基本结构
分支主题
① 一个文档声明：<!DOCTYPE HTML>
② 一个html标签对：<html></html>
③ 一个head标签对：<head></head>
④ 一个body标签对：<body></body>
文档类型：<!DOCTYPE HTML>
<HTML>标签的语义化
分支主题
<head>标签
标题标签：<title>
<meta>
作用：通俗点说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。
1、meta标签name属性
<head>
<!--网页关键字-->
<meta name="keywords" content="绿叶学习网"/>
<!--网页描述-->
<meta name="description" content="绿叶学习网是一个富有活力的技术学习网站"/>
<!--本页作者-->
<meta name="author" content="helicopter">
<!--版权声明-->
<meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则将追究法律责任。"/>
</head>
分支主题
2、meta标签http-equiv属性
定义页面所使用的语言
语法：
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
</head>
说明：
这段代码告诉浏览器该页面所使用的字符集是gb2312，即国际汉字码。只需要了解就行
实现页面的自动刷新跳转
语法：
<head>
<meta http-equiv="refresh" content="6;url=http:/www.baidu.com"/>
</head>
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
</head>
<p>这个页面在6秒之后自动跳转到百度首页</p>
</body>
</html>
<meta>标签对于一般页面制作者来说，实际意义不大，只有在整站设计开发的实战中，我们才会用到非常多的meta标签属性。只需要了解meta标签的基本功能就行了，哪怕代码不会写都没关系，以后不会再回过头来看就行了。
<link>
作用：用于外部文件的链接
语法：
<head>
<link rel="stylesheet" type="text/css" title="tem" href="/temp.css/">
</head>
<style>
<script>
<base>
作用：为整个页面定义所有链接的基础定位，其主要的作用是为了确保文档中所有的相对URL，都可以被分解成正确的文档地址，使在文档本身被移动或重命名的情况下也可以正确解析。
语法：
<head>
<base href="http://lvyestudy"/>
</head>
<base>标签经常使用在创建文档集合中，为了不破坏文档中任何链接，使用者通过在每个文档中放置正确的<base>标签，便可以在目录甚至服务器之间移动整个文档集合。
<body>排版标签
html注释
<!--注释的内容-->
标题标签
<h1>~<h6>
其中<h1>标题的重要性最高，<h6>标题最低。
一般一个页面只能有一个<h1>，而<h2>~<h6>可以有多个。
段落标签<p>
<p>段落内容</p>
换行标签
方法一：采用两个<p>标签
方法二：采用换行标签<br/>
br>用来给文字换行，而<p>标签用来给文字分段。
水平线标签<hr/>
div span
[object Object]
分支主题
文件格式化标签
粗体标签<b>、推荐<strong>
斜体标签<i>、<cite>、推荐<em>
上标标签<sup>
下标标签<sub>
删除线标签<s>、推荐<del>
下划线标签<u>推荐<ins>
图像标签<img>
<img src="图像URL" />
分支主题
分支主题
标签属性
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：链接目标的url地址
target：其中self为默认值，blank为在新窗口中打开方式。
1.外部链接 需要添加 http:// www.baidu.com
2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
内部
name 属性
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：<a href="#tips">有用的提示</a>
也可以在其他页面中创建指向该锚的链接：<a href="http://www.baidu.com/html/html_links.asp#tips">有用的提示</a>
外部
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
脚本
<script type="text/javascript" src="example.js"></script>
空链接
<a href="#">这是会跳到页首的</a>
<a href="javascript:void(0)">这个不会跳动</a>
锚点定位
1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
<a href="#two">
2.使用相应的id名标注跳转目标的位置。
<h3 id="two">第2集</h3>
分支主题
分支主题
base 标签
base 写到 <head> </head> 之间
把所有的连接 都默认添加 target="_blank"
分支主题
分支主题
特殊字符标签
分支主题
注释标签
<!-- 注释语句 -->
路径
相对路径
1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如img src="logo.gif" /。
2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如img src="img/img01/logo.gif" /。
3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如img src="../logo.gif" /。
分支主题
绝对路径
“D:\web\img\logo.gif”，
或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
分支主题
分支主题
列表标签
无序列表
<ul>
<li>列表项1</li>
</ul>
有序列表
<ol>
<li></li>
</ol>
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
</dl>
表
表格
表格标签
分支主题
<table>
<tr> <tr></tr>中只能嵌套<td></td>
<td>单元格内的文字</td>
...可以容纳所有的元素
</tr>
...
</table>
table-表 tr-行 td-单元格（无列）
可使表格内所有内容对齐
表格结构
<thead></thead>：用于定义表格的头部。
<tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
表格标题
<table>
<caption>我是表格标题</caption>
</table>
合并单元格
跨行合并：rowspan
跨列合并：colspan
分支主题
分支主题
1. 表格提供了HTML 中定义表格式数据的方法。
2. 表格中由行中的单元格组成。
3. 表格中没有列元素，列的个数取决于行的单元格个数。
4. 表格不要纠结于外观，那是CSS 的作用。
表单
表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
1. Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method
用于设置表单数据的提交方式，其取值为get或post。
3. name
用于指定表单的名称，以区分同一个页面中的多个表单。
注意： 每个表单都应该有自己表单域。
method
get提交方式
分支主题
post提交方式 匿名提交
分支主题
分支主题
表单控件
input
radio 单选
checkbox 复选
button 普通按钮
submit 提交
resit 重置
imag
分支主题
属性
分支主题
分支主题
分支主题
分支主题
check 被选中的
分支主题
maxlength 最大长度
分支主题
file 文件域
分支主题
textarea控件(文本域)
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
分支主题
下拉菜单
<select>
<option></option>
</select>
1. select</select中至少应包含一对option></option。
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。
分支主题
分支主题
label
作用： 用于绑定一个表单元素, 当点击label标签的时候,
被绑定的表单元素就会获得输入焦点
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
分支主题
单标签
换行标签<br />、水平线标签<hr/>、图像标签<img>
<input/>控件、link
CSS
样式规则
[object Object]
样式
内部式
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
行内式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容
</标签名>
外部式
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
CSS字体样式属性
font-size:字号大小
可以使用相对长度单位，也可以使用绝对长度单位。
相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。
font-family:字体
网页中常用的字体有宋体、微软雅黑、黑体等
p{ font-family:"微软雅黑";}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体
分支主题
font-weight:字体粗细
数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。
可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
font-style:字体风格
字体标签 i和em可使字体倾斜
分支主题
分支主题
CSS实现字体风格——
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。
font:综合设置字体样式
字体连写
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
CSS外观属性
color:文本颜色
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
两两相同可缩写
line-height:行间距
属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7.8像素左右就可以了。
text-align:水平对齐方式
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent:首行缩进
属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，
允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
text-decoration 文本的装饰
分支主题
分支主题
CSS选择器
基础选择器
标签选择器（元素选择器）
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
分支主题
类选择器
.类名{属性:属性值；}（属性可有多个）
标签调用的时 class=“类名” 即可。
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
3.不要纯数字、中文等命名， 尽量使用英文字母来表示。
上面点声明下面class调用
多类名选择器
1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。
最终“多类名显示蓝色”，按css样式里的上下顺序来
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
分支主题
id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
分支主题
通配符选择器
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
分支主题
id选择器与类选择器的最大区别是使用次数不同
id是唯一的只可使用一次，类选择器可使用多次
复合选择器
交集选择器
分支主题
并集选择器
适用于集体声明 用，隔开
后代选择器
外层写前，内层写后，中间用空格隔开
分支主题
也支持这种
分支主题
子元素选择器
后代选择器是指所有后代，
子代选择器则指最近的后代，用>分割
特殊情况，用<a><a/>分割
下一个<a>中间间距<ul><li>所以不会选择
伪类选择器
链接伪类选择器
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
lvha顺序不可颠倒
eg
快捷键
1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div>
2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
0 条评论
下一页
为你推荐
查看更多
