文章目录

HTML介绍
- 一、前端概述
- 二、HTML的学习
- - 1、HTML是什么？
  - - 1.1 html文档树形结构图：
  - 2、什么是标签
  - 3、标签的==属性==
  - 4、 `<!DOCTYPE html>`标签
  - 5、head标签
  - 6、body标签
  - - 6.1 基本标签（块级标签和内联标签）
    - - 6.1.1 示例
    - 6.2 图形标签
    - - 6.2.1 示例
    - 6.3 超链接标签(锚标签)
    - - 6.3.1 示例
    - 6.4 列表标签
    - - 6.4.1 示例
    - 6.5 表格标签
    - - 6.5.1 示例
    - 6.6 表单标签
    - - 6.6.1 表单属性
      - 6.6.2 表单元素
      - 6.6.2.1 标签的属性和对应值
        
        6.6.2.2 slect 下拉选标签属性
        
        6.6.2.3 textarea 文本域
        
        6.6.2.4 label (其他表单控件相关联，点击label，关联的控件响应，可以增强用户体验)
        
        6.6.2.5 fieldset (对表单进行分组)
        
        6.6.2.6 示例

HTML介绍

一、前端概述

import socketdef main():sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)sock.bind(('localhost',8089))sock.listen(5)while True:connection, address = sock.accept()buf = connection.recv(1024)connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))connection.close()if __name__ == '__main__':main()

二、HTML的学习

1、HTML是什么？

htyper text markup language 即 超文本标记语言

超文本：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超标记语言: 标记（标签）构成的语言。
网页==HTML文档，由浏览器解析，用来展示的。
静态网页：静态的资源，如xxx.html。
动态网页：html代码是由某种开发语言根据用户请求动态生成的。

1.1 html文档树形结构图：

2、什么是标签

是由一对尖括号包裹的单词构成，例如： <html></html> 所有标签中的单词不能以数字开头。
标签不区分大小写<html> 和 <HTML> 推荐使用小写。
标签分为两部分：开始标签<a> 和结束标签</a>。两个标签之间的部分，我们叫做标签体。
有些标签功能比较简单。使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input/> <img/>
标签可以嵌套，但是不能交叉嵌套 <a><b></a></b>

3、标签的属性

通常是以键值对形式出现的. 例如：name="alex"。
属性只能出现在开始标签或自闭和标签中。
属性名字全部小写，属性值必须使用双引号或单引号包裹。例如： name="alex"。
如果属性值和属性名完全一样，直接写属性名即可.。例如 readonly。

4、 `<!DOCTYPE html>`标签

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为CompatibilityMode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standarsmode)，这就是二者最简单的区别。

W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode 和Standars mode，两种渲染方法共存在一个浏览器上。

window.top.document.compatMode：
//BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
//CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat，这也就是恶魔的开始 – 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。这就是的作用。

5、head标签

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

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的（类似于百度搜索优先推荐的作用）。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="定个小目标，一年赚1亿">

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

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

注意：X-UA-Compatible

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中
一个风险就是旧版本网站无法正确的显示。为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirks mode"为预设，这会
使页面以旧版本浏览器的视点显示，"Standards mode"(也称为"strict mode")特点是支持业界标准最为完善。
然而要利用这个增强的支持功能，网页必须包含恰当的<!DOCTYPE>指令。若一个网页没有包含<!DOCTYPE>指令，IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏
览器无法辨识，IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令，兼容性模式的
切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。随著时间经过，更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6
不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对IE做特定的对应。当 IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的
特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式，受到影
响的网站拥有者被迫更新他们的网站使其能支持IE7。IE8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮
助减轻所有问题，IE8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加
了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新
你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器
编译你的页面。这能让你选择将你的网站更新支持IE8新特点的时机。当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 <!DOCTYPE> 指令来确
定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式
（Quirks 模式）显示该网页。

非meta标签

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

6、body标签

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

<hn>: 标题标签：n 的取值范围是 1~6 ，从大到小，来表示标题<h1>1号标题</h1><h2>2号标题</h2><h3>3号标题</h3><h4>4号标题</h4><h5>5号标题</h5><h6>6号标题</h6><p>: 段落标签：包裹的内容被换行，并且上下内容之间有一行空白。<p>我是段落</p><b> <strong>: 加粗标签，后者代表特别强调的语义。<strike><del>: 为文字加上一条中线（删除标签），后者即将替代前者。<i><em>: 文字变成斜体（斜体标签）,后者代表一般强调语义。<sup>和<sub>: 上角标 和 下角表。<br>:换行。<hr>:水平线<!--布局标签：当没有任何语义的时候，就可以使用div或span来进行内容的包裹，目的是后期css代码可以找到对应标签中的内容来设置样式-->
<div>：独占一行空间，称之为大盒子
<span>：一行可以放置多个，称之为小盒子

