一、HTML介绍

1、Web服务本质

　　当我们在浏览器中输入一个url后打开一个页面这个过程实质是一个网络编程中的sockt服务端接受指令并发送指令的一个过程。本质顺序是：

浏览器发请求——>HTTP协议——>服务端接受请求——>服务端返回响应——>服务端把HTML文件内容发给浏览器——>浏览器渲染页面

import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 8080))

sk.listen(5)

while True:

    conn, addr = sk.accept()

    data = conn.recv(8096)

    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")

    conn.secd(b"<h1>Hello world!</h1>")

    conn.close()

Web服务本质

　　注：超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。

2、HTML

  • 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言，使用标签来描述网页，它不是一种编程语言。
  • 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
  • 网页文件的扩展名：html或htm

3、HTML文档结构分析

最基本的HTML文档：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>css样式优先级</title>

</head>

<body>

</body>

</html>
  1. <!DOCTYPE html>声明为HTML5文档。
  2. <html>、</html>是文档的开始标记和结束标记，是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
  3. <head>、</head>定义了HTML文件的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
  4. <title>、</title>定义了网页标题，在浏览器标题栏显示。
  5. <body>、</body>之间的文本是可见的网页主体内容。

　　注意：对于中文网页需要使用<meta charset="htf-8">声明编码，否则会出现乱码。有些浏览器会设置GBK为默认编码，则你需要设置为<meta charset="gbk"> 。

4、HTML标签格式

  1. HTML标签是由尖括号包围的关键字，如<htnl>、<div>等；
  2. HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线；
  3. 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等；
  4. 标签里面可以有若干属性，也可以不带属性。

标签的语法：

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

几个很重要的属性：

  1. id：定义标签的唯一ID，HTML文档树中唯一；
  2. class：为html元素定义一个或多个类名（classname）（CSS样式类名）；
  3. style：规定元素的行内样式（CSS样式）。

5、HTML注释

<!--注释内容-->

PyCharm中的具体操作是  ctrl + ？  即可。
注：注释很重要，体现了代码的规范，便于以后翻阅，在每个文件的上面一定要简明扼要的阐述一下本文件代码的用途和实现功能。（注释是代码之母）

6、<!DOCTYPE>

<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。

<!DOCTYPE>声明不是HTML标签，它是指示web浏览器关于页面使用哪个HTNL版本进行编写的指令。

二、HTML常用标签

1、head内常用标签

标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息

Meta标签

Meta标签介绍：

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

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

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

<!--2秒后跳转到对应的网址，注意引号-->

<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">

<!--指定文档的编码类型-->

<meta http-equiv="content-Type" charset=UTF8">

<!--告诉IE以最高级模式渲染文档-->

<meta http-equiv="x-ua-compatible" content="IE=edge">

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

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<meta name="description" content="老男孩教育Python学院">

2、body内常用标签

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

块级标签：默认占浏览器宽度，能设置长和宽。主要包含： h1~h6  div  p  hr

内敛标签（行内标签）：根据内容决定长度，不能设置长和宽。主要包含：a  img  u  s  i  b  span

<b>加粗</b>

<i>斜体</i>

<u>下划线</u>

<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<!--换行-->

<br>

<!--水平线--><hr>

2.特殊字符

内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

3.div标签和span标签

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

span标签用来定义内联（行内）元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素和行内元素的区别：

块级元素是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而产生的。

注意：关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

其中有一个特殊的：p标签不能包含块级标签。

4.img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

5.a标签

超链接标签：指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

什么是URL？

URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。

URL举例

http://www.sohu.com/stu/intro.html

http://222.172.123.33/stu/intro.html

URL地址由4部分组成

第1部分：为协议：http://、ftp://等

第2部分：为站点地址：可以是域名或IP地址

第3部分：为页面在站点中的目录：stu

第4部分：为页面名称，例如 index.html

各部分之间用“/”符号隔开。

URL

href属性指定目标网页地址。该地址可以有几种类型：

  1. 绝对URL：指向另一个站点（比如 href=“http://www.jd.com”）
  2. 相对URL：指当前站点中确切的路径（href="index.htm"）
  3. 锚URL：指向页面中的的锚（href="#top"）

target：

  1. _blank表示在新标签页中打开目标网页
  2. _self表示在当前标签页中打开目标网页

6.列表

1.无序列表

<ul type="disc">

  <li>第一项</li>

  <li>第二项</li>

</ul>

