HTML 初识

web服务本质

  1. import socket
  2.  
  3. def main():
  4.  
  5.     sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
  6.     sock.bind(('localhost',8081))
  7.     sock.listen(5)
  8.  
  9.     while True:
  10.         print("server is working.....")
  11.         conn, address = sock.accept()
  12.  
  13.         request = conn.recv(1024)
  14.  
  15.         conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello Yuan</h1>","utf8"))
  16.         conn.close()
  17.  
  18. if __name__ == '__main__':
  19.  
  20.     main()

html结构

  • <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
  • <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
  • <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
  • <title></title>定义网页标题，在浏览器标题栏显示。
  • <body></body>之间的文本是可见的网页主体内容

html标签格式

标签的语法：

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

常用标签

<!DOCTYPE>标签

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

  1. BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
  2. CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

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

<head>内常用标签

<meta>标签

meta介绍
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的

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

(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

  1. <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
  2.  
  3. <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">

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

  1. <meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
  2.  
  3. <meta http-equiv="content-Type" charset=UTF8">
  4.  
  5. <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

非meta标签

  1.     <title>oldboy</title>
  2.     <link rel="icon" href="http://www.jd.com/favicon.ico">
  3.     <link rel="stylesheet" href="css.css">
  4.     <script src="hello.js"></script>　

<body>内常用标签

基本标签（块级标签和内联标签）

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

<div>和<span>

<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现. 
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

图形标签: <img>

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

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

  1. 什么是超级链接？
  2. 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上
  3. 的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
  1. 什么是URL？
  2. URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
  3. URL举例
  4. http://www.sohu.com/stu/intro.html
  5. http://222.172.123.33/stu/intro.html
  6.  
  7. URL地址由4部分组成
  8. 第1部分：为协议：http://、ftp://等
  9. 第2部分：为站点地址：可以是域名或IP地址
  10. 第3部分：为页面在站点中的目录：stu
  11. 第4部分：为页面名称，例如 index.html
  12. 各部分之间用“/”符号隔开。
  1. '''
  2.  
  3. <a href="" target="_blank" >click</a>
  4.  
  5. href属性指定目标网页地址。该地址可以有几种类型：
  6.  
  7.     绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
  8.     相对 URL - 指当前站点中确切的路径（href="index.htm"）
  9.     锚 URL - 指向页面中的锚（href="#top"）
  10.  
  11. '''

列表标签

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

表格标签: <table>

表格概念:

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：

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

属性：

  1. '''
  2.  
  3. <tr>: table row
  4.  
  5. <th>: table head cell
  6.  
  7. <td>: table data cell
  8.  
  9. 属性:
  10.  
  11.     border: 表格边框.
  12.  
  13.     cellpadding: 内边距
  14.  
  15.     cellspacing: 外边距.
  16.  
  17.     width: 像素 百分比.（最好通过css来设置长宽）
  18.  
  19.     rowspan:  单元格竖跨多少行
  20.  
  21.     colspan:  单元格横跨多少列（即合并单元格）
  22.  
  23. '''

表单标签: <form>

功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

表单属性:

action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get默认取值就是get

表单元素:

基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

<input>系列标签

  1. '''
  2. <1> 表单类型
  3. type:        text 文本输入框
  4.  
  5.              password 密码输入框
  6.  
  7.              radio 单选框
  8.  
  9.              checkbox 多选框  
  10.  
  11.              submit 提交按钮            
  12.  
  13.              button 按钮(需要配合js使用.) button和submit的区别？
  14.  
  15.              file 提交文件：form表单需要加上属性enctype="multipart/form-data" 
  16.  
  17.             上传文件注意两点：
  18.  
  19.                      1 请求方式必须是post
  20.                      2 enctype="multipart/form-data"

  21.  <2> 表单属性
  22.  name:    表单提交项的键.
  23.  
  24.            注意和id属性的区别：name属性是和服务器通信时使用的名称；
  25.            而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
  26.  
  27. value:    表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
  28.  
  29.                 type="button", "reset", "submit" - 定义按钮上的显示的文本
  30.  
  31.                 type="text", "password", "hidden" - 定义输入字段的初始值
  32.  
  33.                 type="checkbox", "radio", "image" - 定义与输入相关联的值
  34.  
  35. checked:  radio 和 checkbox 默认被选中
  36.  
  37. readonly: 只读. text 和 password
  38.  
  39. disabled: 对所用input都好使.
  40.  
  41. '''

select标签

  1. '''
  2.  <select> 下拉选标签属性
  3.  
  4.           name:表单提交项的键.
  5.  
  6.           size：选项个数
  7.  
  8.           multiple：multiple
  9.                  <optgroup>为每一项加上分组
  10.  
  11.                  <option> 下拉选中的每一项 属性：
  12.  
  13.                        value:表单提交项的值.
  14.                        selected: selected下拉选默认被选中
  15.  
  16. '''

<textarea> 多行文本框

  1. '''
  2.  
  3. <form id="form1" name="form1" method="post" action="">
  4.         <textarea cols=“宽度” rows=“高度” name=“名称”>
  5.                    默认内容
  6.         </textarea>
  7. </form>
  8.  
  9. '''

<label>标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

  1. '''
  2.  
  3. <form method="post" action="">
  4.  
  5.         <label for=“username”>用户名</label>
  6.         <input type=“text” name=“username” id=“username” size=“20” />
  7. </form>
  8.  
  9. '''

<fieldset>标签

  1. '''
  2.  
  3. <fieldset>
  4.     <legend>登录吧</legend>
  5.     <input type="text">
  6. </fieldset>
  7.  
  8. '''

前端基础☞html的更多相关文章

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

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

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

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

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

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

  4. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  5. 前端基础之DOM和BOM

    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...

  6. tableview前端基础设计（初级版）

    tableView前端基础设计 实现的最终效果 操作目的:熟悉纯代码编辑TableView和常用的相关控件SearchBar.NavigationBar.TabBar等,以及布局和基本功能的实现. 一 ...

  7. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

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

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

  9. 前端基础进阶（五）：全方位解读this

    https://segmentfault.com/a/1190000012646488  https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...

  10. 前端基础之BOM和DOM day52

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

随机推荐

  1. A Simple Problem with Integers POJ - 3468 (线段树)

    思路:线段树,区间更新,区间查找 #include<iostream> #include<vector> #include<string> #include< ...

  2. PYTHON网络爬虫与信息提取[网络爬虫协议](单元二)

    robots.txt在网站的根目录下 遵守 自动或人工识别robots.txt再进行内容爬取 约束性:建议性,不遵守协议,存在法律风险. 基本语法: User-agent: * Disallow: / ...

  3. Struts_改写客户列表练习

    1.CustomerAction修改放入ActionContext 2.list.jsp使用struts标签库

  4. Leetcode653.Two Sum IV - Input is a BST两数之和4-输入BST

    给定一个二叉搜索树和一个目标结果,如果 BST 中存在两个元素且它们的和等于给定的目标结果,则返回 true. struct TreeNode { int val; struct TreeNode * ...

  5. redis书籍

    redis中文官网命令网址:http://doc.redisfans.com/ redis英文官网命令网址:https://redis.io/commands redis书籍 由 Karl Segui ...

  6. JavaScript 中的多线程通信的方法

    在Html 5诞生之后,我们可以使用javascript来实现多线程处理.H5 新增了一个web workers api,使用这个API,用户可以很容易地创建在后台运行的线程,H5 中被称为workd ...

  7. javascript DOM知识脑图

  8. 媒体查询（media）：设置PC端网页居中显示

    @media screen and (min-width: 768px){ body{ background-color: #EAEAEA; } #fater{ width: 640px; margi ...

  9. Linux用户程序配置文件

    在 Linux(和一般的 UNIX)中,有无数的“用户”程序.最常见的一种用户程序配置文件是 /etc/lynx.cfg.这是著名的文本浏览器 lynx 的配置文件.通过这个文件,您可以定义代理服务器 ...

  10. Amazon Redshift数据迁移到MaxCompute

    Amazon Redshift数据迁移到MaxCompute Amazon Redshift 中的数据迁移到MaxCompute中经常需要先卸载到S3中,再到阿里云对象存储OSS中,大数据计算服务Ma ...