网页设计HTML零基础入门

、Html概述

Html是Hyper Text Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。

二、Html标签语法

Html中标签分为：成对标签和自闭合标签【空标签】

1、成对标签

成对出现，有开始标签必须有结束标签，内容包裹在两个标签中，而且开始标签名和结束标签名一致,并且结束标签必须以斜杠/开头

语法：

<font>内容</font>

2、自闭合标签

只有一个标签，用斜杠结束，斜杠也可以省略

语法：

<br/>

注意事项：

成对标签中，结束标签必须以斜杠开头
成对标签与成对标签可以嵌套不能交叉
标签名不区分大小写，但是我们都必须小写

三、Html基本架构

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文档声明，定义文档类型为html，并且告诉不同的浏览器用标准方式进行解析html语言，如果不写的话，会产生怪异模式，所谓怪异模式，就是浏览器会用自己的方式进行解析，不同的浏览器有各自的解析方式，从而会出现无效果、不兼容等问题。
注意，html中有两种声明类型，一种叫做xhtml，即html，另一种叫做html5，html5是xhtml的升级版，所以我们建议使用html5的声明方式
xhtml声明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5声明方式：
<!DOCTYPE html>

2、html

html是html文档的整体，也就是表示一个网页。
html中的lang="en"是定义该文件语言是英文

3、head

head是html的第一层子元素【子标签】，负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏中。即title标签。

4、meta

meta是html语言head标签中的一个辅助性标签，该标签不包含任何内容，但是该标签的属性定义了与文档相关联的名称，比如：编码

<meta charset="utf-8"></meta>

5、body

body也是html的第一层子元素，我们页面中显示的所有内容全部都是编写在该标签体中。

四、Html文档规范

html制定了文档的编写规范，必须遵守。
所有的标签必须小写
所有的属性必须用双引号括起来

五、Html注释

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。
注释的语法：


六、html基本属性

注：属性是标签的辅助作用。

属性描述 bgcolor 设置网页的背景颜色 background 设置网页的背景图片

1.bgcolor

设置网页的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的属性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路径

我们在开发网页时，需要经常的插入图片、视频、文件等一些操作，但是我们需要指定文件所在的位置，这个位置就是所谓的路径

路径分为：

相对路径指目标相对于当前文件的路径，网页结构设计中多采用这种方式来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下： ./ ：代表文件所在的目录（可以省略不写）../ ：代表文件所在的父级目录../../ ：代表文件所在的父级目录的父级目录/ ：代表文件所在的根目录【/ ：可以理解为目标文件的绝对路径】
绝对路径指目标文件的完整路径，从盘符开始。

3.background

设置网页的背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的属性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事项：
bgcolor和background不能同时使用
background不能指定绝对路径

七、Html标签

1.网页的组成

网页的组成：文字、图片、视频、超链接、列表、表格、表单等组成。

2、文本段落标签

标签描述 hn 设置文字标题【n：取值范围 1~6】 center 居中对齐 hr 水平线属性（width：宽度 color：颜色 size：粗细） br 换行 p 段落

3、文本控制标签

标签描述 font 设置字体，需要借助属性设置

属性描述 color 设置字体颜色 size 设置字体大小，不需要带单位，取值范围：1~7【浏览器默认值：3】 face 设置字体风格

<font size="2" color="red" face="黑体"></font>

4、文本格式化标签

标签描述 b 定义粗体文本 em 定义着重文字 i 定义斜体文字 small 定义小号字 strong 定义加重语气 sub 定义下标字 sup 定义上标字 ins 定义插入字 del 定义删除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化标签</title>
</head>
<body>

    <b>粗体文本</b>
    <i>倾斜文本</i>
    <em>着重文本</em>
    <small>小号字</small>
    <strong>加重语气</strong>
    <sub>上标</sub>
    <sup>下标</sup>
    <ins>插入字</ins>
    <del>删除字</del>
    
</body>
</html>

5、图片标签

在Html中，图像由
标签定义。
是空标签，意思是说，它只包含属性。
要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。

