HTML

三部曲—
1.基础概念（天上飞的）
2.落地的实现（代码的方式）
3.小总结（博客）
教材浏览：

静态网页—页面（）
动态网页（基本上所有网站都是动态的。）

.html文件：网页文件，通过浏览器打开。
如何创建html文件，可以通过更改后缀名实现（win7如果文件没有显示后缀名，说明自动隐藏了，）

超链接—网页与网页之间的联系的纽带。
表格，表单

Css: 美化网页的样式
网页布局（CSS样式）
网页特效—CSS当中的一部分，用于加强页面交互效果。

网页整合— 整合html和CSS代码。

测试网站，发布网站…
http://www.mantou22.cn:8080/tmall_ssm/foreorderConfirmed?oid=15

一次完整的Http请求过程

http协议（浏览器到服务器的一个过程）
https://blog.csdn.net/baidu_36697353/article/details/100008544

1. 域名解析（DNS） ---- 得到服务器IP地址，就可以访问。

ipconfig----查看本机IP地址：172.20.10.5

www.baidu.com----172.20.10.5

我们要访问网站（网页），最原始的方式就是通过IP地址，但是ip地址很难记，我们就会通过域名的形式来对应IP地址，因为域名很好记（baidu.com—14.215.177.39）14.215.177.38
域名解析–把我们的域名解析到对应的IP地址，这样就可以通过域名来访问网站了。

2.TCP建立连接（三次握手）----建立本机与服务器的连接

3.建立TCP连接之后，发起HTTP请求（浏览器请求访问服务器）
4.服务器端响应http请求，浏览器得到html代码

5.浏览器解析html代码，并请求html代码中的资源

6.浏览器对页面进行渲染呈现给用户

小总结
1.域名解析(这个说了一下域名解析的过程) ，解析出对应IP地址
2.解析成功之后，发起TCP三次握手建立连接
3.建立连接后发起HTTPS请求
4.服务器响应https请求，浏览器得到html代码
5.浏览器解析html代码，并请求静态资源(html/css/js等)
6.然后浏览器渲染，展示给用户

bin：主程序相关文件
jre lib：相关文件库
plugins: 配置相关

本周任务：

1. webstorm安装
2. 完成

这是我的第一个HTML文档
欢迎学习Web编程基础

错误小总结：

1.编写html代码的时候，一定是成对标签出现 eg:
2.html文件的后缀名是 .html 不是 .10html

file：文件，一般有保存打开，设置等功能。
Edit：编辑，粘贴复制等功能
View：视图
Navigate: 导航

web技术基础：
浏览器： chrome ，firefox， 360浏览器

WWW是World Wide Web的缩写，简称为Web

http：超文本传输协议(HyperText Transfer Protocol)（html—相当于是文本）

URL（Uniform Resource Locator）：统一资源定位符（网址），

http://www.mantou22.cn:8080/tmall_ssm/loginPage?loginname= &psd=
其实就是我们所说的网址
语法：http://

:/?

: 主机域名（DNS）或者IP地址（每一IP地址对应一个域名）eg： www.mantou22.cn
:端口号（eg:8080）
:请求访问文件的路径 eg: /tmall_ssm/loginPage
？：传递的参数 eg: ?loginname= mt &psd=123456

http://localhost:63342/myWebProject/index.html
127.0.0.1

localhost：本机测试地址（127.0.0.1）
:63342 : 端口，
/myWebProject : 文件的路径

超文本标记语言（HTML:hypertext markup language）：重点

C/S(client/Server):客户端/服务端架构 eg：QQ
B/S（Brower/Server）:浏览器/服务端架构 eg：淘宝网

HTML:超文本标记语言（HTML:hypertext markup language）

HTML文档由HTML标签和用户定义的内容组成。

HTML标签是已定义好的标记，可用来控制页面显示的内容，例如文字、列表、段落、图像以及动画等。

html标签可以看作是HTML的命令(html代码就是我们的html标签)，通过指定标签可以定义网页的内容，通过指定标签的属性可以定义网页的内容的样式。

标签可以分为单标签和成对标签两种，单标签单独使用，成对标签成对使用。
有的标签既可以单独使用，也可以成对使用。<标签名/> <标签名>
成对标签使用起始标签“<标签名>”和结束标签“”组成。成对标签的作用仅限于这对标签内部的内容。

语法：<标签名>内容 eg：

内容

小总结：
1． Html文档的框架结构
2． http ，url的语法、 WWW
3． Html标签简介

HTML常用标签(掌握)
 HTML的常用标签分为meta标签、文本标签、列表标签、分隔线标签、超级链接标签、图像标签等。

标签： 是的子标签，主要用于定义页面的一些相关信息。 meta标签可以分成两大部分，HTTP标签信息（http-equiv）和页面描述信息（name）。  content-language：用于指定页面的编码方式。

 文本、图像、超级链接是网页的三类基本元素。其中，文本是网页发布信息的主要形式。通过设置文本的大小、颜色、字体以及段落和换行等，可以使文本看上去整齐美观，错落有致。

