前端零基础入门-步骤一：页面结构层HTML-01-HTML基础

1-HTML基础

第1章基础语法

html是超文本标记语言
<head>,<title>标签里的内容不会在网页文档中显示
<hr/>标签是水平线，不需要成对出现
注释代码：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
</head>
<body bgcolor="grey">
	<p>HELLO,everyone.This is my first page!</p>
</body>
</html>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

第2章文章段落

2.1 文档声明和META标签

<html>,<body>,<head>标签是html文档结构标签，<!DOCTYPE HTML>不属于html标签，它用于定义文档类型

网页中不能正常显示中文，出现乱码现象，使用meta标签设置编码格式：<meta charset="utf-8">

<!DOCTYPE html>
<html>
<head>
	<title>第一个网页</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	大家好，一起来学习html标记语言
</body>
</html>

3.如果想在html页面中显示空格，使用

标题标签：<h1></h1>~<h6></h6>

段落标签：<p></p>

align对齐属性值：

left:左对齐内容

right:右对齐内容

center:居中对齐内容

justify:对行进行延申，这样每行都可以有相等的长度

换行标签<br/>

5.一个<p></p>标签代表一个段落，两个<p>标签中的文本内容不在同一行，在<p>标签中，使用<br/>文本内容的位置只是换行，其实还是一个段落

6.<pre></pre>标签用于预定义格式显示文本，即文本在浏览器中显示时遵循在HTML原文档中定义的格式

<!DOCTYPE html>
<html>
<head>
	<title>练习1</title>
	<meta http-equiv="Content-Type" content="text/http;charset=utf-8"/>
</head>
<body>
	<h3 align="center">《早发白帝城》</h3>
	<p align="center">朝辞白帝彩云间，千里江陵一日还。</p>
	<p align="center">两岸猿声啼不住，轻舟已过万重山。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>练习2</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<h1>敕勒歌</h1>
	<h2>朝代：南北朝</h2>
	<h3>作者：佚名</h3>
	<p>  敕勒川，<br/>
	     阴山下，<br/>
	     天似穹庐，<br/>
	</p>
	<pre>
  笼盖四野，
   天苍苍，
   野茫茫，
风吹草低见牛羊。
	</pre>
</body>
</html>

2.2 文字和段落标签

文字斜体：<i></i>和<em></em>
加粗：<b></b>和<strong></strong>
下标：<sub></sub>
上标：<sup></sup>

特殊符号

任务

<!DOCTYPE html>
<html>
<head>
	<title>任务</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p align="center">关于我们  |  招聘信息  |  联系我们  |  意见反馈</p>
	<hr/>
	<p align="center">Copyright © 2016 imooc.com All Rights Reserved</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>任务</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>公式:x<sup>2</sup>+x=0 解:x<sub>1</sub>=0;x<sub>2</sub>=-1</p>
</body>
</html>

第3章列表标签

3.1 列表标签-无序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ul type="disc">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ul>
	<ul type="square">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ul>
</body>
</html>

3.2 列表标签-有序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ol type="a">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ol>
	<ol type="i">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ol>
</body>
</html>

3.3 列表标签-定义列表

<dt><dd>是同级标签

第四章图像和超链接

4.1 图像

图像标签

绝对路径：

相对路径：

效果图

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>一幅图像:<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jpg" width="30%"></p>
	<p>一幅动画图像:<img src="http://climg.mukewang.com/58c11324000144f703550220.jpg" height="50px" width="50px"></p>
</body>
</html>

4.2 超链接

超链接标签

空链接：<a href="#"> </a>

4.3 锚链接

定义锚（同一页面）

