前端开发不仅是网页制作，其主要工作是开发用户操作界面，即不仅要设计出复杂炫酷的页面，又要贴合于用户的使用体验，还要配合服务器新的内容的开发，同时对于不同的设备，我们还要解决适配兼容问题，故我们就需要一定的开发技术
而HTML，CSS和Javascript作为前端开发的三大核心技术，我们需要有一定的扎实基础，该系列博客作为入门和了解的教程
一、HTML超文本标记语言
HTML就是用来搭建网页结构的一种标记语言
- HTML(Hypertext Markup Language)
Hypertext(超文本)：页面中的各种内容，即包括文字，超链接，图片，音频，视频等
Markup(标记或标签)：其内容都是放在标签或者标签对中，下面将会重点说明
Language(语言)：就是标签组成的语言
二、CSS层叠样式表
给网页添加样式，使之突出重点更吸引人
三、Javascript
让网页响应某种行为，产生交互效果，使页面鲜活
在了解了三大核心技术之后我们需要知道我们要用到的软件，即分为三类：图片编辑软件，代码编辑器，浏览器
一、图片编辑软件
最常用的即为PS，用来确定尺寸，文字大小和颜色，以及我们需要学习一下图片尺寸和分割图片的方法
- 图片尺寸
利用选框工具即可确定框内区域的大小，由于PS默认的标尺为厘米，故我们需要修改一下
PS主界面 – 编辑 – 首选项 – 常规 – 单位与标尺 – 像素
进行上述步骤即可 - 分割图片
将图片选中的区域复制，再新建文件，并设定其画布大小，粘贴即可，最后保存的时候需要单击菜单 文件 – 存储Web所用格式 – PNG-24 ，并且勾选透明度即可
二、代码编辑器
可使用记事本，atom，sublime等编辑器（我使用的是sublime）
在我看来我比较倾向于sublime，因为python的编辑器也是sublime（嘻嘻嘻）
三、浏览器
用来展示网页内容的工具，谷歌浏览器比较推荐，但是一般的浏览器也能实现我们所需的效果，这里不包括较低版本的IE浏览器
在对基础内容有了一定了解的前提，我们需要正式了解一下如何创建HTML页面
在进行代码块编写之前，需要先将文件保存为.html为后缀的程序，同时设定其打开方式为浏览器，再完成上述步骤后，我们将打开一个空白的浏览器
我们首先了解一下基本结构，再细分其中的标签对
<!doctype html>
<html>
<head>
<meta charset = 'utf-8'>
<title>无标题文档</title>
<head>
<body>
</body>
</html>
-
<!doctype html >
不区分大小写，是对于文档类型的声明 -
html标签对部分
开始文档的实际部分 -
head标签对部分
设置网页文档的头部信息，即网页标题，字符集，网页描述等信息 -
title标签对部分
网页文档的标题
以及用于搜索引擎索引，作为搜索关键字以及结果的标题使用 -
meta部分
定义了字符集，字符编码为utf-8，称为万国码，涵盖地球上几乎所有地区的文字， 使页面在任何地区都能正常显示
同时我们也可以设置关键字，但要注意的是用户是看不到该部分内容的，但搜索引擎会对于内容进行网页搜索
<meta name="keywords" content="关键字1， 关键字2，...">
设置描述信息
<meta name="discription" content="网页描述信息">
- body标签对部分
页面的主体内容，即会显示在浏览器整个页面的部分
在进行了基本的结构的了解，我们需要知道body内部需要什么样的标签才能实现如此内容丰富和排版精致的页面
一、标签之间的关系
- 嵌套关系
即父子级关系，即可以在一个一个块内实现层次叠加 - 并列关系
就涉及和体现了不同模板块之间的排列方式
二、常见标签对及其用法
注意双标签的后一个均有一个反斜杠/
双标签
基本标签
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
文本格式化
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
样式/区块
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
单标签
基本标签
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
文本格式化
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
图片处理
<img src="URL" alt="替换文本" height="42" width="42">
在进行了上述的学习，我们只能编辑最简单的文字为主的页面，故我们需要知道CSS的强大用法，实现色彩，格式的新颖
(由于CSDN的编辑其实也是一种网页设计的制作，故我们在进行标签对的描述的时候若使用官方且正式的<>来描述会导致页面显示不正确，故在上述在对标签描述中只列出括号内的，而不包含<>)
该系列博客参考了聂常红 刘伟著的前端HTML+CSS修炼之道
第一篇HTML+CSS学习笔记到此结束 cheers! ?
2376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
