HTML-1（study）

*******HTML********

**Web服务本质**

import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 8080))

sk.listen(5)

while True:

conn, addr = sk.accept()

data = conn.recv(8096)

conn.send(b"HTTP/1.1 200 OK\r\n\r\n")#http协议简化

conn.send(b"<h1>Hello world!</h1>")#发送内容

conn.close()

sk.close()

浏览器发送请求-->HTTP协议-->服务器接受请求-->服务端返回响应-->服务端把HTML文件内容发送给浏览器-->浏览器渲染页面

What HTML?

*超文本标记语言（Hypertext Markup Language，HTML）是一种用于创建网页标记语言

*本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的页面。

对于不同的浏览器，对于同一个标签可能会有不同的解释。（兼容性问题）

*网页文件的扩展名：.html或.htm

*HTML是一种标记语言，他不是一种编程语言，HTML使用标签来描述网页。

****HTML文档结构****

*最基本的HTML文档**

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

#解释

1.<!DOCTYPE html>声明为HTML5文档

2.<html></html>是文档的开始标记语言和结束标记，是HTML页面的根本元素，在他们之间是文档的头部(head)和主题(body)

3.<head></head>定义了HTML文档的开头部分。他们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据

4.<title></title>定义了网页标题，在浏览器标题栏显示

5.<body></body>之间的文本是可见的网页主体内容

注意：

对于中文网页需要使用<meta charset='utf-8'>声明编码。否则会出现乱码。这些浏览器会设置GBK为默认编码，则需要我们设为

****HTML标签格式****

*HTML标签是由尖括号包围的关键字

*HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。

*也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。

*标签里面可以有若干属性，也可以不带属性。

****标签的语法

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

<标签名属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性：

id：定义标签的唯一ID，HTML文档树中唯一

class：为html元素定义一个或多个类名（classname）(CSS样式类名)

style：规定元素的行内样式（CSS样式

****HTML注释

****<!DOCTYPE>标签****

<!DOCTYPE> 声明必须是HTML文档的第一行，位于<html>标签之前

<!DOCTYPE> 声明不是HTML标签，他是指示web浏览器关于页面使用哪个HTML版本进行编写的指令

****HTML常用标签****

**head内常用的标签**

1.<title></title> 定义网页的标题

2.<style></style> 定义内部样式表

3.<script><script>定义JS代码或引入外部JS文件

4.<link/> 引入外部样式文件

5.<meta/>定义网页原信息

****Meta标签

Meta标签介绍：

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不

同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示

网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

2.names属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎

机器人查找信息和分类信息用的

******body内常用表标签******

****基本标签（块级标签和内联标签）****

<br>

<hr>

****特殊字符****

空格------

>-------->

<--------<

&--------&

￥--------¥

版权(©️)---©

****div标签和span标签****

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别：

所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而生的。

注意：

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签，p标签也不能包含p标签。

****img标签****

****a标签****

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，

也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，

甚至是一个应用程序。

什么是URL？

URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。

URL举例

http://www.baidu.com/stu/index.html

http://111.13.100.91/stu/index.html

URL地址由4部分组成

第1部分：为协议：http://、ftp://等

第2部分：为站点地址：可以是域名或IP地址

第3部分：为页面在站点中的目录：stu

第4部分：为页面名称，例如 index.html

各部分之间用“/”符号隔开。

href属性指定目标网页地址。该地址可以有几种类型：

1.绝对URL-指向另一个站点（不如 href = 'https://www.baidu.com'）

2.相对URL-指向当前站点中确切的路径（href = 'index.html'）

3.锚URL-指向页面中的锚（href = '#top'）

target:

1._blank表示在新标签页中打开目标页面

2._self表示在当前标签页中打开目标页面

****列表*****

1.无序列表

</ul>

type属性：

1.disc（实心圆点，默认值）

2.circle（空心圆圈）

3.square（实行方块）

4.none（无样式）

2.有序列表

</ol>

type属性：

1.1数字列表，默认值

2.A大写字母

3.a小写字母

4.I大写罗马

5.i小写罗马

3.标题列表