type属性：

  1. disc（实心圆点，默认值）
  2. circle（空心圆圈）
  3. square（实心方块）
  4. none（无样式）

2.有序列表

<ol type="1" start="2">

  <li>第一项</li>

  <li>第二项</li>

</ol>

type属性：

  1. 数字列表，默认值
  2. A 大写字母
  3. a 小写字母
  4. I 大写罗马
  5. i 小写罗马

3.标题列表

<dl>

  <dt>标题1</dt>

  <dd>内容1</dd>

  <dt>标题2</dt>

  <dd>内容1</dd>

  <dd>内容2</dd>

</dl>

7.表格

　　表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预制文本和其他的表格等内容。

　　表格最重要的目的是显示表格数据。表格数据是指最适合组织为表格格式（即按行和按列组织）的数据。

表格的基本结构：

<table>

  <thead>

  <tr>

    <th>序号</th>

    <th>姓名</th>

    <th>爱好</th>

  </tr>

  </thead>

  <tbody>

  <tr>

    <td>1</td>

    <td>Egon</td>

    <td>杠娘</td>

  </tr>

  <tr>

    <td>2</td>

    <td>Yuan</td>

    <td>日天</td>

  </tr>

  </tbody>

</table>

属性：

  1. border：表格边框
  2. cellpadding：内边框
  3. cellspacing：外边框
  4. width：像素百分比（最好通过css来设置长宽）
  5. rowspan：单元格竖跨多少行
  6. colspan：单元格横跨多少列（即合并单元格）

8.form

功能：

  • 表单用于向服务器传输数据，从而实现用户与服务器的交互；
  • 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等；
  • 表单还可以包含textarea、select、fieldset和label标签。

表单属性

属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）
action 规定向何处提交表单中的地址（URL）（提交页面）
autocomplete 规定向浏览器应该自动完成表单（默认：开启）
enctype 规定被提交数据的编码（默认：url-encoded）
method 规定在提交表单时所用的HTTP方法（默认：GET）
name 规定识别表单的名称（对于DOM使用：document.forms.name）
novalidate 规定浏览器不验证表单
target 规定action属性中地址的目标（默认：_self）

表单元素

基本概念：

HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。

表单一般用来收集用户的输入信息

表单工作原理：

访问者在浏览有表单的网页时，可填写必须的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。

服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

from django.conf.urls import url

from django.shortcuts import HttpResponse

def upload(request):

    print("request.GET:", request.GET)

    print("request.POST:", request.POST)

    if request.FILES:

        filename = request.FILES["file"].name

        with open(filename, 'wb') as f:

            for chunk in request.FILES['file'].chunks():

                f.write(chunk)

            return HttpResponse('上传成功')

    return HttpResponse("收到了！")

urlpatterns = [

    url(r'^upload/', upload),

]

Django接收上传文件代码

9.input

<input>元素根据不同的type属性，变化为多种形态。

type属性值 表现形式 对应代码
text 单行输入文本 <input type="text"/>
password 密码输入框 <input type="password"/>
date 日期输入框 <input type="date"/>
datetime 时间输入框 <input type="datetime"/>
checkbox 复选框 <input type="checkbox" checked="checked"/>
radio 单选框 <input type="radio"/>
submit 提交按钮 <input type="submit" value="提交"/>
reset 重复按钮 <input type="reset" value="重复"/>
button 普通按钮 <input type="button" value="普通按钮"/>
hidden 隐藏输入框 <input type="hidden"/>
file 文本选择框 <input type="file"/>

属性说明：

  • name：表单提交时的“键”，注意和id的区别。
  • value：表单提交时对应项的值
    • 　　type=“button”，“reset”，“submit”时，为按钮上显示的文本内容
    • type=“text”，“password”，“hidden”时，为输入框的初始值
    • type=“checkbox”，“radio”，“file”，为输入相关联的值
  • checked：radio和checkbox默认被选中的项
  • readonly：text和password设置只读
  • disabled：所有input均适用

10.select标签

<form action="" method="post">

  <select name="city" id="city">

    <option value="1">北京</option>

    <option selected="selected" value="2">上海</option>

    <option value="3">广州</option>

    <option value="4">深圳</option>

  </select>

</form>

属性说明：

  • multiple：布尔属性，设置后为多选，否则默认单选
  • disabled：禁用
  • selected：默认选中该项
  • value：定义提交时的选项值

11.label标签

定义：<label>标签为input元素定义标注（标记）。

