整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
由于汉字的特殊性，在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来控制。
比如
p{
margin:18px 6px 6px 18px;/*分别是上、右、下、左，十二点开始的顺时针方向*/
}
而text-align则用于文字的对齐方式。
比如
p{
text-align:center;/*居中对齐*/
}
除了居中对齐之外,对齐方式还有左对齐、右对齐和两端对齐，对应的属性值分别为left、right、justify。
提示：由于默认的margin值会导致页面排版出现问题，特别是ul、ol、p、dt、dd等标签。小编的解决之道就是把所有标签的margin值定义为0。
三、竖排文字—使用writing-mode
writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。
写法如
p{
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可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。
可以这么写
p{
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相关的教程及习题，赶快学习起来吧。
HTML的全称是超文本标记语言，英文全称是HyperText Markup Language。如果您是零基础的话，看到这个名字，即使是汉语的，估计也会不知所云。
超文本指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。通俗来说就是多个文本之间通过超链接相互连接在一起，这些相互连接的文本集合称为"超文本"。超文本是网页制作一个非常重要的概念，可以说网络的精髓就在于"互联"。
这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。（孙素华编著．Dreamweaver CS5 Flash CS5 Photoshop CS5网页设计从入门到精通：中国青年出版社，2014.10：第16页）
标记语言的概念比较复杂，简单来说，HTML并不是程序语言（不同于C或Python），只是一种在网页中显示资料排版位置的标记结构语言。这句话提炼一下就是"标记信息在页面中排版结构的语言"。
如果读的不太明白，在下一节"HTML基本框架"中会对HTML的排版结构规则进行直观展示，如果您读不懂可以尽情的跳过，毕竟我们的重点是怎么用。
HTML框架简单说就是任何HTML网页文件中都会包含的基本代码内容。如果我们打算写一个页面，就一定要把框架代码写入后才能正式开始添加内容。框架代码如下：
<!DOCTYPE HTML><html> <head> </head> <body> </body> </html>
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
这七行代码是所有HTML页面所共有的，也就是HTML的框架了。不信我们来验证一下。
例子一，头条的文章页面（电脑版）网址：https://www.toutiao.com/i6785149184245760516/
笔者使用Firefox（火狐）浏览器，输入网址后点击键盘上的F12,，如图所示
我们可以看到页面下半部分出现了一个调控台。
点击查看器即可看页面代码。代码如下：
放大一些，大家看看，<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>这些标签是不是一个不少，只是中间多了很多内容而已。
一个例子不具有普适性，下面我们再看一个例子，我随便找了个新闻页面，网址：https://mil.eastday.com/a/200125113254400.html
使用同样的方法打开查看器看代码，如图：
是不是框架中的代码一个也不少吧。
所以，大家请在自己的电脑中新建一个txt文件，将HTML框架粘贴到txt文件中，并命名为"HTML框架"。以后我们写的每一个页面都会从这个框架开始。
通过对框架中的代码进行观察，细心的读者可能已经发现了HTML这种标记语言的书写规律。
规律1：每一个语句都是包含在<>尖括号内的。这是HTML标记语言的基本特点之一，大家一定记牢。
规律2：除了<!DOCTYPE HTML>这个标签外，其他标签都是成对出现！例如<html>与</html>，<head>与</head>，<body>与</body>。
规律3：这个规律通过观察代码也不难发现，即<html></html>两个标签中间夹着<head></head>和<body></body>，我们把<head></head>标签称为<html></html>标签的子标签，反过来<html></html>标签是<head></head>标签的父标签，<head></head>和<body></body>称为并列关系或者兄弟关系。而<!DOCTYPE HTML>是一个声明语句，属于六亲不认的。
各种关系如下图所示：
这样就回到了之前我们解释"标记语言"的问题上。我们说"标记语言"是"标记信息在页面中排版结构的语言"，这种父子关系、兄弟关系就可以理解为一个页面的"结构"，这种结构又与页面的排版有关。
在下一期中，我们会通过练习来解释"结构"与排版的关系。
喜欢的小伙伴请加关注，有任何问题可以留言给我，欢迎指正批评，感激不尽！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
一篇介绍了网页的基本结构，那如何编写网页的内容? 前提是要学会HTML标签的用法，本篇主要介绍HTML标签是什么，如何学习，需要大概多长时间学习。
本篇主要基于html5介绍，html5 是最新版的标准，之前的版本可以自己了解下。
HTML的英文全称是Hyper Text Markup Language，直译为超文本标记语言。它是全球广域网上描述网页内容和外观的标准。HTML包含了一对打开和关闭的标记，在当中包含有属性和值。标记描述了每个在网页上的组件，例如文本段落、表格或图像等。
事实上，HTML是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程序设计语言，因为它缺少程序设计语言所应有的特征。HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。
一个html标签基本结构如下：
<标签名称 属性="属性值"></标签名称> 或 <标签名称 属性="属性值"/>有以下特点：
没有捷径，需要多看，多练。在这里我不一一介绍每个标签的具体含义及用法，相关语法可以参考以下几个网站：
制定一个学习计划,每天坚持下去
要求，每天花费3到5个小时学习，至少1到2周掌握常用的html标签含义及用法，可以按照上面介绍的标签进行分类学习，感谢关注，祝你学习愉快。
*请认真填写需求信息，我们会在24小时内与您取得联系。