<dl>

</dl>

****表格****

表格是一个二维数据空间，一个表格由若干行组成，一行又有若干单元格组成，单元格里面可以

包括文字。列表。图案。表单。数字符号。预置文本和其它的表格等内容。

表格最重要的目的是显示表格类数据。

表格类数据是值最适合组织为表格格式（即按行和列组织）的数据

表格基本结构：

<table>

<thead>

<tr>

</tr>

</theaf>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

属性：

1.border：表格边框

2.cellpadding：内边距

3.cellspacing：外边距

4.width：像素百分比（最好通过css来设置长度）

5.rowspan：单元格竖跨多少行

6.colspan：单元格横跨多少列（即合并单元格）

****form（表单）****

功能；

表单用于向服务器传输数据，从而实现用户与web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等

表单还可以包含textarea、select、fieldest和lable标签

***表单属性

1.accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）

2.action 规定在何处提交表单的地址（URL）（提交页面）

3.autocomplete 规定浏览器应该自动完成表单（默认：开启）

4.enctype 规定被提交数据的编码（默认：url-encoded）

5.method 规定在提交表单时所用的HTTP方法（默认GET）

6.name 规定识别表单的名称（对于DOM使用：document.forms.name）

7.novalidate规定浏览器不验证表单

8.target规定action属性中地址的目标（默认_self）

***表单元素

基本概念：

HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。

表单一般用来收集用户的输入信息

表单工作原理：

访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。

服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。

当数据完整无误后，服务器反馈一个输入完成的信息。

******input******

<input>元素会根据不同的type属性，变化为多种形态

type属性值表现形式对应代码

text单行输入文本<input type="text" />

password密码输入框<input type="password" />

date日期输入框<input type="date" />

checkbox复选框<input type="checkbox" checked="checked" />

radio单选框<input type="radio" />

submit提交按钮<input type="submit" value="提交" />

reset重置按钮<input type="reset" value="重置" />

button普通按钮<input type="button" value="普通按钮" />

hidden隐藏输入框<input type="hidden" />

file文本选择框<input type="file" />

属性说明：

1.name：表单提交时的“键”，注意和id的区别

2.value：表单提交时对应项的值

type = “button”，“reset”，“submit”时，为按钮上显示的文本信息

type = “text”，“password”，“hidden“时，为输入框的初始值

type = ”checkbox“，”radio“，”file“时，为输相关联的值

3.checked：radio和checkbox默认被选中的项

4.readonly：text和password设置只读

5.disabled：所有input均适用

******select标签******

</select>

</form>

属性说明：

1.multiple：布尔属性，设置后为多选，否则默认单选

2.disabled：禁用

3.selected：默认选中该项

4.value：定义提交时的选项值

******lable标签******

定义：<lable>标签为input元素定义标注（标记）

说明：

1.label元素不会向用户呈现任何特殊效果

2.<lable>标签的for属性值应当与相关元素的id属性值相同

<form>

</form>

******textarea多行文本******

默认内容

</textarea>

属性说明：

1.name:名称

2.rows:行数

3.cols:列数

4.disable:禁用

站的建站流程

页面图例

网页的结构

WEB标准

WEB标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布，也有部分标准由ECMA起草发布

（1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构；是专门负责网络标准制定的非赢利组织。制定了结构标准和样式标准；（2）ECMA：欧洲电脑网商联合会（厂商协会），制定了行为标准；

计算机语言

HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。 XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。 HTML5指的是HTML的第五次重大修改（第5个版本）

HTML发展

编辑器

建立站点

规划网站的所有内容和代码
整合资源

文件的命名规范

小写英文字母、数字、下划线的组合，
其中不得包含汉字、空格和特殊字符；
必须以英文字母开头。

HTML开始

1：HTML架构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
有三种：Strict（严格型)、
Trasitional（过渡型）、
Frameset（框架型）

2：HTML5基本结构

3:HTML语言

HTML语言组成

（1）标签

txt 写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；

（2）属性

标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序

HTML语法

（1）常规标记(双标记)： <标记名称属性1名="属性1值" 属性2名="属性2值" ………… >