说明：

  1. label元素不会向用户呈现任何特殊效果；
  2. <label>标签的for属性值应当与相关元素的id属性值相同。
<form action="">

  <label for="username">用户名</label>

  <input type="text" id="username" name="username">

</form>

12.textarea 多行文本

<textarea name="memo" id="memo" cols="30" rows="10">

  默认内容

</textarea>

属性说明：

  • name：名称
  • rows：行政
  • cols：列数
  • disabled：禁用

前端之HTML内容的更多相关文章

  1. 前端必学内容：webpack3快速入门 1-23节内容参考

    前端必学内容:webpack(模块打包器) webpack3 学习内容,点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpac ...

  2. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  3. [转] Web前端优化之 内容篇

    原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献. ...

  4. web前端优化之内容优化

    前端内容优化主要有以下几条: 1.尽量减少http请求 (1)合并文件,把多个css文件合并在一起: (2)css Sprites,把css相关的background元素进行背景图绝对定位: (3)图 ...

  5. 前端之CSS内容

    一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.CSS语法 1 ...

  6. 前端之JavaScript内容

    一.JavaScript概述 1.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnv软件中),后将其改名ScriptEas ...

  7. 前端知识--------HTML内容

    HTML介绍 1.web服务本质 import socket sk = socket.socket() sk.bind(('127.o.o.1',8080)) sk.listen() while 1: ...

  8. YUI前端优化之内容篇

    Excetional Performance团队总结出了一系列可以提高网站速度的方法.可以分为7大类34条.包括内容.服务器.cookie.CSS.JavaScript.图片.移动应用等七部分.一.内 ...

  9. web前端读取文本文件内容

    html5+js实现,参照xxyy888的CSDN博客文章<使用HTML+javascrpt读取txt文本文件>失败,将作者文章中的代码重新整理了下依然不行,文章代码存在的问题是括号错误, ...

随机推荐

  1. Unity服务端链接MySQL数据库

    链接数据库,可以分为以下几个流程: 链接MySQL(数据库地址.端口.用户名.密码) 选择数据库 执行sql语句 关闭数据库 转换为代码如下: using System; using MySql.Da ...

  2. Cucumber 行为驱动开发简介

    Cucumber 是一个能够理解用普通语言 描述的测试用例的支持行为驱动开发(BDD)的自动化测试工具,用Ruby编写,支持Java和.Net等多种开发语言. 现在看看Cucumber中用到的术语 . ...

  3. [.Net Core] 在 Mvc 中简单使用日志组件

    在 Mvc 中简单使用日志组件 基于 .Net Core 2.0,本文只是蜻蜓点水,并非深入浅出. 目录 使用内置的日志组件 简单过渡到第三方组件 - NLog 使用内置的日志 下面使用控制器 Hom ...

  4. postgresql和oracle数据库对比

    SQL执行计划干预 从使用postgresql来看,想要改变执行计划只能通过対表进行分析,不能通过添加hint的方式来改变执行计划: oracle不仅可以通过对表进行收集统计来改变执行计划,而且很重要 ...

  5. 网站转变风格的css变化

    网站换肤,是一个比较老的话题了,理论很清晰,就是要根据js 来变换文件加载的css文件,根据需求来加载不同的css文件,有了这个基础就很明确要怎么做了,但是实际上还要记录当前用户的cookie  保证 ...

  6. BigDecimal 转成 double

    NUMBER(20,2) 数据库里的字段number  ,实体是BigDecimal 将BigDecimal转成double public double getOrderamount() { if ( ...

  7. Java异常处理认识

    什么是异常? 就是在编程过程中或者程序运行过程中出现的一些意外. 什么是异常处理? 就是提前编写程序处理可能发生的意外. 具体的过程是怎样的? 知己知彼方能百战百胜.Java中的异常是用对象来表示的, ...

  8. [poj-2985]The k-th Largest Group_Treap+并查集

    The k-th Largest Group poj-2985 题目大意:给你n只猫,有两种操作:1.将两只猫所在的小组合并.2.查询小组数第k大的小组的猫数. 注释:1<=n,m<=20 ...

  9. 爬虫（scrapy--豆瓣TOP250）

    # -*- coding: utf-8 -*- import scrapy from douban_top250.items import DoubanTop250Item class MovieSp ...

  10. 使用redis的比较完美的加锁解锁

    使用redis的比较完美的加锁解锁 tags:redis read&write redis加锁和解锁 php 习惯性说一下写这篇文章要说明什么,我们经常用redis进行加锁操作,目的是为了解决 ...