HTML

HTML

Hyper Text Makeup Language

超文本标记语言

超文本：可以表示图片，视频，超链接....

标记：各种标签。图片文字，等可以表示超链接

.html后缀触发浏览器解析文本中的标签

web服务本质

import socket

sever = socket.socket()

sever.bind(('127.0.0.1',10000))

sever.listen(5)

while True:
    conn,addr = sever.accept()
    data = conn.recv(8096)
    print(data)
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    conn.send(b'<h1>Hello world!</h1>')
    conn.close()

b'GET / HTTP/1.1\r\nHost: 127.0.0.1:10000\r\nConnection: keep-alive\r\nCache-Control: max-age=0\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\n\r\n'
b'GET /favicon.ico HTTP/1.1\r\nHost: 127.0.0.1:10000\r\nConnection: keep-alive\r\nPragma: no-cache\r\nCache-Control: no-cache\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\nAccept: image/webp,image/apng,image/*,*/*;q=0.8\r\nReferer: http://127.0.0.1:10000/\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\n\r\n'

web服务本质就是底层就是socket，然后加上了其他的报头

HTML文档结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

文档声明头，表示使用哪个HTML版本编译，声明为 HTML5 文档

元素是 HTML 页面的根元素,lang表示用了什么语言，en.表示用了英文，HTML是最外层的标签，他表示网页内容的开始

元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。（网页的基本信息）

标签 意义
title 定义网页的标题
style 定义内部样式
script 定义JS和引用外部的JS文件
link 引用外部的表文件或者样式
meta 定义网页原信息,针对搜索引擎和更新频度的描述和关键词,用户不可见

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

name

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化)。浏览器会根据你的页面描述去body找h标题标签，如果有就会把页面描述收录。

<body>** 元素包含了可见的页面内容

元素定义一个大标题

元素定义一个段落

注释

常用标签

双闭合标签

<h1-6>

大标题

<title>

文档标题

<p>

段落，一般用来放文字，他会按照文字的格式显示文字，每个p标签之间会有空行

<strong>&<em>

可以在和

等文本标签中嵌套使用，分别有加粗和斜体的功能

<ul>&<li>

type属性

disc 实心圆点

circle 空心圆圈

square 实心方块

none 无样式

无序标签

<ol>&<li>

type属性

1 数字列表，默认

A 大写字母

a 小写字母

I 大写罗马

i 小写罗马

start 数字 从哪里开始显示排序数字

有序列表，有数字排序

<dl>&<dt>&<dd>

定义列表 dd描述dt

<table>&<tr>&<th>&<td>

表格标签

<caption></caption>表格标题

<table border="1" cellspacing="0">
	<tr>
		<th>数量</th>
		<th>价格</th>
	</tr>
	<tr>
		<td>电视</td>
		<td>10000</td>
	</tr>
</table>

border：表格边框

cellpadding：内边距

cellspacing：外边距

width：像素 百分比

cosplan：单元格横向合并

rowspan：单元格纵向合并

<a>

锚点

href #id

超链接

<a href="http://www.baidu.com" title="跳转">百度一下</a>

target属性 _blank在新的界面打开 _self（默认）在当前界面打开

<form>

数据提交

action 服务器地址

method 提交方式

enctype=“multipart/form=data”提交文件要有

<select>&<option>

下拉列表

默认选中 selected

多选属性 multiple

<textarea>

文本域

rows 列文字

cols 行文字

<lable>

可以和input关联 for

<div>

容器

单闭合标签

<br>

换行标签（浏览器中把换行和多个空格表示一个空格）空白折叠

文本标签自带换行

<hr>

水平分割线

<img>

alt 图片加载失败的时候显示（百度爬虫也会爬这个，来判别图片是啥）

title 鼠标悬浮显示文字

<input>

input属性 type

​ text 文本普通

​ password 文本加密

​ submit 提交

​ radio 单选框

​ checkbox 复选框 checked默认选中

​ reset重置按钮

​ button 普通按钮

placeholder 文本框默认值

value 默认值

特殊符号

表示内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
￥ &yen;
版权 © &copy;
注册 ® &reg;

标签的总结：

块级元素：块级大多为结构性标记

  <h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>

行内元素：行内大多为描述性标记

  <span>...</span>

  <a>...</a>  链接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  图片

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本
  
  <select>...</select>  下拉列表

·块级元素

1.总是从新的一行开始

2.高度、宽度都是可控的

3.宽度没有设置时，默认为100%

4.块级元素中可以包含块级元素和行内元素

·行内元素

1.和其他元素都在一行

2.高度、宽度以及内边距都是不可控的

3.宽高就是内容的高度，不可以改变

4.行内元素只能行内元素，不能包含块级元素

posted @ 2019-09-13 17:21  zx125  阅读(230)  评论(0)    收藏  举报