标签描述 img 图片标签

属性描述 src 指定图片的地址 width 设置图片的宽度 height 设置图片的高度 alt 设置图片的预备文本

注意事项：不建议设置图片大小，容易失真

6、audio

在Html中，声音由标签定义。

标签描述 audio 声音标签

属性描述 src 指定声音地址

<audio src="nice.mp3">对不起，您的浏览器不支持</audio>

7、video

在Html中，视频由video标签定义

标签描述 video 视频标签

属性描述 src 指定视频地址

<video src="美女.mp4">对不起，您的浏览器不支持</video>

8、超链接

a标签定义超链接，用于从一个页面链接到另一个页面。
a标签最重要的属性是href，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

语法：

<a href="链接目标">点击内容</a>

属性描述 href 指定链接目标 name 指定锚的名称 download 指定下载链接 target 指定跳转方式属性值描述 _blank 新窗口打开【常用】 _parent 在父窗口中打开链接【了解】 _self 默认，在当前窗口打开【了解】 _top 在当前窗体打开链接，并替换当前的整个窗体【了解】 framename 到 iframe 在讲【常用】

超链接分类：

内部链接链接目标：本地页面 <a href="demo.html">点击内容</a>
外部链接链接目标：外部页面 <a href="http://www.baidu.com">点击内容</a>
多媒体链接链接目标：图片、视频等 <a href="images/美女.jpg">点击内容</a>
电子邮件链接链接目标：电子邮件【系统自带的电子邮件】 <a href="mailto:12345@qq.com">点击内容</a>
锚链接链接目标：锚点 1.建立锚点
<a name="锚点名"></a>

2.跳转
<a href="#锚点名">点击内容</a>

9、列表

列表的使用与word等软件的列表概念相似，只不过是应用在网页展示中。

1.有序列表

有序列表是指有数字编号或字母的列表项，可以使用css定义更多样式。

<!-- 有序列表 -->
    <ol type="a">
        <li>新闻一</li>
        <li>新闻二</li>
        <li>新闻三</li>
    </ol>

属性描述 type 设置符号类型值：1 a A I i 默认数字 start 从第几个开始【用于ol标签中】 value 从第几个开始【用于li标签中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新闻一</li>
        <li type="1" value="1">新闻二</li>
        <li>新闻三</li>
    </ol>

2、无序列表

无序列表是指没有数字编号或字母的列表项，可以使用css定义更多样式。

<!-- 无序列表 -->
<ul>
    <li>童装</li>
    <li>男装</li>
    <li>女装</li>
</ul>

属性描述 type 用于设置符号类型，默认：实心圆值：空心圆、正方形【用于ul、li】

<!-- 无序列表 -->
<ul type="square">
        <li>童装</li>
        <li type="circle">男装</li>
        <li>女装</li>
    </ul>

3、描述列表

描述列表指每个列表项有单独的标题。

<!-- 描述列表 -->
    <dl>
        <dt>开源产品</dt>
        <dd>Java封装库</dd>
        <dd>Web组件库</dd>
        
        <dt>网站导航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在网页开发中使用频率非常高，尤其是数据展示的时候。

10.1 基本使用

标签描述 table 代表表格标签 caption 表格标题 thead 表头部分 tbody 表格主体部分 tfoot 表格尾部

属性描述 border 表格边框 cellspacing 单元格与单元格间距 width 宽度 height 高度 bgcolor 设置背景颜色 background 设置背景图片 align 对齐方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程师</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

10.2 单元格合并

属性说明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程师</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

11、表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkbox)等等。

11.1 基本使用

表单需要使用表单标签来设置：

<form>
input元素
</form>

11.2 GET&POST

属性说明 action 后台地址 method 提交方式GET或POST

GET和POST区别：

1.GET

数据会显示在地址栏中，数据不安全
数据大小有限制
数据通过请求头传递

2.POST

数据不会显示在地址栏中，数据安全
数据对大小无限制
数据通过实体内容传递

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用户名</label>
        <input type="text" id="username">

        <label for="password">密码</label>
        <input type="password" id="password">
