锐客网

  1. 首页 > it技术 > >

python学习笔记-Day13--|python学习笔记-Day13-- 前端知识 html

什么是 html

html --Hyper Text Mark-up Language是一种标记语言, 它有自己的语法规则,可以用来表现比更笨更丰富的内容,比如,图片,表格,链接等.


html文件的样子
下面是一个最基本的html文件

< 标题 - 锐客网 内容

html文件有两种模式, 使用doctype来定义

  1. BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
  2. CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）


也叫doctype ,这个属性会被浏览器识别并使用,当html文件没有doctype的时候,那么浏览器默认会使用BackCompat模式, 此时浏览器会按照自己的模式来渲染文件,不同的浏览器会有不同的渲染效果, 当 存在的时候,浏览器就是使用标准模式来渲染文件,此时不同浏览器的渲染效果是一样的.


多种doctype 对比:

python学习笔记-Day13--|python学习笔记-Day13-- 前端知识 html
文章图片



和

限定了文档的开始点和结束点，在它们之间是文档的头部和主体,可以告诉浏览器这是一个html文件




和 标签用于定义文档的头部，它是所有头部元素的容器,文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下列标签可用于head部分
, , ,用于定义客户端脚本，比如 JavaScript; 既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
注意:假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行。 标签之后的脚本会被忽略。
必须的属性

属性 值 描述
type MIME-type 指示脚本的 MIME 类型。
可选的属性

属性 值 描述
async async 规定异步执行脚本（仅适用于外部脚本）。
charset charset 规定在外部脚本文件中使用的字符编码。
defer defer 规定是否对脚本执行进行延迟，直到页面加载为止。
language script 不赞成使用。规定脚本语言。请使用 type 属性代替它。
src URL 规定外部脚本文件的 URL。
xml:space preserve 规定是否保留代码中的空白。






和 用于定义html文件的主体,包含文件的所有内容.
属性:(全部为可选属性)
属性 值 描述
alink
  • rgb(x,x,x)
  • #xxxxxx
  • colorname
 不赞成使用。请使用样式取代它。
规定文档中活动链接（active link）的的颜色。
background URL 不赞成使用。请使用样式取代它。
规定文档的背景图像。
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname
 不赞成使用。请使用样式取代它。
规定文档的背景颜色。
link
  • rgb(x,x,x)
  • #xxxxxx
  • colorname
 不赞成使用。请使用样式取代它。
规定文档中未访问链接的默认颜色。
text
  • rgb(x,x,x)
  • #xxxxxx
  • colorname
 不赞成使用。请使用样式取代它。
规定文档中所有文本的颜色。
vlink
  • rgb(x,x,x)
  • #xxxxxx
  • colorname
 不赞成使用。请使用样式取代它。
规定文档中已被访问链接的颜色。


#########################################################################


常用标签
和


可插入一个简单的换行符,通常在使用的时候格式为
(推荐的用法)。使用br的时候只是简单的开始新的一行,而在使用标签的时候 段落之间会产生一些间距,区别如下
第一行第一段
第二行第一段第三行第二段
第四行第二段

python学习笔记-Day13--|python学习笔记-Day13-- 前端知识 html
文章图片





用于定义超链接，从一个页面链接到另一个页面; 最重要的属性是 href 属性，它指示链接的目标;
标签还可以在html文件中起到 锚 的作用;

举个例子来说明什么是锚:当我们做一个很长的页面的时候,需要在页面做一个导航,点击导航的链接,不是打开一个新的页面,而是跳转到页面的某个位置,那个要跳转的位置, 就叫做锚点. 它是一种在页面内部定位的方式:

属性:
属性 值 描述
charset char_encoding HTML5 中不支持。规定被链接文档的字符集。
coords coordinates HTML5 中不支持。规定链接的坐标。
download filename 规定被下载的超链接目标。HTML5 中的新属性。
href URL 规定链接指向的页面的 URL。
hreflang language_code 规定被链接文档的语言。
media media_query 规定被链接文档是为何种媒介/设备优化的。
HTML5 中的新属性。
name section_name HTML5 中不支持。规定锚的名称。
rel text 规定当前文档与被链接文档之间的关系。
rev text HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape
  • default
  • rect
  • circle
  • poly
 HTML5 中不支持。规定链接的形状。
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
 规定在何处打开链接文档。
例如
_black表示在新的页面打开
type MIME type 规定被链接文档的的 MIME 类型。
HTML5 中的新属性。




到

用于定义标题, 定义最大的标题。 定义最小的标题。
可选属性:

属性 值 描述
align
  • left
  • center
  • right
  • justify
 不推荐使用。请使用样式替代它。
