前端基础:THML

HTML初始

1.web服务本质

  1. import socket
  2. sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
  3. sock.bind(("localhost", 9001))
  4. sock.listen(5)
  5. while True:
  6. print("waiting for connection...")
  7. conn, addr = sock.accept()
  8. data = conn.recv(1024)
  9. print("receive data: ", data.decode("utf-8"))
  10. with open("index.html", "r") as f:
  11. response = f.read() # 可以把html放在一个文档中读出来
  12. conn.send(("HTTP/1.1 201 OK\r\n\r\n %s" % response).encode("uf-8"))

2.HTML是什么?不是什么?

  • html是什么?

    超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。本质是一套规则,浏览器认识的规则

    浏览器按顺序渲染网页文件,然后根据标签解释和显示内容。但需要注意的是,对于不同的浏览器,对同一标签可能会有不同的解释(兼容性--compatible);

    静态网页文件扩展名:.html;

  • html不是什么?

    html使用标签来描述网页,所以html不是一种编程语言,而是一种标记语言(markup language)

3.HTML结构

  • 告诉浏览器使用什么样的html或xhtml来解析html文档;
  • 是文档的开始标记和结束标记。该标签告诉浏览器其自身是一个HTML文档,在它们之间的是文档的头部和主体;
  • 是文档的开头部分。与之间的内容不会在浏览器的文档窗口显示,但其间的元素有着特殊的重要意义;
  • 网页标题部分,在浏览器标题栏显示;
  • 之间的文本是可见的网页主体;

4.html标签格式

标签语法格式如下:

<标签名 属性名1="属性值1" 属性名1="属性值1" .../>

<标签名 属性名1="属性值1" 属性名1="属性值1" ...>内容部分</标签名>

标签格式:

  • 1.HTML标签是由尖括号包围的关键字,比如<html>;
  • 2.HTML标签通常是承兑出现的(双边标记),比如<div>和</div>;
  • 3.标签不区分大小,<html>和<HTML>效果一样,推荐使用小写;
  • 4.标签分为两部分:开始标签<a>和结束标签</a>,两个标签之间的部分称之为标签体,有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签。例如:<br />、<hr />、 <input />、<meta />等;
  • 5.标签可以由若干个属性,也可以不带属性,如<head>标签就不带任何属性;
  • 6.标签可以嵌套,但是不能交叉嵌套;

常用标签

1.<!DOCTYPE>标签

<!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前。此标签可以告诉浏览器文档使用HTML或者XHTML规范。其作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。

document.compatMode:

  • 1.BackCompat:怪异模式,浏览器使用自己的怪异模式解析并渲染html页面;
  • 2.CSS1Compat:标准模式,浏览器是用W3C的标准解析并渲染html页面;

这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat模式。

2.<heade>标签内常用标签

  • <meta>标签

    1.标签介绍:

    <meta>标签提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述或者关键词;

    <meta>标签位于文档的头部,不包含任何内容;

    <meta>标签提供的信息是用户不可见的;

    2.<meta>标签的组成:

    <meta>标签共有两个属性,分别是name和http-queiv属性,不同的属性又有不同的参数值,不同的参数值就实现了不同网页功能:

    (1)name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎查找信息和分类信息:
  1. <meta name="keywords" content="北京汽车网,北京汽车报价,北京车市最新报价, 北京汽车报道,北京易车网,北京汽车团购服务">
  2. <meta name="description" content="北京汽车网,北京汽车报价,北京车市最新报价,北京汽车报道,北京易车网,北京汽车团购服务">

(2)http-equiv属性:相当于http的头文件作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各参数的变量值:

  1. <title>meta标签</title>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="content-type" charset="utf8">和上面的是一样的,都是指定编码的
  4. <meta http-equiv="refresh" content="2;url=http://www.baidu.com"> <!--两秒之后跳转到百度页面(注意后面的引号,分别在秒数的前面和网址的后面)-->
  5. <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <!--设定当前网页的兼容模式为IE7(哪怕你用其他版本的浏览器打开,它也是支持IE7版本的)-->
  • 非<meta>标签
  1. <link rel="icon" href="http://www.jd.com/favicon.ico"> <!--设置头部图标,,就像我们打开百度网址上会有百度的小图标-->
  2. <link rel="stylesheet" href="css.css"> #加载css
  3. <script src="hello.js"></script> #加载js

