超文本（HTML）学习笔记
前言
机缘巧合之下想学习下网站建设，因为很久之前就想建立一个个人博客，以记录和分享自己学习的一些点滴。近期想整理出来他的学习架构出来，想了想这个以后再完善，大致是这样地，就我理解而言，首先是HTML语言语法结构的学习，然后就是CSS的学习，这两者之间的关系可以理解为合作共赢，HTML自身产生的视觉效果还不够完美，然后CSS就是对他进行渲染，以提高网页显示对象的艺术感，Javascript则是为了进一步构建视觉效果，实现动态网页。
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html> #针对Html5
<html>
<head>
<title>Page title </title>
</head>
<body>
<h1>my first headings </h1>
<p>my first paragraph. </p>
</body>
</html>
那么超文本标记语言只不过是一种描述信息呈现方式的语言，那么跟咱们常规文档还是有很多相似之处，所以可以类比这去理解相关语法或者进行相关呈现方式的研究。
基本语法
HTML的基本语法特征都是以<B> </B>开始和结束，写代码是也注意养成这个习惯，当然可以借助一些代码编辑器，可以自动生成这样的格式
文档的开始和结束
1
2
<html>
</html>
文档的头部标记
主要说明文件的标题和整个文件的公用属性，可以通过
1
2
3
<head>
<title> 标题栏显示的部分 </title>
</head>
文档的主体
可以设置文档的背景和其他属性
1
2
3
<body >
各种内容，文字、音频、动画、超链接等等
</body>
标题(heading)
HTML 标题（Headline）是通过<h1> - <h6> 标签来定义的.这点跟Markdown很像，都是六个标题格式
1
2
3
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
段落（paragraph）
HTML 段落是通过标签 <p> 来定义的，计算机理解为==定义一个换行符==，如果对应各式各样的文档内容，这个也很好理解，段落之间会有空白分割
1
2
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
页眉页脚
1
2
<header>页眉</header>
<footer>页脚</footer>
链接
HTML 链接是通过标签 <a> 来定义的,从这里可以看出来文档的需求都是相通的，可以是链接外部的也可是链接内部的文件，实现方式不一样而已，绝对路径和相对路径的设置。
1
2
3
4
5
6
7
8
<a href="http://www.runoob.com">这是一个链接</a>
<a href="about.html"> 导入</a>
<a href="../about.html"> 公司简介</a>
<a href="2.doc"> 文档</a>
<a href="mailto:qq邮箱"> 邮箱</a>
<a href="about.html" target="_blank"> 导入</a>
其中href="http://www.runoob.com"这一部分属于属性控制了。
列表：有序列表和无序列表
跟word里面的项目符号和自动编号类似，可以进行嵌套使用,也有自己的属性，通过type属性值控制建立不同类型的有序和无序列表。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul type="circle">
<li>item1 </li>
<li>item1 </li>
<li>item1 </li>
</ul>
<ul type="disc">
<li>item1 </li>
</ul>
<ol>
<li>1</li>
<li>1</li>
</ol>
<ol type="A">
<li>1</li>
<li>1</li>
</ol>
自定义列表
1
2
3
4
5
6
<dl>
<dt>作业1</dt>
<dd>内容</dd>
<dt>作业1</dt>
<dd>内容</dd>
</dl>
文字
特殊字符的输入
1
2
3
< 代表<
> 代表>
图像
HTML 图像是通过标签 <img> 来定义的，路劲可以本地路径也可以是网络路径URL(uniform resource locator统一资源定位器)，alt图片文本描述属性方便网页搜索.
1
<img src="/images/logo.png" width="258" height="39" alt="美丽的花朵"/>
排列图像
1
<p>图像<img src="/images/logo.png" align="top"/>
水平线
<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
1
2
3
4
5
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
效果图
注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们,也可以用于注释代码
注释写法如下:
1
<!-- 这是一个注释 -->
换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>标签：
<br />元素是一个==空的 HTML 元素==。由于关闭标签没有任何意义，因此它没有结束标签。
1
<p>这个<br>段落<br>演示了分行的效果</p>
效果图
属性：HTML元素的格式化
属性始终在开始标签
1
<a hreg=“http://www.baidu.com/”>百度 </a>
样式表格式的优先级
内联样式）Inline style > （内部样式）Internal style sheet >链接样式>导入（外部样式）External style sheet > 浏览器默认样式
样式控制的方法-精确制导
选择器分为：标签选择器、类选择器、全局选择器、ID选择器和伪类选择器、组合选择器等
学习他人的网页代码
这里特指的一些比较有名网站的源码分析，可以供我们参考学习。方法很简单
你是否看过一些网页然后惊叹它是如何实现的的。
如果您想找到其中的奥秘，只需要单击右键，然后选择=="查看源文件"（IE）或"查看页面源代码"（Firefox）==，其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
==未完待续！==
文件
当我们读取一个网址的时候，浏览器默认会去找一个文件index.html，这包含着网页的基本框架
代码编辑器
- sublime text3
快速输入基本语句，比如我想输入
还包含测试文字，比如<p> lorem </p> 会显示测试文字
html 然后按tap键
