9113969-ff37899ceb04d044[1].png
服务器就是一台专门为用户服务的电脑，服务器中放着对应的首页内容，浏览器在地址栏输入网页地址并回车之后通过互联网浏览器会对网页地址对应的服务器发送请求，由服务器端的软件把服务器端首页的内容返回给浏览器，并且把首页的内容下载到用户的电脑上面，然后在浏览器中显示下载到的页面。
9113969-04549438b17536c3[1].png
DNS就是下面所说的域名解析系统。
9113969-e6f106fecff30ebe[1].png
浏览器去访问百度的服务器ip大部分用户记不住，但是大部分用户可以记住www.baidu.com，域名解析系统会把网址发送到域名解析服务器上帮助查看该网址对应的ip地址，然后返回到浏览器中对应的ip地址，浏览器会去访问具体的服务器，最后服务器会返回网页的内容。
QQ图片20180102102036.png
人的骨骼相当于HTML结构，衣服鞋子相当于CSS表现，行走奔跑跳跃就是javascript行为。
URL协议：
QQ图片20180102163326.png
QQ图片20180102163732.png
URL编码：内容转换为ASKII码值的过程，URL中的非ASCII码转为%%ASCII码。
为了使世界上的国家能够显示别国的语言。
QQ图片20180102164657.png
QQ图片20180102104236.png
http://www.runoob.com/try/try.php?filename=tryhtml_intro
<!DOCTYPE html>
//<!DOCTYPE>文档声明是一个 HTML 标签，它是用来告知 Web 浏览器页面使用了哪种 HTML版 本标准。在使用CSS时，文档声明标签会严重影响页面效果。
html是HTML5 中的文档类型，常见的还有HTML 4.01 和XHTML 1.0都规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset，以及XHTML 1.1。
文档类型不同他们所包含的元素也有可能不同，比如<audio>只有HTML5中包含，而Strict、Transitional 和 Frameset，XHTML1.1这几个文档类型却不包含它。
<html lang="en">
// <html>元素是 HTML 页面的根元素，<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。lang标签可以让搜索引擎了解该页面是以什么语言为主。
<head>
//文档的头部由 <head> 标签定义
一般用来申明使用的脚本语言，以及网页传输时使用的方式等 特效所使用的脚本语言插在这里。
head标签中包含的是给浏览器用的东西。
<meta charset="utf-8">
//告诉浏览器这页代码的编码格式，告诉浏览器器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。常见的字符编码有：gb2312、gbk、unicode、utf-8。例如：如果你的网页里面出现了中文，在头部没有”utf-8“的话，将会导致中文乱码。UTF-8包含全世界所有国家需要用到的字符，是国际编码，通用性强。
当浏览器解析当前的文档的编码和文档实际的编码不一致的时候会出现乱码的问题。
<title>菜鸟教程</title>
//用来定义文档的标题，这个标题会显示在浏览器的标题栏上
F)9QEH2OZD`HR87VB8[`@HO.png
比如我们可以查看本页面的源代码，可以找到<title>写文章 - 简书</title>，我们把这个页面保存为书签：
当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
<title> 标签是 <head> 标签中唯一要求包含的东西。
</head>
<body>
//文档的主体由 <body> 标签定义。
body标签在HTML中只能使用一次，通常你想要显示的网页内容都放在body中。body标签是网站显示给用户看的内容。
<p>我的第一个标题</p>
<h1>标题</h1>
//<h1> 元素定义一个大标题，hx（x=1-6）随着x的增加标题的字会越来越小。
QQ图片20180102190647.png
<p>2shdjkasdhaskhdj</p>
//<p> 元素定义一个段落，我试了试如果直接用enter代替换行的话，在网页中只会变成一个空格，所以另起一段的话需要再写一个<p></p>。
</body>
</html>
id属性
http://www.w3school.com.cn/html/html_links.asp
查看源代码可以找到
QQ图片20180102174301.png
QQ图片20180102174839.png
QQ图片20180102175240.png
QQ图片20180102175322.png
QQ图片20180102195754.png
QQ图片20180102202411.png
实例如下：
QQ图片20180102202355.png
表格标签的使用:
QQ图片20180102204818.png
table代表整个表格，一个tr代表一行表格，一个td代表一个单元格。
QQ图片20180102205826.png
thead代表表格每一列的头部标题
<thead>
<th>列名1</th><th>列名2</th><th>列名3</th><th>列名4</th>
</thead>
1 2 3 4分别会对应显示到每一列的第一行的头部。
QQ图片20180102205816.png
单元格合并：
QQ图片20180102210756.png
QQ图片20180102210737.png
rowspan合并行，colspan合并列。
块级标签独占一行，行级标签和其他行内标签共用一行:
QQ图片20180102211844.png
实例如下：
QQ图片20180102212017.png
QQ图片20180102211919.png
QQ图片20180102211945.png
div标签占用一整行，span标签只占用它所在的一块。
表单：
QQ图片20180102212354.png
<form></form>
功能：用于申明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。
语法：<FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="...">. . .</FORM>
属性解释见下表：
action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.
method=get或post指明提交表单的HTTP方法.可能的值为： post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.
enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"
TARGET="..."指定提交的结果文档显示的位置： _blank ：在一个新的、无名浏览器窗口调入指定的文档； _self ：在指向这个目标的元素的相同的框架中调入文档； _parent ：把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self； _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.
QQ图片20180102214417.png
生成的网页内容如下：
QQ图片20180102214243.png
普通的下拉列表：
QQ图片20180102213439.png
QQ图片20180102215240 - 副本 (2).png
value 属性规定在表单被提交时被发送到服务器的值。如上面的内容被提交到服务器时会收到name=1或者2，而不是name=公历或者农历。
可以多选的下拉列表：select中加入multiple=“multiple”
QQ图片20180103103657.png
QQ图片20180103103714.png
以及默认选项：input中是checked=“checked” select中是selected=“true”
如下:我在男的input标签中加入了checked 3的input标签中加入了checked，刚打开浏览器时它会自动选择上男和3。
QQ图片20180103104245.png
QQ图片20180103104232.png
单选框type=radio，多选框type=checkbox。
单选框中的name属性代表男女是一组的属性，只能选择一个。
QQ注册表单实例：
QQ图片20180103113232.png
QQ图片20180103113243.png
快速生成顺序数字的技巧：
QQ图片20180103112627.png
QQ图片20180103112636.png
feldset标签实现表单分组：
QQ图片20180103114115.png
QQ图片20180103114051.png
表单总结：
QQ图片20180103115144.png
QQ图片20180103115217.png
QQ图片20180103120213.png
QQ图片20180103121627.png
QQ图片20180103122105.png
QQ图片20180103121957.png
meta标签对网页内容无任何作用，他是为了与搜索引擎匹配度更高，与搜索内容越符文，则搜索排名更靠前，关键词越少权重越高，但是被搜索的概率降低。它包含在head中。
QQ图片20180103132039.png
KeyWords：
Keywords又叫关键词、关键字，其就是一个网站管理者给网站某个页面设定的以便用户通过搜索引擎能搜到本网页的词汇，关键词代表了网站的市场定位。网站的首页关键词至关重要。首页网站关键词代表了网站主题内容，内页和栏目页的关键词一般紧扣页面主题，代表的是当前页面或者栏目内容的主体。
密度
keywords密度是指keywords出现的次数和keywords关联字词出现的次数与整个网页文本之比，keywords在文本中出现的次数越多，那么keywords密度越高,反之就越低
Description：
在网站建设中，Description是出现在页面头部的 Meta 标签中，用于记录本页面的概要与描述！
Description作用：Description出现在网页的<head></head>；之间meta标签之一，可称为“内容标签”，“描述标签”或“内容摘要”可以预见在以后的用户搜索中Description会扮演越来越重要的技术之一。
作用1.简单大概描述你网站的主要内容，主要是让用户了解观看的，在百度或google搜索某个关键词的时候会看到每个搜索结果的下面都有一段描述，这段描述就是Description的内容。
作用2.给搜索引擎提供了一个很好的参考，缩小了搜索引擎对网页关键词的判断范围，（所以不要小看description）。
作用3.引导SE和指明UE的一个路标
格式:
<meta name=”description” content=”这里就是Description的提要内容” />；标准网站description写法description，是不能直接看到的，是用来判断整个页面内容的，当中要写入的内容是你页面内容的简介，最多79个字。
Meta标签中Keyword和Description的权重：
从严格意义上，Meta 标签中的Keyword（关键词）、Description（描述）属于历史遗留问题。在早期的Web页面上，Meta 标签中的Keyword与Description用来描述页面的主要内容及向搜索引擎和访问用户介绍网页包含哪些方面信息，在HTML代码中，其被置于<head></head>之间。
应该说，Meta 标签中的Keyword与Description曾经在搜索引擎优化中占据非常重要的地位，在搜索引擎的算法还比较初级，无法通过对网页的全部内容进行有 效分析以判断相关性的时候，meta标签提供了一种简略的方式来对搜索关键词作出反应，那时候，通过合理地组织Keyword与Description， 并进行“适度的填充”，就可以使网页的SERP页面中得到良好的排名。
随着搜索引擎算法的不断提高，当然，同时也随着Meta标签中的Keyword与Description“填充”技术的泛滥，“black hat” SEO将其演变成了一种基本的作弊手段，各大搜索引擎逐步下调排名算法中Keyword与Description的权重。到了今天，其作用已经微乎其微， 虽然仍可见不少所谓的“SEO专家”仍在宣传那种过时的观点，仍在告诫用户Keyword与Description的重要性。
虽然不能肯定地说，Meta Keyword与Description完全没有任何作用，但是，对许多搜索引擎而言，其与关键字填充的界线并不遥远，同时要注意精简。另外，在网站优化 中，对Meta标签中的Keyword与Description不必投入太多精力，相比较而言，其他因素如Title、heading的作用更为巨大。当 然，内容则更为根本。与其将过多的精力投入到这上面，不如更专注地增加有价值的内容。
image.png
base标签可以让当前页面中的所有的a标签都拥有相同的属性，比如targent属性。
不常用语义标签：
image.png
<pre>标签中不进行空格的合并。
image.png
如果想要在HTML页面实现HTML代码，就需要用到特殊字符的替代代码。
比如：
<p>这里是一个段落</p>
它在网页中显示的是“这里是一个段落”而并不会显示出<p>标签，那么如果我们想要显示出来<p>标签，我们就需要用到特殊字符的替代代码来实现。
image.png
image.png
网友评论