3.<body>标签内常用标签

基本标签:

  1. <hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
  2. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
  3. <b> <strong>: 加粗标签.
  4. <strike>: 为文字加上一条中线.
  5. <em>: 文字变成斜体.
  6. <sup><sub>: 上角标 和 下角表.
  7. <br>:换行.
  8. <hr>:水平线
  9. 特殊字符:
  10. &lt; &gt;&quot;&copy;&reg;

常用标签练习如下:

  1. <body>
  2. <h1 style="background-color: green;">世界,你好!</h1>
  3. <h2>世界,你好!</h2>
  4. <h3>世界,你好!</h3>
  5. <h4>世界,你好!</h4>
  6. <h5>世界,你好!</h5>
  7. <h6>世界,你好!</h6>
  8. <hr width="1000" color="red">
  9. 《悯农》<br>
  10. 锄禾日当午,汗滴禾下土。<br>
  11. 谁知盘中餐,粒粒皆辛苦。<br>
  12. 春种一粒粟,秋收万颗子。<br>
  13. 四海无闲田,农夫犹饿死。<br>
  14. <hr width="1000" color="red">
  15. <p style="background-color: forestgreen">《悯农》</p>
  16. <p>锄禾日当午,汗滴禾下土。</p>
  17. <p style="background-color: blueviolet">谁知盘中餐</p>
  18. <p>粒粒皆辛苦。</p>
  19. <hr width="1000" color="red">
  20. <a href="http://www.baidu.com" style="background-color: bisque">点击百度</a>
  21. <a href="http://www.baidu.com" style="background-color: bisque">神话</a>
  22. </body>

解释如下:

标签分类一:

  • 自闭合标签:单标签;
  • 闭合标签:双标签;

标签分类二:

  • 块级标签:独占一行,可以设置宽度、高度,如:div,p,h1-h6;
  • 内联标签:按内容占位,高度和宽度是由自己的内容填充的,如:a,br,img;

判断块级标签和内联标签:

  • 1.是否独占一行(可以通过设置背景颜色进行判断);
  • 2.是否可以单独为元素设置宽度和高度;

<div>和<span>标签

<div></div>:<div>是一个块级标签,并无实际的意义,如同白板,主要通过CSS样式为其赋予不同的表现;

<span></span>:<span>标签为内联标签,并无实际意义,如同白板,主要通过CSS样式为其赋予不同的表现;

这两个标签专门为定义CSS样式而产生的,如果在网页中插入这两个标签,不会对页面产生任何影响。

<img>图形标签

  1. src: 要显示图片的路径.
  2. alt: 图片没有加载成功时的提示.
  3. title: 鼠标悬浮时的提示信息.
  4. width: 图片的宽
  5. height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

<a>超链接标签(锚标签)