任务：

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p><a name="dingbu">这里是顶部</p>
	<p><a href="#shuiguo">水果</p>
	<p><a href="#shucai">蔬菜</p>
	<p><a href="#yundong">运动</a></p>
	<h3><a name="shuiguo">水果</a></h3>
	<ul>
		<li>香蕉</li>
		<li>苹果</li>
		<li>葡萄</li>
		<li>梨</li>
		<li>西瓜</li>
		<li>樱桃</li>
		<li>菠萝</li>
		<li>橙子</li>
		<li>柚子</li>
		<li>芒果</li>
	</ul>
	<p><a href="#dingbu">返回顶部</a></p>
	<h3><a name="shucai">蔬菜</a></h3>
	<ul>
		<li>西红柿</li>
		<li>黄瓜</li>
		<li>土豆</li>
		<li>芹菜</li>
		<li>蒜苔</li>
		<li>西葫芦</li>
		<li>香菇</li>
		<li>菠菜</li>
		<li>豆角</li>
		<li>油菜</li>
	</ul>
	<a name="yundong"></a>
	<p><a href="#dingbu">返回顶部</a></p>
</body>
</html>

定义锚（不同页面）

4.3 链接扩展功能

1. 电子邮件链接

2.文件下载

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="mailto:2539391306@qq.com.cn">邮箱链接</a>
	<a href="58ca5b6700018dfc02400135.zip">文件下载</a>
</body>
</html>

原文链接：https://blog.csdn.net/qq_43405634/article/details/103789819

由于汉字的特殊性，在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相关的教程及习题，赶快学习起来吧。

天开始小编将会给大家讲解HTML的入门知识以及做项目会遇到的某些问题以及如何解决此类问题的方法。说道网页设计，HTML是我们必不可少的一部分。基础网页的构成，无论怎么变幻，都是由原声的HTML代码组成构成网页。

下面我就根据工作中所用和看过的书籍一点一点总结下我们常用的HTML格式和代码。

一、什么是HTML。

HTM不是一段编程语言，而是一款标记语言，本身不能显示在浏览器中。经过浏览器的编释和编译，才能正确反映HTML标记语言的内容。HTML从1.0到5.0经历了巨大的变化，从单一的文本显示功能到多功能互动，已经成为了一款非常成熟的标记语言。

二、HTML文件的基本结构

<!doctype html>

<html>文件开始标记

<head>文件头开始的标记

</head>文件头结束

<body>文件主题的内容

</body>文件主题的结束

</html>文件结束的标记

这里主要说明title和meta(元信息)

三、HTML主要常用标签

3.1标题

3.2 标题字对齐属性align

默认情况下，标题文字是左对齐的。在网页制作过程中，常常需要选择对其他的方式，这时我们就需要用到align属性。

3.3 段落标记p

段落标记是文档中最常见的标记，<p>用来起始的一个段落。

3.3 换行标记

换行标记<br>作用是在不另起一段的情况下将当前文本强制换行。

3.4 不换行标记nobr

<nobor>表示的是不换行的标记</nobor>

3.5 水平线

<hr/>

四、建立超链接

与自身网站页面有关的连接被称为内部连接

4.1绝对路径

绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常精确地找到，除非是目标文档的位置发生变化，否则连接不会失效。

4.2相对路径

为了避免绝对路径的缺陷，对于在同一站点之中的连接来说，使用相对路径是一个很好的方法。

4.3 内部连接

属性值

含义

-self在当前页面中打开连接

-blank在一个全新的空白窗口中打开连接

-top在顶层框架中打开连接，也可以理解为在根框架中打开连接

-parent在当前框架的上一层里打开连接

4.4 锚点连接

锚点到本页面中的位置

<a neme="2">XX产品特点</a>

锚点到其他页面的位置

<a href="index.html#1"></a>对应连接到index.html中name=1的位置

4.5 连接到外部网站

在设置友情链接时，需要打开HTTP协议进行外部连接访问。

4.6 连接到E-mail

4.7 连接到FTP

FTP代表文件传输协议，一个FTP站点通常包含一些上传和下载文件的文件目录。

大部分FTP网站需要使用用户名和密码来登录。

当然还有其他的一些连接方式，例如文件下载，连接到Telnet等。这些都会可以用a标签实现。

HTML基础就先讲到这里，后面退出DIV设计网页格式已经网页分框的实现。

在线咨询

上一篇：听说过CSS in JS，那你听说过JS in CSS吗
下一篇：网页前端设计-13选择器

您的项目需求

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

整合营销服务商