前端基础之html
2021-06-17 20:06
YPE html>
标签：语文 编码 ida pass ati 类型 item targe stat
一、HTML初识
1.web服务本质
import socket sock=socket.socket() sock.bind(("localhost",8090)) sock.listen(5) conn,addr=sock.accept() data=conn.recv(1024) print(data) conn.send((‘HTTP/1.1 201 OK\r\n\r\nhello‘).encode(‘utf8‘))
2.html是什么
- 超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套浏览器认识的规则
- 浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不用的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
- 静态网页文件扩展名：.html或.htm
3.html结构
- ：告诉浏览器使用什么样的html或者xhtml来解析html文档
- ：是文档的开始标记和结束标记。此标签告诉浏览器其自身是一个html文档，在他们之间是文档的头部和主体。
- ：元素出现在文档的开头部分。与之间的内容不会再浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
-
：定义网页标题，在浏览器标题栏显示。 - ：两者之间的文本是可见的网页主体内容
4.html标签格式
标签的语法：
内容部分标签名>
二、常用标签
标签
声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。
作用：声明文档的解析类型（document.compatMode），避免浏览器的怪异模式。
解析类型（document.compatMode）：
1.BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
2.CSS1Compat：标准模式，使浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE什么，那么compatmode默认就是怪异模式。
2.1：内常用标签
2.1.1：标签
meta介绍
- 元素可提供有关页面的元信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。
- 标签位于文档的头部，不包含任何内容。
- 提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值。这些不同的参数值就实现了不同的网页功能。
（1）name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
"keywords" content="meta总结,html meta,meta属性,meta跳转"> #定义关键字 "description" content="老男孩培训机构是由一个很老的男孩创建的"> #定义描述信息
（2）http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
"Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) #两秒后跳转页面 "content-Type" charset=UTF8"> #修改字符编码 "X-UA-Compatible" content = "IE=EmulateIE7" /> #修改兼容
2.1.2：非meta标签
oldboy #网页标题 "icon" href="http://www.jd.com/favicon.ico"> #标题图标 "stylesheet" href="css.css">
2.2：内常用标签
2.2.1：基本标签（块级标签和内联标签）
: n的取值范围是1~6; 从大到小. 用来表示标题. : 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. : 加粗标签.
: 为文字加上一条中线. : 文字变成斜体. 和: 上角标 和 下角表.
:换行.
:水平线 特殊字符：
2.2.2：标签分类
（1）块级标签：独占一行，比如h1，p
（2）内联标签：按文本站位，比如b，em
嵌套标准：块级标签可以嵌套内联标签和块级标签
内联标签只可以嵌套内联标签
2.2.3：
：
：表示了内联行（行内元素），并无实际的意义，主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别：
所谓块元素，是以另起一行还是渲染的元素，行内元素则不需另起一行，如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
2.2.4：图形标签：
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
2.2.5：超链接标签（锚标签）：
什么是超链接？
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个email，一个文件，甚至是一个应用程序。
2.2.6：列表标签
-
: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
- 列表内容
-
: 有序列表
-
:列表中的每一项.
-
定义列表
- 列表标题
- 列表项
2.2.7：表格标签：
| 标题 | 标题 |
| 内容 | 内容 |
属性：
属性:
caption:表格标题
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
练习：
"en"> "UTF-8"> "x-ua-compatible" content="IE=edge"> "viewport" content="width=device-width, initial-scale=1">菜谱 "icon" href="//cdn.jandan.net/static/img/favicon.ico">
| "3">星期一菜谱 | ||
|---|---|---|
| "2">素菜 | 青草茄子 | 花椒扁豆 |
| 小葱豆腐 | 炒白菜 | |
| "2">荤菜 | 油焖大虾 | 海参鱼翅 |
红烧肉 "https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/d01373f082025aaf1d61790afeedab64024f1a9b.jpg" alt="毛氏红烧肉" width="200" height="150"> |
烤全羊 |
"en"> "UTF-8"> "x-ua-compatible" content="IE=edge"> "viewport" content="width=device-width, initial-scale=1">课程表 "icon" href="//cdn.jandan.net/static/img/favicon.ico">
| 项目 | "5">上课 | "2">休息 | |||||
|---|---|---|---|---|---|---|---|
| 星期 | 星期一 | 星期二 | 星期三 | 星期四 | 星期五 | 星期六 | 星期日 |
| "4">上午 | 语文 | 数学 | 英语 | 英语 | 物理 | 计算机 | "4">休息 |
| 数学 | 数学 | 地理 | 历史 | 化学 | 计算机 | ||
| 化学 | 语文 | 体育 | 计算机 | 英语 | 计算机 | ||
| 政治 | 英语 | 体育 | 历史 | 地理 | 计算机 | ||
| "2">下午 | 语文 | 数学 | 英语 | 英语 | 物理 | 计算机 | "2">休息 |
| 数学 | 数学 | 地理 | 历史 | 化学 | 计算机 |
2.2.8：表单标签：