所谓超链接,是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片、电子邮件、文件,甚至可以是一个应用程序;

  1. <a href="" target="_blank" >click</a>
  2. href属性指定目标网页地址。该地址可以有几种类型:
  3. 绝对 URL - 指向另一个站点(比如 href="http://www.jd.com)
  4. 相对 URL - 指当前站点中确切的路径(href="index.htm")
  5. 锚 URL - 指向页面中的锚(href="#top")

列表标签

  1. <ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
  2. <ol>: 有序列表
  3. <li>:列表中的每一项.
  4. <dl> 定义列表
  5. <dt> 列表标题
  6. <dd> 列表项

<table>表格标签

表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格可以包含文字、列表、图片、表单、数字符号、预置文本或者其它表格内容等。表格最重要的目的是显示表格数据,表格数据是指最适合组织为表格格式(即按行和列组织)的数据。

表格基本结构:

  1. <table>
  2. <tr>
  3. <th>标题</th>
  4. <th>标题</th>
  5. </tr>
  6. <tr>
  7. <td>内容</td>
  8. <td>内容</td>
  9. </tr>
  10. </table>

其属性:

  1. <tr>: 表行
  2. <th>: 表头
  3. <td>:表数据
  4. 属性:
  5. border: 表格边框
  6. cellpadding:内边距
  7. cellspacing: 外边距
  8. width:像素 百分比.(最好通过css来设置长宽)
  9. rowspan:单元格竖跨多少行
  10. colspan:单元格横跨多少列(即合并单元格)

前端基础:HTML标签(上)的更多相关文章

  1. 前端基础小标签3 H5新标签

    第二部分H5的新标签一.<!-- mark标签             1.用于显示页面中需要重点关注的内容,就像看书需要用荧光笔划重点一样             2.浏览器通常会用黄色显示m ...

  2. 前端基础小标签5 H5的一些新标签属性

    第二部分 部分图片和内容摘要于网络 二. formaction 属性规定当表单提交时处理输入控件的文件的 URL. formaction 属性覆盖 <form> 元素的 action 属性 ...

  3. 前端基础:HTML标签(下)

    前端基础HTML标签(下) 1.表单 表单的功能主要用于向服务器传输数据,从而实现客户端与Web服务器的交互.表单能够包含input系列标签,比如:文本字段.复选框.单选按钮.提交按钮等:表单还包含t ...

  4. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  5. 前端 html input标签 placeholder属性 标签上显示内容

    前端 html  input标签 的placeholder属性  标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...

  6. 前端基础之jQuery操作标签

    一.样式操作 样式类 addClass(); // 添加指定的CSS类名. removeClass(); // 移除指定的CSS类名. hasClass(); // 判断样式存不存在 toggleCl ...

  7. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  8. html css 前端基础 学习方法及经验分享

    前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...

  9. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

随机推荐

  1. Java和JDK版本的关系

    JAVA的版本最开始是1995年的JDK Alpha and Beta版本,第二年发布JDK1.0版本之后就是JDK1.1,JDK1.2.到1998年,不再叫JDK了,而是叫J2SE,但是版本号还是继 ...

  2. 在同一台机器上启动多个tomcat服务(转)

    转载:https://blog.csdn.net/wangxy799/article/details/53957770 1.案例:配置一台机上配置三个Tomcat 2.方法1:[只用修改第一个以外To ...

  3. 初识Tarjan

    Tarjan,一个十分有用的东西,可以求有向图的强连通分量,复杂度达到O(V+E). Tarjan算法是基于对图深度优先搜索的算法,每个强连通分量为搜索树中的一棵子树.搜索时,把当前搜索树中未处理的节 ...

  4. springboot 读写excel

    添加两个坐标: <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</a ...

  5. Redis系列九 Redis集群

    1. redis-cluster架构图 redis-cluster投票:容错 架构细节 ①所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. ②节点的fai ...

  6. MyBatis-自定义结果映射规则

    1.自定义结果集映射规则 ①查询 <!-- public Employee getEmpById(Integer id); --> <select id="getEmpBy ...

  7. python版protobuf 安装

    转自:http://www.tuicool.com/articles/VfQfM3 1. 下载protobuf源代码(当前最新版本为:2.5.0) #cd /opt #wget https://pro ...

  8. Python2快速入门教程,只需要这十五张图片就够了!

    今天给大家分享的教程是适用于Python 2.7,但它可能适用于Python 2.Python 2.7将停止在2020中的支持. 与Python 2.7和3兼容的Python代码是完全可能的.通过使用 ...

  9. Java集合学习--集合总结

    一.ArrayList与Vector ArrayList与Vector很多地方大同小异,Vector现在已经基本不再使用.具体的管理如下:1.ArrayList与Vector都实现了List接口,底层 ...

  10. lintcode142 O(1)时间检测2的幂次

    O(1)时间检测2的幂次 用 O(1) 时间检测整数 n 是否是 2 的幂次. 您在真实的面试中是否遇到过这个题? Yes 样例 n=4,返回 true; n=5,返回 false. 二进制的n中只有 ...