（2）空标记（单标记）：<标记名属性1名="属性1值" />

常用标签

1 ：文本标题标签

文本标题共有6个（h1-h6）
<h1>一级标题</h1>(唯一性,放网站LOGO)
<h2>二级标题</h2>
...
<h6>六级标题</h6>

2:字体倾斜&加粗标记

文本倾斜:
    <i></i>
    <em></em>

文本加粗：
    <b></b>
    <strong></strong>

3：下划线

<u></u>

4 : 换行&水平线

<br>
<hr>

5：上标&下标

<sup></sup>
<sub></sub>

6 : 段落标记

<p></p>

7 : 字符（小段文本）

<span></span>

8 : （1）无序列表

<ul>
     <li>列表项内容</li>
     <li>列表项内容</li>
     <li>列表项内容</li>
       ........   
</ul>

（2）有序列表

<ol>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    ........   
</ol>

type:规定列表中的列表项目的项目符号的类型语法：<ol type=“ a"></ol> 1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。 a 字母顺序的有序列表，小写（a, b, c, d）。 A 字母顺序的有序列表，大写（A,B,C,D) i 罗马数字，小写（i, ii, iii, iv）。 I 罗马数字，大写（i, ii, iii, iv）。 start 属性规定有序列表的开始点。(start的属性值必须是数字) 语法：<ol start="5"></ol>

（3）自定义列表

<dl>
     dt></dt>
     <dd></dd>
</dl>

9 : 超链接

<a></a>
    属性：
        href = 'url'
        target = "_blank  /  _self";
        title = '文本提示'

    拓展：
        rel = 'nofollow';

10 : 图片

<img>
    属性：
        src = 'url';
        alt = ' 标签 实例 带有指定替代文本的图像'  
        title = '文本提示'
        width = ''
        height = ''
        border = ''

图片 title 和 alt区别：

alt:
1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，
以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。
2、alt属性值的长度必须少于100个英文字符
3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=""
4、alt属性是搜索引擎判断图片与文字是否相关的重要依据， alt属性添加到img主要的目的才是为了SEO
title:
1、title属性并不是必须的。
2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。
3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。

11 : 相对路径

（同级）
1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名；
（上级找下级）
2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下：
文件夹名/目标文件全称+扩展名；
（下级找上级）
3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下：
../目标文件文件名+扩展名；

12 ： DIV

13 : HTML注释

<!-- 注释 -->

表格

1 : 表格基本结构

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

<!-- 
    table 为表格
    tr 行
    td 列（每一个单元格）
-->

2：表格的html属性

1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"
5）cellspacing="单元格与单元格之间的间距"
6）cellpadding=“单元格与内容之间的距离"
7）align="表格水平对齐方式"
   取值：left、right、center、
   valign=“垂直对齐” top\bottom\middle
8）合并单元格属性：(td)
  合并列： colspan=“所要合并的单元格的列数"
  合并行： rowspan=“所要合并单元格的行数”

3 ：数据行分组

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

4 ：数据列分组

<colgroup span="value"></colgroup>
<!--span属性为把几列分为一组-->

5 ：列标题

<th></th>

6: 表格标题

<caption></caption>

7：表格属性

1、单元格间距：border-spacing:value; 说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离，不可取负值 2、合并相邻单元格边框：border-collapse:separate/collapse; 说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并) 3、无内容时单元格的设置：empty-cells:show/hide; 说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示；hide：隐藏； 4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;

本文转自知乎号：千锋HTML5学院

TML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

1 HTML骨架格式

日常生活的书信，我们要遵循共同的约定。

同理：HTML 有自己的语言语法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

html结构：包括head body
html标签是以尖括号包围的关键字
html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
html通常都有属性，格式：属性名＝“属性值”(多个属性之间空格隔开)
html标签不区分大小写,建议小写

2 html基本标签

HTML标签

作用：所有HTML中标签的一个根节点。

head标签

作用：用于存放：title,meta,base,style,script,link

注意：在head标签中我们必须要设置的标签是title

title标签