</form>

也可以将文本框放在label标签内部，这样就不需要设置id与for属性了。

11.4 INPUT

文本框用于输入单行文本使用，下面是常用属性与示例。

属性说明 type 表单类型,默认为text name 后端接收字段名 required 必须输入 placeholder 提示文本内容 value 默认指 maxlength 允许最大输入字符数 size 表单长度,一般用css来控制 disabled 禁用,不可提交后端 readonly 只读,可提交后端 accept 设置选中类型比如:.jpg capture 使用麦克风\视频或摄像头哪种方式获取手机上传文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" placeholder="请输入用户名" maxlength="5" size="50" required>
</form>

11.4.2 调用摄像头

当input类型为file时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码.

<form action="后端接口" method="POST">
        <label for="file">上传文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他类型

通过设置表单的type字段可以指定不同的输入内容.

类型说明 email 输入内容为邮箱 url 输入内容为URL地址 password 输入内容为密码项 tel 电话号,移动端会调出数字键盘 search 搜索框 hidden 隐藏表单 submit 提交表单 reset 重置表单 button 自定义按钮

11.4.4 HIDDEN

隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义.

<input type="hidden" name="id" value="1">

11.4.5 SUBMIT

创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据,比如:AJAX,或者Html的表单按钮.

a.使用input构建提交按钮,如果设置了name值,那么按钮数据也会提交到后台,如果有多个表单项可以通过这些进行判断是哪个表单提交的.

<input type="submit" name="submit" value="提交表单">

b.使用button也可以提交,设置type属性为submit或不设置都可以提交表单.

<button type="submit">提交表单</button>

11.4.6 禁用表单

通过为表单设置disabled或readonly都可以禁止表单,单readonly表单的数据可以提交到后端

<input type="text" value="数据" readonly>

11.4.7 PATTERN

表单可以通过设置pattern属性指定正则验证.

属性说明 pattern 正则表达式验证规则 oninvalid 输入错误时触发的事件

<form action="">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('请输入5~20位字母的用户名')">
        <button>提交表单</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor , ckeditor等.

属性说明 cols 列字符数(一般使用css控制更好) rows 行数(一般使用css控制更好)

<textarea cols="30" rows="3">请踩踩我......</textarea>

11.4.9 SELECT

下拉列表项可用于多个值中的选择.

属性说明 multiple 支持多选 size 列表框高度 optgroup 选项组 selected 选中状态 option 选项值

<form action="">
        <select multiple size="10">
            <option value="">选择课程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

单选框指只能选择一个选项的表单,如性别的选择:男 , 女 , 保密只能选择一个.

属性说明 checked 选中状态

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

复选框指允许选择多个值的表单

属性说明 checked 选中状态

<form action="">
        <input type="checkbox" name="JAVA" id="java">
        <label for="java">JAVA</label>

        <input type="checkbox" name="WEB" id="web">
        <label for="web">WEB</label>
    </form>

11.4.12 FILE

文件上传有很多方式,可以使用插件或者JS拖放上传处理.Html本身也提供了默认的上传功能,只是上传效果并不是很美观.

属性说明 multiple 支持多选 accept 允许上传类型.png , .psd 或者 image/png , image/gif

<form action="" enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="上传">
    </form>

11.4.13 日期时间

属性说明 min 最小时间 max 最大时间 step 间隔: date缺省是1天 week缺省是1周 month缺省是1月

a.日期选择

<h1>日期选择</h1>
    <form action="">
        <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
    </form>

b.周选择

<h1>周选择</h1>
    <input type="week" name="" id="">

c.月份选择

<h1>月选择</h1>
    <input type="month" name="" id="">

d.日期与时间

<h1>日期与时间</h1>
    <input type="datetime-local" name="" id="">

11.4.14 DATALIST

input表单的输入值选项列表

<form action="">
        <label for="username">用户名</label>
        <input type="text" name="" id="usernmae" list="less">
        <datalist id="less">
            <option value="JAVA">后台管理语言</option>
            <option value="CSS">美化网站页面</option>
            <option value="MYSQL">掌握数据库使用</option>
        </datalist>
    </form>

