前端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就是让网页动起来，具有生命力的

下图很形象:👇

img

三丶浏览器介绍

浏览器内核

浏览器 内核
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 规范。

​      docptype声明

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>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#a1" > 根据id='a1' 到指定位置</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#alex1" > 根据id='alex1' 到指定位置</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<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. &nbsp;  空格 ,non-breaking spacing，不断打空格
        # 2. &lt;    小于号
        # 3. &gt;    大于号
        # 4. &amp;   & 号
        # 5. &quot;  双引号
        # 6. &apos;  单引号
        # 7. &copy;  版权号 ©
        # 8. &trade;    商标 ™

      全集特殊符号对照表

posted @ 2019-08-11 16:34  染指未来  阅读(438)  评论(0)  编辑  收藏  举报