6.1.1 示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>1号标签</h1><h1>2号标签</h1><h1>3号标签</h1><h1>4号标签</h1><h1>5号标签</h1><h1>6号标签</h1><p>p是段落标签</p><b>b标签</b><br><strong>strong标签</strong><br><s>s标签</s><br><del>del标签</del><br><em>em标签</em><br><i>i标签</i><br>哈哈<sup>sup标签</sup><br>喔喔<sub>sub标签</sub><br><hr><div>div标签</div><div>div标签</div><span>span标签</span><span>span标签</span></body>
</html>

块级标签：<p> <h1> <table> <ol> <ul> <form> <div>

内联标签：<a> <input> <img> <sub> <sup> <textarea> <span>

block（块）元素的特点：

总是在新行上开始
宽度缺省是它的容器的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素

inline(内联)元素的特点：

和其他元素都在一行上
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

特殊字符：

  &lt;&gt;&quot;&copy;&reg;

6.2 图形标签

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

6.2.1 示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="t1.gif" title="鼠标悬浮时显示的信息" alt="没有加载成功时,才显示出来"><br><img src="t1.gif" title="鼠标悬浮时显示的信息" alt="没有加载成功时,才显示出来" width="40px" height="20px"><br><img src="t33.gif" title="鼠标悬浮时显示的信息" alt="没有加载成功时,才显示出来"></body>
</html>

6.3 超链接标签(锚标签)

href：要连接的资源路径，格式如下: href="http://www.baidu.com" target: _blank : 在新的窗口打开超链接。框架名称: 在指定框架中打开连接内容。name: 定义一个页面的书签.用于跳转 href : #id.（锚）

6.3.1 示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!--超链接：点击之后实现页面内容的跳转href属性对应的属性值应该设置成带有   http://  才可以打开线上的网站--><a href="http://www.baidu.com">点击我可以打开百度</a><br /><!--如果想打开本地（你自己的电脑）的页面，只需要把目标文件和当前文件放在同一个目录中，在href属性中写目标文件的名字即可--><a href="01.html">点击我可以打开本地的页面</a><!--新窗口打开链接：默认超链接都是在当前窗口打开，如果想在新窗口打开，需要添加target属性--><br /><a href="http://www.baidu.com" target="_blank">点击我可以在新窗口打开百度</a><!--空链接：暂时不知道点击之后跳转到哪里，使用空链接占位,当知道具体要跳转的位置后，再回来更改即可--><a href="#">点击我可以打开隔壁学姐的页面</a><br /></body>
</html>

6.4 列表标签

<ul>: 无序列表（Unordered list）<li>:列表中的每一项<ol>: 有序列表（ordered list）<li>:列表中的每一项<dl>：定义列表<dt> 列表标题<dd> 列表项

6.4.1 示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul><li>香蕉</li><li>橘子</li><li>苹果</li></ul><ol><li>banana</li><li>orange</li><li>apple</li></ol><dl><dt>序号</dt><dd>1</dd><dd>2</dd><dd>3</dd><dt>名称</dt><dd>张三</dd><dd>李四</dd><dd>王五</dd></dl><dl><dt>名称</dt><dd>张三</dd><dd>李四</dd><dd>王五</dd></dl></body>
</html>

6.5 表格标签

border: 表格边框.cellpadding: 内边距cellspacing: 外边距.width: 像素 百分比.（最好通过css来设置长宽）<tr>: table row 行<th>: table head cell<td>: table data cellrowspan:  单元格竖跨多少行colspan:  单元格横跨多少列（即合并单元格）<th>: table header <tbody>(不常用): 为表格进行分区.

6.5.1 示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" width="200" height="150" align="center"><tr><td>序号</td><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>2001</td><td>张三</td><td>女</td><td>18</td></tr><tr><td>2002</td><td>李四</td><td>女</td><td>19</td></tr><tr><td>2003</td><td>王五</td><td>女</td><td>18</td></tr></table></body>
</html>

6.6 表单标签

表单用于向服务器传输数据

表单能够包含 input 元素，比如：文本字段、复选框、单选框、提交、重置、查询按钮等等。
表单还可以包含 =textarea、select、fieldset 和 label 元素。

6.6.1 表单属性

HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签，要提交的所有内容都应该在该标签中。

action: 表单提交到哪？

一般指向服务器端一个程序，程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如：https://www.sogou.com/web
method: 表单的提交方式 post/get 默认取值就是 get（信封）

get：
1、提交的键值对，放在地址栏中url后面。
2、安全性相对较差. 3.对提交内容的长度有限制。

post：
1、提交的键值对不在地址栏。
2、安全性相对较高.。
3、对提交内容的长度理论上无限制。

