Web，HTML简述，常用的HTML标签
2017-06-23 本文已影响0人
云承寒
Web概述
互联网(World Wide Web)简称Web。
网页的Web标准
-
结构：决定网页类型（HTML决定网页的结构和内容）
-
表现：决定网页外观（CSS设置网页表现）
-
行为：决定网页交互（JavaScript控制网页行为）
HTML
HTML不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。
基本语法
<标记>内容</标记>
语法注意：标记通常都是成对使用，开始对应结束。
HTML文件结构
<html>
<head> <!-- 头标记，放置关于此HTML文件信息 -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--用于网页搜索时-->
<!--适配手机页面-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>网页标题</title>
</head>
<body>
网页要显示的所有内容都放到这个标记内
</body>
</html>
常用的HTML标签
<body>
<h1>标题标签，标题大小范围h1~h6</h1>
<font color="red" face="楷体" size="6">字体标签</font>
<p>段落标签，段落结束自动换行</p>
<img src="img.jpg">
<br> <%-- 换行标签 --%>
<a href="https://www.baidu.com">网页链接标签</a>
<br />
<a href="#jump">设置锚点，点击后跳转到网页指定位置</a>
<br />
<a name="jump">指定位置</a>
<br /><br />
<b>包裹的文本加粗显示</b>，<i>包裹的文本斜体显示</i>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
</body>
效果
表格
cellpadding="10px" ：单元格内边距
cellspacing="0xp" ：单元格与单元格的间距
align="center" ： 设置表格在网页上位置
bgcolor="#66AFE9" ：表格背景颜色
colspan="2" ：合并左右相邻的两列单元格
rowspan="2" ：合并上下相邻的两行单元格
<body>
<table border="1px" width="40%" align="center"
cellpadding="10px"
cellspacing="0xp"
bgcolor="#66AFE9" >
<tr align="center">
<td colspan="2" >1,1</td>
<td rowspan="2">1,3</td>
</tr>
<tr align="center">
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
</body>
表格效果
浮动框架
<body>
<center>
<!--
作用相当于在当前窗口再插入一个窗孔，
而插入的内容就用src制定,
可插入图片，网站等
-->
<iframe width="300px" height="200px" src="img.jpg"></iframe>
</center>
</body>
效果
XHTML
初期，HTML的规范标准不够严格，随意性较大，不符合发展趋势。有关组织（W3C）就出面制定了一套规范的标准XHTML。
XHTML规范
1.XHTML中属性名称必须小写
<body>
<img src="">
2.XHTML必须严格嵌套
<i><b>严格嵌套，一对是一对的</b></i>
3.XHTML中标记必须封闭，即使空元素的标记也必须封闭
<br/> <hr/>
4.XHTML中属性值用双引号括起来
<boder="1" width="100" height="100">
5.XHTML中属性值必须使用完整形式
<input check="true">
Div盒子模型
将网页上展现的元素，看做一个个的盒子，许多盒子摆放在一起就组成了页面，这样设计，在想要修改页面上的元素时，就可以只修改元素对应的盒子部分即可。
<body>
<div>
div是一个块级元素(单独显示一行，多个Div间会自动换行)
它单独使用没有任何意义，必须结合css来使用，它主要用于页面布局,给功能分块。
</div>
<span>
span是内联元素(显示一行，不控制则水平排列)
单独使用没有任何意义，主要用于对括起来的内容进行样式修饰。
</span>
</body>
<head>
<title>Demo</title>
<style type="text/css">
.demo{
/*设置边框颜色，大小，类型*/
border-color: black;
border-width: medium;
border-style: dashed;
/*设置div的宽高*/
width: 20%;
height: 100px;
/* 使div在页面中水平居中 */
margin: 0 auto;
/*使文本水平垂直居中*/
text-align: center;
line-height: 100px;
background-color: red;
color: white;
/* float: inherit;相较于父类元素确定位置
position: absolute;relative相对定位 absolute绝对定位
display: inline; 决定盒子类型，行内，块级，无*/
}
</style>
</head>
<body>
<div class="demo">
这是块用于演示的Div空间
</div>
</body>
效果
Css（Cascading Style Sheets）
Css是一种标记性语言，用来装饰网页的样式。
引入Css的原因
传统的HTML，把样式和结构混合在一起，不利于管理且相同样式需要重复复制。
<body>
<font size="5" face="微软雅黑" color="#2AABD2">文本1</font>
<font size="5" face="微软雅黑" color="#2AABD2">文本1</font>
</body>
引入Css只需要修改Style样式即可。
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
font {
size: 5;
font-family: "微软雅黑";
color: #2AABD2;
}
</style>
</head>
<body>
<font>文本1</font>
<font>文本1</font>
</body>
Css的选择器概念
假设要描述一个人，可以表述成如下形式，每行描述一个属性，每个属性对应一个值。
张三{
年龄:18;
性别:男;
}
如果将这种描述，转换成描述网页的一个标题，则如下。
h1{
font-family: 宋体;
color: blue;
}
通过上述可以看出，CSS的组成可划分为三部分。
- 对象：要设置的主体
- 属性：该主体的属性
- 属性值：该主体属性的属性值
对象能指定对网页中的哪些元素进行设置，因此被称为选择器。
基本选择器
1.标记选择器
HTML页面由很多不同的标记组成，CSS标记选择器就是声明设置，这些标记采用的CSS样式。
格式
标记{ }
<head>
<title>Demo</title>
<style type="text/css">
/* 格式：body{ }*/
body{
color: red;
font-family: 楷体;
font-size: 18px;
font-style: italic;
text-align: center;
}
</style>
</head>
<body>
标记选择器的演示
</body>
2.类别选择器
类别选择器只能依存于标签，用来控制被类别选择器标注的元素标签。
类别选择器的对象名称，需要自定义，同一个标签可以用多个class类别选择器。
//类别选择器使用
<head>
<title>Demo</title>
<style type="text/css">
.class_1{
text-align: center;
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p class="class_1"> ID选择器演示 </p>
</body>
3.ID选择器
ID选择器只能在HTML页面中使用一次，一定避免将ID选择器用于多个标签，因为使用Js查找控制元素标签时，是通过ID来查找相应元素的。
<head>
<title>Demo</title>
<style type="text/css">
#id_1{
text-align: center;
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p id="id_1"> ID选择器演示 </p>
</body>
复合选择器
复合选择器是由两个或多个基本选择器，通过不同的连接方式连接而成的选择器。
1.交集选择器
由两个选择器连接构成，显示的结果是二者各自元素的交集。
第一个必须是 标记选择器，第二个必须是 类别选择器 或 ID选择器，必须连续书写，不能有空格。
h1.class{
color:red;
font-size:18px;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
p.demo1 {
font-size: 30px;
}
.demo1{
font-size: 20px;
color: red;
}
p{
font-size: 18px;
color: red;
}
</style>
</head>
<body>
<!-- 两者交集的元素是字体红色，因此这个选择器显示的是红色 -->
<p class="demo1">交集选择器</p>
</body>
</html>
2.并集选择器
用于多个标签或选择器的样式相同时，多个选择器通过逗号连接。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
h1 , p , .demo1{
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 他们的样式都是一样的 -->
<h1>并集选择器</h1>
<p>并集选择器</p>
<p class="demo1">并集选择器</p>
</body>
</html>
HTML的CSS引入方式
1.内嵌式
将CSS用 <style> 标签进行声明，写在 <head> 标签内。
这种维护相对麻烦，仅适用于对特殊页面设置单独的风格。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
.demo1{
font-family: 宋体;
font-style:italic;
}
</style>
</head>
<body>
<!-- 可以使用多个类别选择器 -->
<p class="demo1">类别选择器 </p>
</body>
</html>
2.链接式
使用频率最高，也最为实用的方式。
链接式将 HTML页面本身 和 CSS样式 分离为两个或多个文件，实现了页面HTML代码框架与美工CSS代码的分离。
将选择器封入后缀为.css的文件
@CHARSET "UTF-8";
.demo1 {
font-family: 宋体;
font-style: italic;
color: blue;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- 用link引入css文件 -->
<link href="demo1.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="demo1">类别选择器 </p>
</body>
</html>
3.导入式
@CHARSET "UTF-8";
.demo1 {
font-family: 宋体;
font-style: italic;
color: red;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- 区别于链接式，导入式一定要放入style标签内 -->
<style type="text/css">
@import url(demo1.css);
</style>
</head>
<body>
<p class="demo1">类别选择器 </p>
</body>
</html>