作用：让页面拥有一个属于自己的标题。

body标签

作用：页面在的主体部分，用于存放所有的HTML标签：p,h,a,b,u,i,s,em,del,ins,strong,img

3 颜色的表示方式

color:文本的颜色
bgcolor:背景色
background:背景图片

第一种方式：使用颜色名称: 仅仅有16种颜色名可用英文字母，其余的要用16进制值。

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

第二种方式：RGB模式

第三种：十六进制

#000000 #ffffff #325687 #377405

4 文档类型<!DOCTYPE>（重点）

<!DOCTYPE html>这句话就是告诉我们使用哪个html版本，我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

5 HTML标签的语义化（重点）

所谓标签语义化，就是指标签的含义。

为什么要有语义化标签：方便代码的阅读和维护，同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容，使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性，不管是谁都能看懂这块内容是什么。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

6 总结：（重要知识点）

双标签

<html></html>
<head></head>
<title></title>
<body></body>
<table></table>
<tr></tr>
<td></td>
<span></span>
<p></p>
<form></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<object></object>
<style></style>
<b></b>
<u></u>
<strong></strong>
<i></i>
<div></div>
<a></a>
<script></script>
<center><center>

单标签

<br>
<hr>
<img>
<input>
<param>
<meta>
<link>

排版标签

1.注释标签：<!–注释–>
-------------------------------------
2.换行标签：<br/>
-------------------------------------
3.段落标签：<p>文本文字
   特点：段与段之间有行高
   属性：align对齐方式
           (left：左对齐 center：居中 right：右对齐)
-------------------------------------
4.水平线标签:<hr/>
   属性:
        width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
        size: 水平线的粗细 (像素表示，例如：10px)
        color: 水平线的颜色
        align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
-------------------------------------
5.容器标签（重点）
     <div>:块级标签，独占一行，换行
     <span>:行级标签，所有内容都在同一行作用
     <div>:主要是结合css页面分块布局
     <span>:进行友好提示信息

标题标签 (熟记)

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

列表标签

容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是整齐、整洁、有序

无序列表 ul （重点）

无序列表标签： <ul></ul>
    属性：type :三个值，分别为：
           circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
    列表项：<li></li>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。

无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表 ol

有序列表标签：<ol>
      属性：type：1、A、a、I、i（数字、字母、罗马数字）
      列表项： <li></li>

定义列表dl

\dl>
<dt>名词1
<dd>名词1解释1
<dd>名词1解释2
…
<dt>名词2
<dd>名词2解释1
<dd>名词2解释2
…
</dl>

dl>
名词1
名词1解释1
名词1解释2
... 名词2
名词2解释1
名词2解释2
...

图片标签

独立标签

属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度height:高度border:边框align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近

链接标签

超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。（不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接）

属性：
href:跳转页面的地址(跳转到外网需要添加协议)；
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
target:_self(自己) _blank(新页面，之前页面存在) _
__parent top 默认
self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。

如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

在线咨询

上一篇：备存：各种分割线的Html代码
下一篇：JavaScript中输出方法

您的项目需求

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

整合营销服务商

HTML-1（study）

站的建站流程

页面图例

网页的结构

WEB标准

计算机语言

HTML

HTML发展

编辑器

建立站点

文件的命名规范

HTML开始

1：HTML架构

2：HTML5基本结构

3:HTML语言

常用标签

1 ： 文本标题标签

2:字体倾斜&加粗标记

3：下划线

4 : 换行&水平线

5：上标&下标

6 : 段落标记

7 : 字符 （ 小段文本 ）

8 : （1） 无序列表

9 : 超链接

10 : 图片

图片 title 和 alt区别：

11 : 相对路径

12 ： DIV

13 : HTML注释

表格

1 : 表格基本结构

2：表格的html属性

3 ： 数据行分组

4 ： 数据列分组

5 ： 列标题

6: 表格标题

7： 表格属性

您的项目需求

1 ：文本标题标签

7 : 字符（小段文本）

8 : （1）无序列表

3 ：数据行分组

4 ：数据列分组

5 ：列标题

7：表格属性