get/post 是常见的两种请求方式。

6.6.2 表单元素

6.6.2.1 标签的属性和对应值

type:    text        文本输入框password   密码输入框radio      单选框checkbox     多选框  submit         提交按钮            button      按钮(需要配合js使用.) button和submit的区别？file      提交文件：form 表单需要加上属性 enctype="multipart/form-data"   name:    表单提交项的键。注意和 id 属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
value:   表单提交项的值。对于不同的输入类型，value 属性的用法也不同：
1.type="button", "reset", "submit" - 定义按钮上的显示的文本
2.type="text", "password", "hidden" - 定义输入字段的初始值
3.type="checkbox", "radio", "image" - 定义与输入相关联的值　　checked:  radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使

上传文件注意两点：

请求方式必须是post
enctype=“multipart/form-data”

## 上传文件
def index(request):print request.POSTprint request.GETprint request.FILESfor item in request.FILES:fileObj = request.FILES.get(item)f = open(fileObj.name, 'wb')iter_file = fileObj.chunks()for line in iter_file:f.write(line)f.close()return HttpResponse('ok')

6.6.2.2 slect 下拉选标签属性

          name:表单提交项的键.size：选项个数multiple：multiple <option> 下拉选中的每一项 属性：value:表单提交项的值.   selected: selected下拉选默认被选中<optgroup>为每一项加上分组

6.6.2.3 textarea 文本域

name:    表单提交项的键
cols:    文本域默认有多少列
rows:    文本域默认有多少行

6.6.2.4 label (其他表单控件相关联，点击label，关联的控件响应，可以增强用户体验)

<label for="www">姓名</label>
<input id="www" type="text">

6.6.2.5 fieldset (对表单进行分组)

<fieldset><legend>登录吧</legend><input type="text">
</fieldset>

6.6.2.6 示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--form表单标签里面就是所有用户填写的表单数据；action="xxx.jsp"   把表单数据提交给哪一个后台程序去处理method="post"   传递数据时候的方式方法，post代表隐式提交数据；get明文传送数据--><form action="xxx.py" method="get"><!--中文的冒号，为了防止生成代码错误；input + tab 键来生成代码；type="text" 普通的输入框placeholder="请输入用户名"  文字提醒-->用户名：<input type="text" placeholder="请输入用户名" /><br /><!--type="password"   密码框-->密码框：<input type="password" /><br />性别：<!--type="radio"   单选框checked="checked"   此属性可以表达默认选中状态测试细节：1、点击查看是否为单选效果2、刷新的时候是否有默认选中的状态3、点击文字是否可以进行切换--><input type="radio" name="xb" checked="checked" id="nan" /><label for="nan">男</label><input type="radio" name="xb" id="nv" /><label for="nv">女</label><br />你的爱好：<!--type="checkbox"  多选框、复选框checked="checked"  默认选中测试细节：1、刷新的时候是否有默认选中的状态2、点击文字是否可以进行切换一切测试要追溯到用户的需求--><input type="checkbox" id="cs" checked="checked" /><label for="cs">测试</label><input type="checkbox" id="cf" /><label for="cf">吃饭</label><input type="checkbox" id="sj" /><label for="sj">睡觉</label><input type="checkbox" id="ddd" checked="checked" /><label for="ddd">打豆豆</label><br />来自：<!--select标签嵌套若干option标签，每组option就是一个下拉菜单中的选项selected="selected"   下拉菜单的默认选中测试细节：1、内容的顺序2、默认选中的状态3、内容的条数--><select><option>北京</option><option>上海</option><option>广州</option><option selected="selected">深圳</option></select><br /><!--textarea  文本域测试细节：1、测试三大主流浏览器外观大小是否一致2、提醒程序员禁用拖拽大小的功能--><style type="text/css">textarea{resize: none;}</style>意见：<textarea name="" id="" cols="30" rows="10"></textarea><br /><!--type="button"  普通按钮，需要js配合才能实现其它效果value属性设设置按钮身上的文字-->普通按钮：<input type="button" value="按钮" /><br /><!--type="reset"  点击后可以让表单数据恢复默认值value属性设设置按钮身上的文字-->重置按钮：<input type="reset" value="我是重置" /><br /><!--type="submit"  点击后可以让表单提交给指定后台处理value属性设设置按钮身上的文字点击后无论是否报错，都与我们无关，最终测试的时候，只要关注数据库中的内容是否正常添加即可-->提交按钮：<input type="submit" value="我是提交" /></form></body>
</html>

一、HTML基础介绍相关推荐