12、框架集

frameset元素可定义一个框架集。它被用来组织多个窗口（框架），每个框架存有独立的文档，在其最简单的应用中，frameset元素仅仅会规定在框架集中存在多少列或多少行，您必须使用cols或rows属性。

注意事项：由于是分割原网页，所以我们不能在body中进行编写，在head中进行分割。

标签说明 frameset 框架集 frame 框架

属性说明 cols 定义框架集中列的数目和尺寸 rows 定义框架集中行的数目和尺寸 frame border 去除框架边框 scrolling 去除滚动条

12.1 垂直框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset cols="50%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
    </frameset>
</head>
<body>
    
</body>
</html>

12.2 水平框架

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Html水平框架</title>
		<frameset rows="50%,*" >
				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
		</frameset>
	</head>
<body>
</body>
</html>

12.3 混合框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html混合框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

12.4 导航框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html美女</title>
</head>
<body>
    
    <img src="../images/10.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html野兽</title>
</head>
<body>
    

    <img src="../images/timg.gif" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html动物</title>
</head>
<body>
    
    <img src="../images/4.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html链接</title>
</head>
<body>

    <a href="Html美女.html" target="view">美女图片</a>
    <a href="Html野兽.html" target="view">野兽图片</a>
    <a href="Html动物.html" target="view">动物图片</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="Html链接.html" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

13、内联框架

iframe元素会创建包含另外一个文档的内联框架。

属性说明 align 对齐方式，后期采用css的方式进行设置 width 设置宽度 height 设置高度 src 设置iframe中显示的文档的URL name iframe的名称 scrolling 是否显示滚动条 frameborder 设置iframe的边框

三部分附录（因为暂时不支持插入超链接所以部分内容无法显示）

附录一 DIV命名规范

企业DIV使用频率高的命名方法
网页内容类
标题: title
摘要: summary
箭头： arrow
商标： label
网站标志： logo
转角/圆角：corner
横幅广告： banner
子菜单： subMenu
搜索： search
搜索框： searchBox
登录： login
登录条：loginbar
工具条： toolbar
下拉： drop
标签页： tab
当前的： current
列表： list
滚动： scroll
服务： service
提示信息： msg
热点：hot
新闻： news
小技巧： tips
下载： download
栏目标题： title
热点： hot
加入：joinus
注册： regsiter
指南： guide
友情链接： friendlink
状态： status
版权： copyright
按钮： btn
合作伙伴： partner
投票： vote
左右中：left right center

注释的写法: /* Footer */ 内容区/* End Footer */
id的命名:
页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的:current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

class的命名:
颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9px {font-size: 9pt; }
对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事项::
一律小写;
尽量用英文;
不加中杠和下划线;
尽量不缩写，除非一看就明白的单词.

推荐的 CSS 书写顺序：
显示属性
display
list-style
position
float
clear
自身属性
width
height
margin
padding
border
background
文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

附录二 CSS精灵

CSS精灵原理以及应用
CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。
该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
一个简单的例子：
一张图片作出一个按钮的三个状态
一个链接用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active <a class="button" href="#">链接</a>
加入右侧的图片为：200px 65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。