规定标题中文本的排列。
标准属性:(可用于任何 HTML 元素) id, class, title, style, dir, lang, xml:lang

事件属性: (浏览器中触发动作的能力,更多内容需要去了解 js) onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

例:
这是标题 h1 这是标题 h2 这是标题 h3
这是标题 h4 这是标题 h5 这是标题 h6

python学习笔记-Day13--|python学习笔记-Day13-- 前端知识 html
文章图片





用于创建单选或多选菜单,它是一种表单控件,可用于在表单中接受用户输入.
属性:
属性 值 描述
autofocus autofocus 规定在页面加载后文本区域自动获得焦点。
HTML5 中的新属性。
disabled disabled 规定禁用该下拉列表。
form form_id 规定文本区域所属的一个或多个表单。
HTML5 中的新属性。
multiple multiple 规定可选择多个选项。
name name 规定下拉列表的名称。
required required 规定文本区域是必填的。
HTML5 中的新属性。
size number 规定下拉列表中可见选项的数目。
例:
01 02

python学习笔记-Day13--|python学习笔记-Day13-- 前端知识 html
文章图片
python学习笔记-Day13--|python学习笔记-Day13-- 前端知识 html
文章图片
python学习笔记-Day13--|python学习笔记-Day13-- 前端知识 html
文章图片



input标签：用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。


checkbox用于创建复选框
在 HTML 文档中 每出现一次，Checkbox 对象就会被创建。
您可以通过遍历表单的 elements[] 数组来访问某个选择框，或者通过使用 document.getElementById() 。
Checkbox 对象的属性
属性 描述
accessKey 设置或返回访问 checkbox 的快捷键。
alt 设置或返回不支持 checkbox 时显示的替代文本。
checked 设置或返回 checkbox 是否应被选中。
defaultChecked 返回 checked 属性的默认值。
disabled 设置或返回 checkbox 是否应被禁用。
form 返回对包含 checkbox 的表单的引用。
id 设置或返回 checkbox 的 id。
name 设置或返回 checkbox 的名称。
tabIndex 设置或返回 checkbox 的 tab 键控制次序。
type 返回 checkbox 的表单元素类型。
value 设置或返回 checkbox 的 value 属性的值
标准属性
属性 描述
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。
Checkbox 对象的方法
方法 描述
blur() 从 checkbox 上移开焦点。
click() 模拟在 checkbox 中的一次鼠标点击。
focus() 为 checkbox 赋予焦点。




Radio 对象代表 HTML 表单中的单选按钮。
在 HTML 表单中 每出现一次，一个 Radio 对象就会被创建。
单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。
当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。
您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。
Radio 对象属性
属性 描述
accessKey 设置或返回访问单选按钮的快捷键。
alt 设置或返回在不支持单选按钮时显示的替代文本。
checked 设置或返回单选按钮的状态。
defaultChecked 返回单选按钮的默认状态。
disabled 设置或返回是否禁用单选按钮。
form 返回一个对包含此单选按钮的表单的引用。
id 设置或返回单选按钮的 id。
name 设置或返回单选按钮的名称。
tabIndex 设置或返回单选按钮的 tab 键控制次序。
type 返回单选按钮的表单类型。
value 设置或返回单选按钮的 value 属性的值。
标准属性
属性 描述
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。
Radio 对象方法
方法 描述
blur() 从单选按钮移开焦点。
click() 在单选按钮上模拟一次鼠标点击。
focus() 为单选按钮赋予焦点。


text 为input的默认值，没有type的时候，默认为text，可创建一个单行的文本输入字段。当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候，会触发 onchange 事件句柄。
Text 对象属性
属性 描述
accessKey 设置或返回访问文本域的快捷键。
alt 设置或返回当浏览器不支持文本域时供显示的替代文本。
defaultValue 设置或返回文本域的默认值。
disabled 设置或返回文本域是否应被禁用。
form 返回一个对包含文本域的表单对象的引用。
id 设置或返回文本域的 id。
maxLength 设置或返回文本域中的最大字符数。
name 设置或返回文本域的名称。
readOnly 设置或返回文本域是否应是只读的。
size 设置或返回文本域的尺寸。
tabIndex 设置或返回文本域的 tab 键控制次序。
type 返回文本域的表单元素类型。
value 设置或返回文本域的 value 属性的值。
标准属性
属性 描述
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。
Text 对象方法
方法 描述
blur() 从文本域上移开焦点。
focus() 在文本域上设置焦点。
select() 选取文本域中的内容。


