前端1-----HTML了解,内联标签(图片,超链接锚点,超链接邮箱)
前端1-----HTML了解,内联标签(图片,超链接锚点,超链接邮箱)
一丶自定制B/S
# -*-coding:utf-8-*-
# Author:Ds
import socket
IP_PORT=('127.0.0.1',9999)
#实例化 socket对象
TCP_SERVER=socket.socket()
# 绑定 端口和IP
TCP_SERVER.bind(IP_PORT)
TCP_SERVER.listen(5)
try:
#等待连接,
conn,addr=TCP_SERVER.accept()
# 获取连接信息
print(conn)
# 接收浏览器通过 http 协议 发送的 request的请求
from_browser_data=conn.recv(1024)
print(f'来自浏览器的数据:{from_browser_data.decode("utf-8")}')
# 通过http协议 ,向浏览器发送 返回数据 response
conn.send(b'HTTP/1.1 200 OK \r\n\r\n')
# 发送数据方式一:
# conn.send('Hello python and browser'.encode('utf-8'))
# 发送数据方式二: 浏览器默认GBK编码
with open('day43.md',encoding='utf-8') as f:
data=f.read().encode('gbk')
conn.send(data)
except Exception as e:
print(e)
finally:
conn.close()
TCP_SERVER.close()
二丶web介绍
web介绍:
web标准：
w3c：万维网联盟组织，用来制定web标准的机构（组织）
web标准：制作网页遵循的规范
web标准规范的分类：结构标准、表现标准、行为标准。
结构：html。表示：css。行为：Javascript。
总结说明：
结构标准：相当于人的骨架。html就是用来制作网页的。
表现标准： 相当于人的衣服。css就是对网页进行美化的。
行为标准： 相当于人的动作。JS就是让网页动起来，具有生命力的
下图很形象:👇
三丶浏览器介绍
浏览器内核
| 浏览器 | 内核 |
|---|---|
| IE | trident |
| chrome | blink |
| 火狐 | gecko |
| Safari | webkit |
PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
总结：渲染引擎是兼容性问题出现的根本原因。
四丶HTML超文本标记语言
什么是HTML?
超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
超文本： 音频，视频，图片称为超文本
标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
作用：HTML是负责描述文档语义的语言。
注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。
五丶HTML的规范
1.HTML是一个弱势语言
2.区分大小写
3.页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
4.HTML的结构：
声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
body部分：我们所写的需要显示出来的代码必须放在此标签內。
编写html的规范
1.所有标记元素都要正确的嵌套，不能交叉嵌套.
<h1><font></font></h1>
2.所有的标记都必须小写
3.所有的标记都必须关闭
双边标记:
<span></span>
单边标记:
<br />,<hr />
4.所有的属性值必须加引号.
<h1 id="head"></h1>
5.所有的属性必须有值.
<input type="radio" checked="checked" />
HTML的基本语法特征
1.HTML对换行不敏感，对tab不敏感
2.空白折叠现象
3.标签要严格封闭
六丶html结构
<!DOCTYPE html> <!--文档声明头 -->
<html lang="en">
<head> <!--头标签（head）-->
<meta charset="UTF-8"> <!--Meta标签-->
<title>Document</title>
</head>
<body> <!--body标签-->
</body>
</html>
头标签:
开头的这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
Meta标签:
元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
http-equiv属性:
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
name属性:
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
### 我们网页支持移动端，移动设备优先 , H5开发双端app会使用到
<meta name=viewport content="width=device-width, initial-scale=1">
title标签
主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
七丶HTML标签
块级标签:
块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建
块级标签有哪些:
| 标题 | h1 | h2 | h3 | h4 | h5 | h6 |
|---|---|---|---|---|---|---|
| 列表 | ol | ul | li | dl | dt | dd |
| 排版标签 | p | div | hr | center | pre | |
| 表格 | table | |||||
| 表单 | form |
### 特点
1. 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
2. 可以直接控制宽度、高度以及盒子模型的相关css属性
3. 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
4. 在不设置高度的情况下，块级元素的高度是它本身内容的高度
代码如下:👇
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>这是标题哦!!!!</title>
</head>
<body>
<!-- h 标签: 标题标签,应用:文字标题,新闻标题 -->
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
</body>
</html>
块级标签
内联标签
内联元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建。
内联标签有哪些:
| 粗体 | 斜体 | 上下标 | 划线 | |
|---|---|---|---|---|
| 字体 | b | em | sup | del/s |
| 字体 | strong | i | sub | u |
| 排版 | span | br | ||
| 超链接 | a | |||
| 图片 | img |
### 特点
1.和其他内联元素从左到右在一行显示
2.不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
3.内联元素的宽高是由本身内容的大小决定（文字、图片等）
4.内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
代码如下:👇
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>这是标题哦!!!!</title>
<style>
.c1{
width: 200px;
height: 300px;
background: darkcyan;
}
.c2{
width: 200px;
height: 200px;
background: cornflowerblue;
}
</style>
</head>
<body>
<!-- 字体标签 -->
<b>B标签 加粗</b>
<br /> <!-- 换行标签-->
<strong>strong标签 加粗</strong>
<br />
<em> em标签 斜体</em>
<br />
<i>i 标签 斜体</i>
<br />
<del>del标签 删除线</del>
<br />
<s> s标签 删除线</s>
<br />
<u>u 标签 下划线 </u>
<br />
<span> span标签 内容标签</span>
<br /> <!-- 换行标签-->
<sub>sub标签下划线</sub>
<sup> sup标签上划线</sup>
<!-- img 标签, src资源路径, title鼠标悬停, alt图片加载失败时,提示文字-->
<img title="da" src="https://www.baidu.com/img/dong_7d4baac2f4dee0fab1938d2569f42034.gif" alt="" >
<!-- 锚点 -->
<a href="#" id="top">头</a>
<div class="c1">1</div>
<div class="c2">2</div>
<a href="http://www.baidu.com" target="_blank" name="tb">到NAME这里</a>
<div class="c1" >3</div>
<a id="a1">到这里了</a>
<div class="c2" id="alex1">4 alex1</div>
<div class="c1" >5</div>
<div class="c2">6</div>
<a href="#top" > 根据id 从底部到头</a>
<a href="#a1" > 根据id='a1' 到指定位置</a>
<a href="#alex1" > 根据id='alex1' 到指定位置</a>
<a href="#tb" > 根据仅限a标签 name='tb' 到指定位置</a>
<!-- 换行-->
<br />
<br />
<br />
<!-- a 标签-->
<!-- target属性:是在当前页_self,还是重新创建一个新页_blank -->
<!--title属性: 悬停效果-->
<a href="http://www.xiaohua.com" target="_blank" title="点击进入笑话王,悬停">笑话王</a>
<!--mailto: 邮箱服务器 -->
<a href="mailto:1121813037@qq.com" >联系我们,发送邮箱</a>
</body>
</html>
内联标签
八丶html中的特殊字符
由于再html中 < , > 是具有特殊意义,所以需要进行转义,也提供了一些特殊的字符
### 列举常用的:
# 1. 空格 ,non-breaking spacing，不断打空格
# 2. < 小于号
# 3. > 大于号
# 4. & & 号
# 5. " 双引号
# 6. ' 单引号
# 7. © 版权号 ©
# 8. ™ 商标 ™