a {
 display:block; 
 width:200px; 
 height:65px; 
 line-height:65px; /*定义状态*/
 text-indent:-2015px; /*隐藏文字*/
 background-image:url(button.png); /*定义背景图片*/
 background-position:0 0;
 /*定义链接的普通状态，此时图像显示的是顶上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
}
a:active {
 background-position:0 -132px; 
 /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
}

更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值
如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位
优点：
减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
提高页面的加载速度
sprite技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNGsprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。
不足：
CSS雪碧的最大问题是内存使用
影响浏览器的缩放功能
拼图维护比较麻烦
使CSS的编写变得困难
CSS 雪碧调用的图片不能被打印
错误得使用 Sprites 影响可访问性

附录三一些tips解决方案

页面优化实践

从下面的几个方面可以进行页面的优化：
减少请求数
图片合并
CSS文件合并
减少内联样式
避免在 CSS中使用 import
减少文件大小
选择适合的图片格式
图片压缩
CSS 值缩写（Shorthand Property)
文件压缩
页面性能
调整文件加载顺序
减少标签数量
调整选择器长度
尽量使用CSS 制作显示表现
增强代码可读性与可维护性
规范化
语义化
模块化

写DIV+CSS 的一些常识

不要使用过小的图片做背景平铺
这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200200=40, 000 次，占用资源
无边框
推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源
慎用通配符
所谓通配符，就是将CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
CSS的十六进制颜色代码缩写
习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
样式放头上，脚本放脚下。不内嵌，只外链
坚决不用 CSS表达式
使用引用样式表，而不是通过@import 导入。
一般来说，PNG比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。
千万不要在 HTML中缩放图片，一者不好看，二者占资源。
正文字体最好用偶数
12px、14px、16px，效果非常好。特例，15px。
block、ul、ol等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
段落之间，至少要有一倍行距
强行指定某些元素的 line-height，正文 1.6倍于文字大小，标题1.3倍。
中文标点用全角
英文夹杂在中文中，左右空格，半角。
中文字体的粗体和斜体，远离较好

常用代码片段

雅虎工程师提供的CSS初始化示例代码【仅供参考】
可以在html头文件中直接引用，从而避免浏览器的不兼容带来的错误。

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
 margin:0; padding:0; 
}
body {
 background:#fff; 
 color:#555; 
 font-size:14px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
 font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
 font-weight:normal; 
 font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
 font-style:normal; 
 font-weight:normal;
}
a { 
 color:#555; 
 text-decoration:none; 
}
a:hover { 
 text-decoration:underline; 
}
img {
 border:none;
}
ol,ul,li { 
 list-style:none; 
}
input, 
textarea, 
select, 
button { 
 font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
 border-collapse:collapse; 
}
html {
 overflow-y: scroll;
} 
.clearfix:after {
 content: "."; 
 display: block; 
 height:0; 
 clear:both; 
 visibility: hidden;
}
.clearfix { 
 *zoom:1; 
}

mobile meta标签

<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

表格不被撑开

table-layout: fixed; word-break: break-all;;border-collapse: collapse

不设宽高居中

<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
 <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
 <input type=”button” value=”item1″ />
 </span>
</div>

透明度的兼容代码

filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

文字溢出点点省略

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

清除浮动的几种方法
方法一：投机取巧法 – 不推荐
直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强
方法二：overflow + zoom方法 –不推荐
.fix{overflow:hidden; zoom:1;}
此方法优点在于代码简洁，涵盖所有浏览器
方法三：after + zoom方法 -推荐–此方法可以说是综合起来最好的方法了
clearfix只应用在包含浮动子元素的父级元素上

.fix{zoom:1;}
.fix:after{
 display:block; 
 content:'clear'; 
 clear:both;
 line-height:0; 
 visibility:hidden;
}

更多代码片段详情
实用的60个CSS代码片段

一些总结

自动继承属性：
color
font
text-align
list-style
…
非继承属性：
background
border
position
…
具有破坏性的元素：
float
display:none;
position:absoblute/fixed/sticky;
具有包裹性的元素：
display:inline-block/table-cell
position:absolute/fixed/sticky
overflow:hidden/scroll
消除图片底部间隙的方法
图片块状化-无基线对齐
img{display:block;}
图片底线对齐
img{vertical-align:bottom;}
行高足够小 - 基线位置上移
.box{line-height:0;}

一些概念

BFC
BFC全称”Block Formatting Context” 中文为“块级格式化上下文”
记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
优雅降级(graceful degradation)
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
渐进增强 progressive enhancement：
是在浏览器开启JavaScript功能后，如果浏览器版本不支持某些 JavaScript 能力，我们解决这种问题的方式
平稳退化
是在浏览器没有JavaScript功能，或没有开启JavaScript功能情况下，我们解决这种问题的方式；

学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！

由于汉字的特殊性，在css网页布局中，中文排版有别于英文排版。排版是一个麻烦的问题，小编认为，作为一个优秀的网页设计师和网页制作人员，掌握一些简单的中文排版技巧是不可或缺的，所以今天特意总结了几个简单实用的技巧，希望对大家有所帮助。

Web前端教程

　　一、如何设定文字字体、颜色、大小等

　　font-style设定斜体，比如font-style:italic

　　font-weight设定文字粗细，比如font-weight:bold

　　font-size设定文字大小，比如font-size:12px

　　line-height设定行距，比如line-height:150%

　　color设定文字颜色，注意不是font-color喔，比如color:red

　　font-family设定字体，比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif

　　二、使用margin，text-align 控制段落

　　中文段落使用p标签，左右、段前段后的空白，都可以通过margin来控制。

　　比如

　　margin:18px 6px 6px 18px;/*分别是上、右、下、左，十二点开始的顺时针方向*/

　　}