password：和text类似，但是出入的字符串会被隐藏，当用户改变显示值时，它会触发 onchange 事件句柄。；该文本输入字段供用户输入某些敏感的数据，比如密码等。当用户输入的时候，他的输入是被掩盖的（例如使用星号*），以防止旁边的人从他背后看到输入的内容。不过需要注意的是，当表单提交时，输入是用明文发送的。
Password 对象属性

属性 描述
accessKey 设置或返回访问密码字段的快捷键。
alt 设置或返回当不支持密码字段时显示的替代文字。
defaultValue 设置或返回密码字段的默认值。
disabled 设置或返回是否应被禁用密码字段。
form 返回对包含此密码字段的表单的引用。
id 设置或返回密码字段的 id。
maxLength 设置或返回密码字段中字符的最大数目。
name 设置或返回密码字段的名称。
readOnly 设置或返回密码字段是否应当是只读的。
size 设置或返回密码字段的长度。
tabIndex 设置或返回密码字段的 tab 键控制次序。
type 返回密码字段的表单元素类型。
value 设置或返回密码字段的 value 属性的值。
标准属性
属性 描述
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。
Password 对象方法
属性 描述
blur() 从密码字段移开焦点。
focus() 为密码字段赋予焦点。
select() 选取密码字段中的文本。


button 可创建一个按钮 ，没有默认的行为，但是必须有一个 onclick 事件句柄以便使用。
Button 对象的属性
属性 描述
accessKey 设置或返回访问按钮的快捷键。
alt 设置或返回当浏览器无法显示按钮时供显示的替代文本。
disabled 设置或返回是否禁用按钮。
form 返回对包含该按钮的表单对象的引用。
id 设置或返回按钮的 id。
name 设置或返回按钮的名称。
tabIndex 设置或返回按钮的 tab 键控制次序。
type 返回按钮的表单元素类型。
value 设置或返回在按钮上显示的文本。
标准属性
属性 描述
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。
Button 对象的方法
方法 描述
blur() 把焦点从元素上移开。
click() 在某个按钮上模拟一次鼠标单击。
focus() 为某个按钮赋予焦点。


submit 可以创建一个提交按钮，在表单提交之前，触发 onclick 事件句柄，并且一个句柄可以通过返回 fasle 来取消表单提交。
Submit 对象属性
属性 描述
accessKey 设置或返回访问提交按钮的快捷键。
alt 设置或返回当浏览器不支持提交按钮时供显示的替代文本。
disabled 设置或返回提交按钮是否应被禁用。
form 返回一个对包含此提交按钮的表单的引用。
id 设置或返回提交按钮的 id。
name 设置或返回提交按钮的名称。
tabIndex 设置或返回提交按钮的 tab 键控制次序。
type 返回提交按钮的表单元素类型。
value 设置或返回在提交按钮上显示的文本。
标准属性
属性 描述
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。
Submit 对象方法
方法 描述
blur() 从提交按钮上移开焦点。
click() 在提交按钮上模拟一次鼠标点击。
focus() 为提交按钮赋予焦点。




file 可以创建一个上传文件的对象（FileUpload对象）；该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。该元素的 value 属性保存了用户指定的文件的名称，但是当包含一个 file-upload 元素的表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。为安全起见，file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略，并且对于此类元素来说，value 属性是只读的，这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名，file-upload 元素触发 onchange 事件句柄。
FileUpload 对象的属性
属性 描述
accept 设置或返回指示文件传输的 MIME 类型的列表（逗号分隔）。
accessKey 设置或返回访问 FileUpload 对象的快捷键。
alt 设置或返回不支持 时显示的替代文字。
defaultValue 设置或返回 FileUpload 对象的初始值。
disabled 设置或返回是否禁用 FileUpload 对象。
form 返回对包含 FileUpload 对象的表单的引用。
id 设置或返回 FileUpload 对象的 id。
name 设置或返回 FileUpload 对象的名称。
tabIndex 设置或返回定义 FileUpload 对象的 tab 键控制次序的索引号。
type 返回表单元素的类型。对于 FileUpload ，则是 "file" 。
value 返回由用户输入设置的文本后，FileUpload 对象的文件名。
标准属性
属性 描述
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。
FileUpload 对象的方法
方法 描述
blur() 从 FileUpload 对象上移开焦点。
focus() 为 FileUpload 对象赋予焦点。
select() 选取 FileUpload 对象。


例1：



<


python学习笔记-Day13--|python学习笔记-Day13-- 前端知识 html
文章图片

例2：
username:
password:
部门:
性别:
man
woman
noman


python学习笔记-Day13--|python学习笔记-Day13-- 前端知识 html
文章图片