首页 > 代码库 > 进入html+css世界的正确姿势
进入html+css世界的正确姿势
今天，我带大家一起走进html+css的世界。
HTML其实是HyperText Markup Language的缩写, 超文本标记语言。他是用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档。下面是HTML文档最基本的格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> 是html文档的dtd文档声明，用来告诉浏览器这是用html5编写的html文档。是html文档必不可少的一部分，且必须写在html文档的第一行。
html标签则标识着整个html文档内容的开始和结束。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
一、首先我们来看下<meta>标签的四个属性：
1.charset：定义文档的字符及编码<meta charset="utf-8">
常见的中文编码格式： GB-2312：国标码，简体中文 GBK：扩展的国标码 简体中文 UTF-8:万国码 基本兼容各国语言
2.http-equiv属性：需配合content使用，主要声明浏览器如何解释编译文件
写法：<meta http-epuiv="属性值" content="属性值详细内容"> 常用属性值:refresh 网页刷新
set-Cookie设置浏览器cookie缓存
3.name属性：需配合content使用，主要用于给搜索引擎提供必要信息
写法：<meta name="属性值" content="属性值详细内容">
重要属性值：author作者：声明网站作者 常用公司网址表示
keywords关键字：多个关键字，用英文逗号分隔
description 网页描述：搜索引擎显示在title下的描述内容
4.content属性:必须与http-equiv和name属性配合使用。后两者只是用于声明即将修改哪些属性值，而实际的属性值内容，在content中描述
二、link标签：用于为网页链接各种文件，有三种属性
rel:用于表明被链接文件与当前文件的关系，此处选icon，表示被链接图片是当前网页的icon图标
<link rel="icon" type="image/x-icon" href="http://www.mamicode.com/img/weixin.png"/>
type:表明链接文件的类型 可以省略
href:表明链接文件的地址
三、body标签用于定义文档的主体。包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
四、标签的分类：
块级标签:自动换行 是否自动换行是判断是否是行内标签的重要条件
标题标签<h1></h1>……<h6></h6>
水平线<hr/>
段落<p></p>
换行<br/>
引用<blockquote></blockquote >
预格式<pre></pre>
<!--标题标签<h1>...<h6>;<h1>最大<h6>最小，都加粗-->
<h1>我是标题</h1> <h2>我是标题</h2> <h3>我是标题</h3> <h4>我是标题</h4> <h5>我是标题</h5> <h6>我是标题</h6>
<!--<p></p> 段落标签-->
<p>放大来看手机发了狂的时间分两块巨石凌空估计是开锅后付款时间会根据反烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦</p>
<!--<hr>标签 水平线--> <hr>
<!--<br> 换行标签--> 回复的空间和放大镜看沙发客 <br>回复的开始反抗精神
<!--引用<blockquote></blockquate> 表明标签中的文字为引用的内容。浏览器 显示段落缩进 cite属性，表明引用的来源，一般为引用的网页的url -->
<blockquote cite="http://baidu.com">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</blockquote>
<!--预格式标签<pre></pre> 浏览器解析时，会按照等宽字体显示，并且保留标签内的空格和回车。常用于保留代码格式-->
<!--列表-->
<!--有序列表 <ol></ol>--> <ol> <li>我是列表</li> <li>我是列表</li> <li>我是列表</li> <li>我是列表</li> </ol>
<!--无序列表 <ul></ul>--> <ul> <li>我是列表</li> <li>我是列表</li> <li>我是列表</li> <li>我是列表</li> </ul>
<!--定义列表 <dl></dl>--> <dl> <dt>标题</dt> <dd>描述项</dd> <dd>描述项</dd> <dd>描述项</dd> </dl>
<!--图片组合标签<figure> 1.<figure></figure>标签有两个子标签 2.浏览器显示为：图片与标题上下排列，且整体会向后缩进一个单位 -->
<figure> <img src=http://www.mamicode.com/"img/weixin.png" alt=""> <figcaption>这是图片的标题</figcaption> </figure>
<!--分区标签 <div> 常配合CSS使用。为网页中最常用的分区标签。常用于网页布局-->
div style="width: 100%; height: 100px; background-color: #000;"> 这是div里面的文字 <h1>这是div里面的标题</h1> </div>
<!-- *div-ul(ol)-li:常用于分类导航和菜单 div-dl-dt+dd:常用于图文混编 -->
行级标签：按行逐一显示<!-- [常见的行级标签]
span（文本） img（图片） em（强调） strong（强调） q（短引用） a（超链接） i（倾斜） b（加粗） small（缩小字体）-->
<!--span文本 用于包裹一部分文字，进行特定的样式修改-->
真<span style="color: red;">丑</span>
<!--em标签和strong标签都表示强调，strong强调程度大于em，strong和em可以多层嵌套-->
<em>我被em标签强调</em>
<strong>我被strong标签强调了</strong>
<!--i标签 倾斜--> <i>我是倾斜</i>
<!--b标签 加粗--> <b>我是加粗</b>
<!--em，strong跟i，b的区别 em，strong表示强调 i，b只是修改样式 html5要求标签语义化给浏览器识别 -->
<!--small标签 缩小字体 可以多重嵌套 表示比默认字体小1号，知道最小为止--> <small> <small>我被small缩小了</small> </small>
<!--big 放大字体 可多层嵌套 --> <big> <big>我被big放大了</big> </big>
<!--img图片标签
1.src属性：表示图片的引用路径
常见的路径：
（1）相对路径:当图片在当前文件下一层时：文件夹名/图片名；当图片位于同一层时，图片名；当图片位于上一层是：../图片名
（2）绝对路径 写法file:///E:/JREDU/项目2-JREDU官网-new/img/weixin.png,禁止使用
（3）网络连接 直接使用图片的网络地址，不建议使用
2.titles属性 鼠标指上时显示的内容
3.alt属性：当图片无法加载时显示的文字
4.witch/height:图片的宽高，相当于css当中的宽高
<img src=http://www.mamicode.com/"img/weixin.png" title="鼠标指上时显示的内容" alt="alt属性：当图片无法加载时显示的文字" align="定位"> <img src=http://www.mamicode.com/"wexin.png" alt=""> <img src=http://www.mamicode.com/"../项目2-JREDU官网-new/img/weixin.png" alt="">
<!--超链接a标签
href:超链接的链接地址
target:打开方式
title：鼠标指上时显示的内容
rel属性：表明即将跳转的页面与当前页面的关系
rel="prev"即将跳转页面是当前文档的前一篇文章
rel=“next”即将跳转的页面是当前页面的后一篇文章
rel="prefetch"预加载，当前文档加载完成后，利用空余网速，预加载即将天赚的页面
【功能性链接】: mailto:lumaohsheng@163.com 发邮件
[锚链接]:在本页面设置锚链接,设置一个锚点<a name="top"></a>,设置超链接跳到锚点位置<a href:"#top">回到顶部</a>;
在其他页面设置锚链接,在其他页面设置一个锚点<a name="top"></a> ,设置超链接到描点位置<a href:"http://www.baidu.com#top">回到顶部</a>.
<!--版权符号 空格--> © 空格
<!--u:下划线--> <u>这是u标签</u>
<!--mark:高亮或标记文本 浏览器显示为黄色背景--> <mark>哈哈哈哈哈</mark>
五、【表格table】
表格<table></table> 表格的行<tr></tr> 表格的列<td></td> 表格的表头列<th></th> (将tr中的td，替换为th，表示本行为表头) th 默认加粗，且在单元格居中显示
【table的常用属性】
1.Border：边框属性，当使用border=""设置边框时，会在所有td以及table上嵌套边框，当border值增大时只有table的边框会加粗
2.Cellspacing：单元格之间的间隙当cellspacing="0"时 ，单元格之间的间隙为0，但边框线并没有合并。 [合并边框的写法]style="border-collapse;collapse;"使用边框合并后，无序设置cellspacing
3.Cellpadding：单元格内边距，单元格中文字与单元格边框之间的距离。
4.Width：宽 Height：高
5、Align:表格的对齐方式；left居左center居中right居右
6、Bgcolor：背景色 Background：背景图片;当背景图和背景色同事出现时，背景图会覆盖背景色
7、Bordercolor：边框颜色
【tr,td标签的属性】
1.width,height:给单个行列设置宽度高度
2.bgcolor:背景色
3.align:单元格内容水平对齐方式
4.valign:单元格内容垂直对齐方式
5.nowrap:nowrap="nowrap" 设置单元格内容不换行
***属性是指优先值：td>tr>table
【表格的跨行与跨列】
跨列：colspan，某单元格夸N列，则该单元格右边的N-1个单元格就要删掉
跨行：rowspan，某单元格跨N行，则该单元格下面的N-1个单元格就要删掉
<table width="500" height="200" border="5" align="center" bgcolor="#f0f8ff" background="" style="border-collapse:collapse;">
<tr>
<th colspan="4">lala</th>
</tr>
<tr>
<td rowspan="3">lala</td>
<td>hfdahj</td>
<td>hfdahj</td>
<td>hfdahj</td>
</tr>
<tr>
<td>hfdahj</td>
<td>hfdahj</td>
<td>hfdahj</td>
</tr>
<tr>
<td>hfdahj</td>
<td>hfdahj</td>
<td>hfdahj</td>
</tr>
</table>
六、form表单
【form】表单的两个属性
1.action：表单需要提交的服务器地址
2.method：表单提交数据的方式 get/post
get和post的区别：get传参使用url传递，所有参数在地址栏可见，不安全，传参数量有限；post传参使用http请求传递，比较安全，可以传输大量数据；get传输数据比较快。url传参形式:?name1=value1&name2=value2
【input的常用属性】：type设置input的输入类型；text：文本输入框；password：密码输入框；submit：提交按钮，提交数据到后台服务器；
radio：单选框/checkbox：多选框:使用时value属性必填，提交的是value值，凭借name属性判定是否为同一组,使用checked="checked",设置默认选中项；
file:文件上传 使用accept设置上传的文件类型；reset：重置表单数据；image：图形提交按钮，使用src链接图片，功能和submit一样；button:普通按钮
name给input输入框起名，必不可少,因为传输数据时使用name=value的形式；value是input输入框的默认值；
placecholder:输入狂的提示内容，当input有默认的value或者输入值时，placecholder消失
【下拉选择控件 select】
① 写法：<select>
<option></option> //可以有N多个
</select>
② name属性，应该写在<select>上，所有选项只有一个name
③ multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。
④ option常用属性：value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；
当option有value属性时，往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected="selected":默认选中。
⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。
【文本域 textarea】
① 写法：<textarea></textarea>
② 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性，但不常用
③ readonly="readonly" 设置为只读模式，不允许编辑。
④ style="resize: none;" 设置为宽高不允许修改。
⑤ style="overflow: ;" 设置当文字超出区域时，如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:hidden 超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动；auto 自动，根据文字多少自动决定是否显示滚动条（默认样式）
【表单的边框与标题】
<form action="">
<fieldset>
<legend>标题</legend>
<input type="text">
<input type="text">
<input type="text">
</fieldset>
</form>
【html5智能表单】
①H5新增input的form属性，用于指向特定form表单的id，实现input无序放在form标签之中，即可通过表单进行提交。
<form id="foo"> ....
</form>
<input type="" form="foo">
②新增了type属性，见表格
③新增input的属性：
Autocomplete：自动完成功能；记忆之前输入过的内容，在下次输入是，根据以前的内容提示，自动完成。绝大部分浏览器自动开启，on/off属性值控制开关。可以在form标签设置，控制整个表单此功能开关，会被单个input上的设置覆盖掉
Autofocus：自动获得焦点 autofocus="autofocus"
Form：所属表单
Required：必填 required="required" 设置<input>为必填
Pattern：验证input的模式
Placeholder：提示
HTML的标签知识先介绍到这里，下面我们看一看css的世界：
css是一种用来表现HTML文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
一、css有三种使用方式：
1.行内样式表：直接在html开始标签中添加style=""属性 特点：将css代码和html代码完全糅合在一起，不符合w3c内容与表现分离，不利于样式复用 优先级最高 。
2内部样式表：在head标签中使用style标签中引用 特点：css代码与html代码分离，但没有彻底分离html文件和css文件，不利于多页面样式复用 。
3.外部样式表：使用link标签链接css文件 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/01css.css"> 特点：实现了html与css的彻底分离，有利于样式复用和后期维护。
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
二、下面介绍几种常见的css选择器：
1、标签选择器
写法：标签名{css属性}；作用：选中所有对应的html标签，并修改其样式。例：
li{ color: red; font-size: 36px; }
2、类选择器class选择器
写法：.类名{属性}；用法：在需要修改样式的html标签上使用class="类名"；优先级：当作用于同一层时，class选择器>标签选择器。例：
.list{ color: #f44444;
3、通用选择器
写法：*{属性值}；作用：选中所有的html标签，修改样式；优先级：最低。例：
*{ margin: 0; padding: 0; }
4、id选择器
写法：#选择器名{}；调用：在需要修改样式的html标签上使用id=选择器名；优先级：同一层时，id选择器>class选择器；id选择器是唯一的！同一页面严禁出现同名id！！！例：
#ul{属性}
5、后代选择器
写法：选择器1 选择器2 ……{}；生效规则：选择器n必须是选择器n-1的后代。
6、子代选择器
写法：选择器1>选择器2>……>选择器n{}；生效规则：选择器2必须是选择器1的直接子代。
7、交集选择器
写法：选择器1选择器2选择器3选择器4{}；生效规则：必须满足所有的选择器 。
8、并集选择器
写法：选择器1，选择器2，……，选择器n{}；生效规则：满足任意一个选择器均可生效。
***选择器命名规范：
只能有字母数字下划线组成；第一位不能是数字。
***选择器优先级
就近原则：直接选中是最近；当作用于同一层时：可用权重计算。权重划分：标签选择器：1；类选择器：10；id选择器：100；行级样式表：1000；#l1 .l2 .l3 优先级权重120。
三、下面我们来看一下css常用的背景属性：
1、background：在一个声明中设置所有的背景属性。
2、background-image:背景图
3、background-image: url(图片地址相对路径);背景图和背景色同时存在时，背景图会覆盖背景色
4、background-repeat：背景图重复方式 ，no-repeat不平铺 repeat平铺(默认) repeat-x水平平铺 repeat-y垂直平铺
5、background-size:背景图大小。
指定宽度高度的写法，第一个属性值为宽度，第二个属性值为高度，可以：①直接写像素 ②写百分比（父容器宽高的百分比）；当只有一个属性值时，默认为宽度。高度等比缩放。当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。
其他属性值contain:图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放（可能导致部分空余区域无法覆盖）；
cover:图片等比缩放，使背景图像完全覆盖背景区域。(可能导致背景图部分区域无法显示)
6、background-position：位置坐标、偏移量
>>> 指定位置：left/center/right top/center/bottom 当只写一个属性值时，另一个默认居中
>>> 填写坐标：水平位置 垂直位置 (像素或百分比形式)
① 当只写一个属性值时，默认写的为水平方向，则垂直居中
② 当使用像素时：图片的左上角往各个方向移动的实际距离 水平方向：正数右移 负数左移 垂直方法：正数下移 负数上移 (左负有正 上负下正)
③ 当使用百分数时，一般只能是正数。代表去掉图片后，剩余空白距离的分布比例。例如 background-position：30%; 水平方向去掉图片后，剩余区域3:7分
.div1{
width: 27px;
height: 27px;
background-image: url();
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: -165px -27px;
white-space: nowrap;
text-indent: 30px;
line-height: 27px;
}
四、伪类选择器
伪类选择器主要用于向某些选择器添加特殊的效果。
下面以a标签为例来看下伪类选择器的用法：
【a标签存在一定的状态】
1、默认状态, 从未被访问过
2、被访问过的状态
3、鼠标长按状态
4、鼠标悬停在a标签上状态
a标签的伪类选择器是专门用来修改a标签不同状态的样式的。
【格式】
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式
【注意点】
1、a标签的伪类选择器可以单独出现也可以一起出现
2、a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
:link :visited :hover :active
a标签常用的伪类选择器就这四种，下面在介绍一个比较常用的伪类选择器：
input:focus 主要用于input文本框获取焦点
好了，这次的分享就到这里了，有什么意见和建议的话可以跟我留言，我们一起讨论，共同提高。
谢谢！
进入html+css世界的正确姿势
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。