1．字体标签—定义字体
属性： 表示该标签里面的样式

字体标签

里面有三个属性 :
size用来指定文字大小。
color属性用于指定字体的颜色。
face用于指定字体的类型。

语法：

<font size="3px" color="#cccccc" face="宋体">字体标签</font>
<font size="2" color="blue" face="楷体">这是蓝色五号楷体</font>
<br/><!--<br/>标签： 换行-->
<font size="4" color="#FF0000" face="隶书">这是红色四号隶书</font>

<!--快捷键：ctrl+/     可以写注释 font是字体标签 size：大小，color：颜色 face：字体-->

小总结：

1. 是成对标签， 不换行，里面有 size color face三个属性，用于修饰字体的样式----行级标签 不能自动换行
2. 
----表示换行符(是单标签)
3. html当中的注释为 :

2．标题标签

HTML中提供了六级标题，为

至

。其中，

字体最大，

字体最小。
标题属于块级元素，浏览器会自动在标题前后加上空行。（自动换行）

<!--标题标签-->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

3．换行标签
换行标签是
或者
。

标签是空标签，没有闭合标签------单标签

4．段落标签------将文字内容变成一个段落 ----块级标签，可以换行

<!--4．段落标签-->

<p>这是段落标签1</p>
<!--默认左对齐-->
<p align="left">这是段落标签2</p>
<p align="center">这是段落标签3</p>
<p align="right">这是段落标签4</p>

标签有一个属性align，用来指定文本显示时的对齐方式，可取center、left、right三个值。

注意：标签的属性只能作用于标签里的内容，不能作用嵌套标签里面的内容！
eg：

<p align="center">
    春晓1<p>春晓2</p>
</p>

春晓1能够居中，春晓2不能居中

小总结：

1. 块级标签属性只能作用于标签里的内容，不能作用嵌套标签里面的内容！
2. 行级标签可以（html5）

5．特殊字符

空格： 

其他的特殊字符，查表百度即可

 123123
 发多少
 324

1. 1231231
2. 123123
3. 地方撒地方

列表

 HTML代码中支持将若干列表项组织成有序列表、无序列表以及定义列表。

6.无序列表（unordered list）使用标签

定义
 列表项使用
• 标签定义,列表项的内容位于一对
• 标签之内。

  	<!--无序列表-->
  <ul>
  <li type="circle">无序列表1</li>
  <li type="square">无序列表2</li>
  <li>无序列表3</li>
  <li>无序列表4</li>
  </ul>
  

   无序列表使用标签

  定义，列表项使用
  • 标签定义，列表项的内容位于一对
  • 标签之内。
    
  • 标签的type属性可以定义列表项的标记符。其中：
     disc是默认值，为实心圆；
     circle为空心圆；
     square为实心方块；

  7.有序列表

  标签的type属性可以指定有序列表的项目符号的类型，type属性各个取值的含义如表所示
  

  <ol>
  <li>春思</li>
  <li>望岳
  <ol type="i">
  <li>岱宗夫如何，齐鲁青未了。</li>
  <li>造化钟神秀，阴阳割昏晓。</li>
  <li>荡胸生层云，决眦入归鸟。</li>
  <li>会当凌绝顶，一览众山小。 </li>
  </ol>
  </li>
  <li>送别</li>
  <li>渭川田家</li>
  </ol>
  

  8.分隔线

  

  ---

  标签可以在HTML页面中创建一条水平线，水平线可以将文档分隔成若干个部分。其属性及可取值如表所示。

  9.超链接

  创建文本链接使用一对标签，其格式如下：

  <a href=“…” target=“…”>文本</a>
  

  其中，href指文本链接的目标资源的地址，target指在何处打开目标资源。
  
  重点属性：target=” _blank “: 新窗口跳转
  默认： 当前页面跳转

  补充：

  1. 加粗的效果 相当于 加粗的效果
  2.斜体 斜体
  3. 删除线 删除线
  

  <!DOCTYPE HTML>
  <html lang="en">
  	<head>
  		<meta http-equiv="content-type"content="text/html:charest=UTF-8">
  	<body>
  		<h1>英雄联盟&nbsp(电子竞技类游戏)</h1>
  	</body>	
  	<font size="2" color="black" face="宋体"><i>《英雄联盟》</i>&nbsp(简称lol)是由美国<i>Riot</i>&nbsp<i>Game</i>开发，中国大陆地区由腾讯游戏运营的网络游戏</font>
  	<p></p>
  	<font size="2" color="black" face="宋体">《英雄联盟》除了即时战略、团队作战外，还拥有一百多位特色各异的英雄、丰富的地图及玩法、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素。[<u>1</u>]</font>
  	<p></p>
  	<font size="2" color="black" face="宋体">2016年1月，根据官方数据显示，LOL全球最高同时在线已突破<del>760</del>&nbsp900万，球球日活跃高达2700万，全球月活跃已达6700万，注册用户亿计，LOL已经成为当今世界最具人气和影响力的网络游戏之一[<u>2</u>]</font>
  	
  	</head>