　　而text-align则用于文字的对齐方式。

　　比如

　　text-align:center;/*居中对齐*/

　　}

　　除了居中对齐之外,对齐方式还有左对齐、右对齐和两端对齐，对应的属性值分别为left、right、justify。

　　提示：由于默认的margin值会导致页面排版出现问题，特别是ul、ol、p、dt、dd等标签。小编的解决之道就是把所有标签的margin值定义为0。

　　三、竖排文字—使用writing-mode

　　writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。

　　写法如

　　writing-mode:tb-rl;

　　}

　　四、使用list-style美化列表

　　如果我们的排版涉及到列表，不妨考虑为它添加些项目符号进行美化。

在CSS里，项目符号包括disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无）。

　　嘿嘿！我们可用的项目符号数量不少喔，但美中不足的是我们不能为它们设定大小，也不能设定垂直方向上的对齐。

　　如果我们想设定一个列表的项目符号为方块，可以这样写：

　　li{

　　list-style:square;

　　}

　　小编在这里提醒大家一下：当一个项目列表的左外边距设为零的时候，list-style-position:outside的项目符号不会显示。

　　五、使用text-overflow 实现固定宽度汉字截断

　　用后台语言可以对从数据库里的字段内容做截断处理，如果想对列表应用该样式，我们可以这样写：

　　li{

　　overflow:hidden;

　　text-overflow:ellipsis;

　　white-space:nowrap;

　　}

　　六、首字下沉

　　如果你想制作首字下沉效果，不妨考虑伪对象:first-letter并配合font-size、float属性。

　　p:first-letter{

　　padding:6px;

　　font-size:32pt;

　　float:left;

　　}

　　七、首行缩进—使用text-indent

　　text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。

可以这么写

　　text-indent:2em;/*em是相对单位，2em即现在一个字大小的两倍*/

　　}

　　注意：如果font-size是12px的话，那么text-indent:2em则代表缩进24px。

　　八、固定宽度汉字（词）折行—使用word-break

　　在排版的时候，你是否为一个词组，其中一个字出现在上面而另一个字折断到下一行去而发愁呢？不用愁，这时使用word-break就可以轻松解决问题了。

　　九、关于汉字注音—使用ruby标签和ruby-align属性

　　最后小编向大家介绍一下ruby标签和ruby-align属性。这是一个比较冷门的技巧，可能平时使用不多，但小编觉得不妨提供给大家预防不时之需。

　　如果我们想为汉字注音就可以这样写

　　<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

　　然后通过ruby-align设置其对齐方式。

以上就是今日整理的“Web前端教程：简单实用的CSS网页布局中文排版技巧”一文，希望为正在学习Web前端的同学提供参考。你记住并理解了吗？以后酷仔每日均会提供MySQL、Python及Web相关的教程及习题，赶快学习起来吧。

在线咨询

上一篇：无极低码：100套大屏可视化源码，包含多个行业
下一篇：HTML+js响应键盘快捷键ctrl+s实现文章保存提交功能

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商