day23:shell基础介绍 alias及重定向
2019独角兽企业重金招聘Python工程师标准>>> 1.shell基础介绍: shell是一个命令解释器,用于用户与机器的交互: 也支持特定的语法(逻辑判断,循环): 每个用户都 ...
Android NDK开发之 NEON基础介绍
原文:http://blog.csdn.net/app_12062011/article/details/50434259 Android NDK开发之 NEON基础介绍这是官方介绍: http:/ ...
python介绍和用途-Python基础介绍（一）
Python基础介绍(一) 1. python是什么编程语言编译型与解释型编译器吧源程序的每一条语句都编译成机器语言,并保存成二进制文件,这样运行时计算机可以直接以极其语言来运行此程序,速度很快 ...
STL体系结构与内核分析-2-STL体系结构基础介绍(侯捷)--笔记
STL体系结构与内核分析(侯捷) 2.STL体系结构基础介绍 STL设计方式与OO(面向对象)不同的地方,OO鼓励数据和处理数据的方法都放在类里,而STL的数据在容器里,操作数据的方法在其他部件里(模 ...
ai一个线段多个箭头_初学设计却分不清PS和AI？超详细的AI基础介绍包你一看即会！...
以前提到AI,第一个想到的就是人工智能.自从扎进设计的神坑,再提到AI,我可只认软件了~ 包括小ke在内的很多设计小伙伴在最开始入行的时候都认为,只要学好PS就可以稳打设计圈了~毕竟那么多公号一提到设 ...
深度学习与计算机视觉系列(1)_基础介绍
转载自: 深度学习与计算机视觉系列(1)_基础介绍 - 龙心尘 - 博客频道 - CSDN.NET http://blog.csdn.net/longxinchen_ml/article/detail ...
【学习笔记】Tableau基础介绍
Tableau基础介绍 [简介] Tableau是一家提供商业智能的软件公司,正式成立于2004年,总部位于美国华盛顿西雅图. 源自美国国防部的一个项目需求,在斯坦福博士克里斯·斯图尔特和Pixar创 ...
python最基本的规则是什么_Python基础介绍（一）
Python基础介绍(一) 1. python是什么编程语言编译型与解释型编译器吧源程序的每一条语句都编译成机器语言,并保存成二进制文件,这样运行时计算机可以直接以极其语言来运行此程序,速度很快 ...
监控工具—Prometheus—基础介绍
原文作者:IT有意思原文地址:Prometheus(普罗米修斯)--适合k8s和docker的监控系统目录 1.介绍 2.监控原理 3.监控指标 4.系统架构 5.功能用途 6.面临挑战 1.介绍 ...
Laravel核心代码学习--用户认证系统(基础介绍)
用户认证系统(基础介绍) 使用过Laravel的开发者都知道,Laravel自带了一个认证系统来提供基本的用户注册.登录.认证.找回密码,如果Auth系统里提供的基础功能不满足需求还可以很方便的在这些 ...

一、HTML基础介绍

文章目录

HTML介绍

一、前端概述

二、HTML的学习

1、HTML是什么？

1.1 html文档树形结构图：

2、什么是标签

3、标签的属性

4、 `<!DOCTYPE html>`标签

5、head标签

6、body标签

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

6.1.1 示例

6.2 图形标签

6.2.1 示例

6.3 超链接标签(锚标签)

6.3.1 示例

6.4 列表标签

6.4.1 示例

6.5 表格标签

6.5.1 示例

6.6 表单标签

6.6.1 表单属性

6.6.2 表单元素

6.6.2.1 标签的属性和对应值

6.6.2.2 slect 下拉选标签属性

6.6.2.3 textarea 文本域

6.6.2.4 label (其他表单控件相关联，点击label，关联的控件响应，可以增强用户体验)

6.6.2.5 fieldset (对表单进行分组)

6.6.2.6 示例

一、HTML基础介绍相关推荐

最新文章

热门文章

一、HTML基础介绍

文章目录

HTML介绍

一、前端概述

二、HTML的学习

1、HTML是什么？

1.1 html文档树形结构图：

2、什么是标签

3、标签的属性

4、 <!DOCTYPE html>标签

5、head标签

6、body标签

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

6.1.1 示例

6.2 图形标签

6.2.1 示例

6.3 超链接标签(锚标签)

6.3.1 示例

6.4 列表标签

6.4.1 示例

6.5 表格标签

6.5.1 示例

6.6 表单标签

6.6.1 表单属性

6.6.2 表单元素

6.6.2.1 标签的属性和对应值

6.6.2.2 slect 下拉选标签属性

6.6.2.3 textarea 文本域

6.6.2.4 label (其他表单控件相关联，点击label，关联的控件响应，可以增强用户体验)

6.6.2.5 fieldset (对表单进行分组)

6.6.2.6 示例

一、HTML基础介绍相关推荐

最新文章

热门文章

4、 `<!DOCTYPE html>`标签