Python之旅HTML篇

详情参考

https://www.w3cschool.cn/htmltags/?

HTML

HTML(Hyper Text Markup Language),超文本标记语言

标记语言

不仅描述了文档本身的信息,还描述了文档的结构和各部分的作用

HTML标签

标签就是<>这种形式的,描述了文本的作用,含有语义。
PS:HTML标签不区分大小写

HTML标签分类

1. 双标签,有开始标签和结束标签,例如:<html></html>
2. 单标签,没有结束标签,例如:<meta />

但不管是双标签和单标签,在HTML中都是闭合标签,
	双:<html></html>;
	单:<meta />

# PS:所有标签的应用要有语义,不能为了视觉效果,而滥用标签。

注释

注释:(要养成写注释的习惯)
注意事项:
    1. HTML注释不支持嵌套
    2. HTML注释不能写在HTML标签内
    3. 当然,注释内可以换行

额外知识点以及建议

1. `<img src="xxx" />`
   在HTML5中 空格和/ 是可选的

2. 标签尽量不使用大写,因为这是一种过时的写法

3. 属性值的引号是可选的,但按照习惯都会写上,
   而且属性值也尽量用小写。

4. 文件名和文件夹名:
    a. 尽量用小写;
    b. 多个单词之间用 - 分隔,而不是 _ ;
        搜索引擎对 - 的支持对 _ 更好,
        SEO搜索引擎优化可以让网页在搜索结果中排名靠前。        
    c. 扩展名使用 .html

5. URL:
    http://www.site.com/tofu/index.html
    http为模式/协议,告诉浏览器如何处理打开的文件
    www.site.com 是主机名称
    /tofu/index.html 是路径,路径包含到达这个文件的文件夹以及文件自身的名称。

    a). 也可以不包含文件名,那么URL会指向目录中的默认的
    index.html、index.htm、default.html等
    b). 但最好目录后面有个 / 
    c). 对于FTP以及几乎所有不使用HTTP协议的URL,都应该使用绝对路径
    d). 相对URL是相对当前位置作为参照

6. 使用HTML语义化的标签
   语义:描述网页内容的含义

   语义的重要性:
      1. 无障碍阅读
      2. SEO优化
      3. 更容易维护代码和CSS样式
    
7. HTML5是不使用块级、行内这些术语的,但是这样划分有助于理解。
8. 每个HTML标签都称为一个DOM元素

标签属性

1.HTML标签除一些特定属性外可以设置自定义属性例如`data-*`,
一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序。
2.属性值要用引号包裹起来,通常使用双引号也可以单引号。
3.属性和属性值不区分大小写,但是推荐使用小写。  

全局属性

id: 
    1. 必须以字母开头
    2. 其后的字符可以为字母、数字、下划线、-、:
    3. 区分大小写
    4. 全文档唯一,一个元素只能有一个id
    
class:
    1. 必须以字母开头
    2. 其后的字符可以为字母、数字、下划线、-
    3. 区分大小写
    4. 可以有多个类名,以空格分隔
    
style 

title 

hidden
    hidden="" / hidden="hidden" / hidden="sflksdjlkfjsdlkjf"  布尔属性
    对于布尔属性,HTML5中已经简化,没有写就是没有应用,写了就是应用
    
accesskey(Chrome 按alt + accesskey)

contenteditable
    contenteditable="false" / contenteditable="true",如果没有显示指定,则从父元素继承
    
draggable  
    draggable="false" / draggable="true" / draggable="auto",连接和图像默认是可以拖动的
    
spellcheck
    spellcheck="false" / spellcheck="true" 
    1. 对可编辑的元素
    2. 对textarea元素
    3. 对input元素(非密码)

data-* 属性用于存储私有页面后应用的自定义数据。
	data-* 属性由以下两部分组成:
	属性名不要包含大写字母,在 data- 后必须至少有一个字符。
	该属性可以是任何字符串
	注意: 自定义属性前缀 "data-" 会被客户端忽略。

HTML标签元素分类

1. 块元素;
2. 行内元素;
3. 行内块元素

块级元素特点:display:block;

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。独占一行

2、元素的宽度、高度、外边距、内边距、边框都可设置

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),
   除非设定一个宽度。

行内元素特点:display:inline;

1、和其他元素都在一行上;

2、元素的宽度、高度不可设置

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

行内块状元素的特点:display:inline-block;

1、和其他元素都在一行上;

2、元素的宽度、高度、外边距、内边距、边框都可设置

注意:

1. 我们可以通过display属性对块级元素、行内元素、行内块元素进行转换。

2. h1、h2、h3、h4、h5、h6、p 不能包含块级元素,只能包含行内元素以及行内块元素

文档类型声明

<!DOCTYPE html>   (html5)

文档总结构

<!DOCTYPE html>
<html lang="zh-CN">  # lang声明此文档主要语言是中文,以便于网络蜘蛛分类;英文为en (设置为en在中文Google浏览器中会显示是否要翻译)
  <head>  # 展示一些数据给浏览器
    <title></title>  # 没有title的文档,没有意义
  </head>
  <body>  # 展示内容给用户
  </body>
</html>

######################
Chinese zh-CN
English en
French fr
German de
Italian it
Japanese ja
Russian ru
Spanish es
Korean ko
######################

head中的标签

head中的内容是为浏览器和搜索引擎准备的

base

定义页面中所有相对URL的默认URL
ps: 只能有一个,而且最好放在head第一个元素,这样head其中的元素也可以用
    属性:
         href:
         target:

title

定义网页标题:
主要来告诉用户和搜索引擎当前网页的主要内容是什么。
还是浏览器书签的默认名称 

meta

定义元数据
应用:
  1,<meta charset="UTF-8"/>  # 指定文档的编码类型
  1.1,<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  # 指定文档的内容类型和编码类型
  2,<meta http-equiv="refresh" content="2"/>  # 每隔两秒刷新一次网页
  3,<meta http-equiv="refresh" content="2;URL=https://v.qq.com/"/>  # 两秒后跳转到其他网页
  <!-- 告诉IE浏览器以最高模式渲染 -->
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge" />-->
    <!-- 如果用户装了GCF,则用GCF渲染页面;如果没有就用IE渲染页面 -->
    <!-- GCF(Google Chrome Frame),是谷歌浏览器内嵌框架,
         可以让IE浏览器外观不变,但使用的是Chrome内核
    -->
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />-->
  4,<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>  
  5,<meta name="author" content="覃东宇"/>  # 声明文档作者
  <!-- 为了SEO优化,这两句一定要写 -->
  6,<meta name="keywords" content="Python, 全栈, 人工智能"/>  # 声明关键字
  7,<meta name="description" content="路飞学城"/>  # 网页描述信息,将展示在搜索结果中
    ###
    SEO优化:
    1. 路径文件夹以及文件名多个单词之间用-连接
    2. 使用语义化的标签
    3. <meta name="keywords" content="" />
    4. <meta name="description" content="" />

style

定义内部样式表:
<style type="text/css">
<!--
css声明...
-->
</style>

link

定义外部样式表:
基本格式:
   <link rel="stylesheet" type="text/css" href="外部样式表.css" />
    # 定义网站图标
    # 建议包含以下两行
   <link rel="shortcut icon" type="image/x-icon" href="xxx.icon" />
    ## type="image/vnd.microsoft.icon"  --> 最好用这个,image/x-icon只是为了兼容性
    ## 默认的图标名称为favicon.ico
   <link rel="icon" type="image/gif" href="xxx.gif" />
    ## type="image/png"  ---> 图标一般为16 x 16或者32 x 32

script

定义内部JS代码或者引入外部JS代码
<script type="text/javascript"></script>
<script type="text/javascript" src="xxx.js"></script>

body中的标签

a

超链接:(行内元素)
属性:
    href: 超引用,绝对或者相对地址;ps: 如果<a></a>没有href属性,那么a只是超链接的一个占位符
    target: 以什么方式打开链接
        _self: 默认方式,在当前页打开
        _blank: 在新的标签页打开
    download: 指定此链接为下载链接
        download="filename", 下载的时候会自动添加文件后缀, 所以直接写文件名即可
    ps: 特殊用法:
      定义锚:
	    # 特殊喵:# --> 回到顶部
        <a href="#_mark2">跳转到mark2</a>
        ...
        <a name="_mark2">这里是mark2</a>
        Note:
            用id代替name

abbr

声明缩写:(行内元素)
eg: <abbr title="World Wide Web">WWW</abbr>
    可以使用title属性来定义全称

address

定义文档或者文章作者的联系信息:(块元素)
<address></address>
    ps: 1,如果address位于body内,表示文档作者的联系信息;
           如果address位于article内,表示文章作者的联系信息。
        2,address一般位于footer内

footer

  定义页脚:(块元素)
  <footer></footer>

header

  定义页眉:(块元素)
  <header></header>

article

  定义文章:(块元素)
  <article></article>

aside

  定义侧栏:(块元素)
  <aside></aside>

地标

  role="banner"  ---> 用于页面级header(仅有一个)
  role="navigation"  ---> 用于nav(可以有多个)
  role="main"  ---> 用于main元素(仅有一个)
  role="complementary"  ---> aside/div(必须为补充性内容)(可以有多个)
  role="contentinfo"  ---> 页面级footer(仅有一个)

section

  定义一个区域: (块元素)
  <section></section>

img

定义图像:(行内块元素)
<img/>
  ps: 从技术上说,图像不会插入到HTML页面上,而是链接到HTML上,img只是作为图像的占位符(根据video得知,最好指定宽高,从而浏览器好预留出空间。这只我目前的推断,不知道对不对)
  属性:
      src: 图像URL
      alt: 当图像加载失败的时候,图像的替代文本
        ps: 1,如果图像仅作为装饰,则alt=""
            2,如果图像包含信息,则alt="写图像描述信息"
            3,如果图像被包含在<a></a>中,则alt="关于目标链接的描述信息"
      title: 当鼠标移到图像上时出现的提示信息
      width: 图像宽度,单位px
      height: 图像高度,单位px
      usemap: 将图像定义为客户端图像映射(意思是,图像带了可点击的区域,从而跳转到另一个页面)
        	  usemap="#map标签的name或者id"

map

定义客户端图像映射:(行内元素)
<map></map>
    ps: 1,应该同时指定id和name,因为有些浏览器支持不同
        2,内部要嵌套<area />
    属性:
      name: 指定name
      id: 指定id

area

定义图像映射内部的区域: (行内元素)
<area />
    属性:
      shape: 定义形状
        default: 全部区域
        circle: 圆
        rect: 正方形
        poly: 多边形
      coords: 定义坐标。
        default不用此数;
        circle: coords="20, 10, 5" 圆心 + 半径
        rect: coords="0,0, 100, 100" 一个顶点 + 另一个对角顶点
        poly: coords="0, 0, 20, 20, ..., 0, 0" 每个顶点,并且最后一个顶点最好写第一个顶点,为了闭合图形;如果不写,浏览器会自动加上
      href:
      alt: 图像无法显示的时候的替代文本
      target: 

em

  定义强调文本: (行内元素)
  <em></em>

strong

  定义重要文本: (行内元素)
  <strong></strong>

mark

  定义高亮文本: (行内元素)
  <mark></mark>

b

  定义高亮单词或短语,不带有任何着重的意味: (行内元素)
  <b></b>

i

  定义科技术语、发言、其他语种的成语俗语、想法、宇宙飞船名等: (行内元素)
  <i></i>

u

  定义与普通文本风格不同的文本(例如,拼写错误的单词或者汉语中的专有名词): (行内元素)
  <u></u>

s

  定义不正确、不准确、没有用的文本: (行内元素)
  <s></s>

del

  定义要删除的、要替换的文本: (行内元素)
  <del></del>
    ps: 配合ins标签使用
    属性:
      cite: 一个文档URL,其解释了删除的原因
      datetime: 删除的日期YYYY-MM-DDThh:mm:ssTZD

ins

  定义被插入的文本(一般为修正之后的文本): (行内元素)
  <ins></ins>
    ps: 呈现形式为 文本有下划线
    属性:
      cite: 一个文档URL,其解释了插入的原因
      datetime: 插入的日期

bdo

  定义覆盖文本默认的方向: (行内元素)
  <bdo></bdo>
    属性:
      dir: 文本方向
         ltr: 左至右,默认
         trl: 右至左

q

  定义短引用: (行内元素)
  <q></q>
    属性:
      cite: 规定引用源的URL

blockquote

  定义块/长引用: (块元素)
  <blockquote></blockquote>
    属性:
      cite: 规定引用源的URL

br

  定义换行:
  <br/>

定义特殊字符

  &lt;  # <
  &gt;  # >
  &amp;  # &
  &copy;  # © 
  &reg;  # ®
  &nbsp;  # 空格
  &yen;  # ¥
  更多: http://tool.chinaz.com/tools/htmlchar.aspx

cite

  指明作品的标题: (行内元素)(指明对某内容源的引用或参考。
  例如,戏剧、脚本或图书的标题;歌曲、电影、照片或雕塑的名称;演唱会、音乐会、规范等)
  <cite></cite>

dfn

  定义特殊术语或短语: (行内元素)
  <dfn></dfn>

ul

定义列表: (块元素)
一,定义无序列表
  <ul>
    <li></li>
      ...
      <li></li>
  </ul>

ol

二,定义有序列表
  <ol>
    <li></li>
    ...
    <li></li>
  </ol>
  ol的属性:
    type: 序号类型
      1: 阿拉伯数字
      A: 大写字母
      a: 小写字母
      I: 大写罗马数字
      i: 小写罗马数字
    start: 起始值
      start="2"
    reversed: 降序

dl

三,定义描述列表
  <dl>
    <dt>项目名称</dt>
    <dd>每一个项目</dd>
    ...
    <dd></dd>
    <dt></dt>
    <dd></dd>
    ...
    <dd></dd>
    ...    
  </dl>

div

  定义块级元素:
  <div></div>
    ps: 块级元素就是独占一行

span

  定义行内元素:
  <span></span>    
    ps: 行内元素的宽度根据内容的多少而变化

figure

  定义独立的流内容: (块元素)
  <figure></figure>

figcaption

  定义figure流内容的标题: (块元素)
  <figcaption></figcaption>
    ps: 位于figure的第一个元素或者最后一个元素

hr

  插入水平线: (块元素)
  <hr/>
    ps: 语义,表示内容主题的变化

标题

  定义HTML标题: (块元素)
  <h1></h1>  # 最高等级标题
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>

hgroup

  定义标题分组: (块元素)
  <hgroup></hgroup>

nav

  定义导航链接部分: (块元素)
  <nav></nav>

meter

  定义度量衡: (行内元素)
  <meter></meter>
    属性:
      max: 范围的最大值,浮点
      min: 范围的最小值
      value: 范围的当前值
      optimum: 范围的最优值
      high: 在范围内被界定为高的值
      low: 在范围内被界定为低的值

progress

  定义进度: (行内元素)
  <progress></progress>
    属性:
      max: 进度的最大值,浮点
      value: 当前进度值

p

  定义段落: (块元素)
  <p></p>
    ps: p不能嵌套块级元素

pre

  定义格式化文本: (块元素)
  <pre></pre>
    ps: 1,只能包含普通文本以及行内元素,不能包含块级元素
        2,常见应用,表示计算机的源代码

code

  定义计算机代码文本: (行内元素)
  <code></code>

var

  定义变量: (行内元素)
  <var></var>

samp

  定义计算机程序的样本(输出)文本: (行内元素)
  <samp></samp>

kdb

  定义键盘文本。它表示文本是从键盘上键入的。
  它经常用在与计算机相关的文档或手册中。
  <kbd></kbd>

ruby

  定义注释/注音的文本: (行内元素)
  <ruby>
    汉
    <rp>(</rp><rt>Han</rt><rp>)</rp>
    字
    <rp>(</rp><rt>Zi</rt><rp>)</rp>
  </ruby>
    ps: 不支持ruby时,显示rp中的内容

sup

  定义上标文本: (行内元素)
  <sup></sup>

sub

  定义下标文本: (行内元素)
  <sub></sub>

detail

  定义一个可折叠的元件: (块元素)
  <details open>
    <summary></summary>
  </details>
    ps: summary定义标题,位于details第一个元素,details内可放任意内容
        open表示默认打开

table

  定义表格: (块元素)
  <table border="1">  # cellspacing,单元格外边距   # cellpadding,单元格内边距
    <caption>花名册</caption>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>      
      </tr>
    </thead>
    <tfoot>
      <tr>
      <td>...</td>  # rowspan="2" 竖跨2行;colspan="2"横跨2列
      <td>...</td>
      <td>...</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>

time

  定义时间: (行内元素)
  <time></time>
    ps: 如果其内容没有包含时间的话,应用属性datetime="YYYY-MM-DDTHH:MM:SSTZD"说明
    属性:
      datetime: 说明时间

wbr

  定义换行位置: 
  <wbr/>

audio

  定义音频文件: (行内元素)
  <audio></audio>
    ps: 1,可在其中放置文本,文本将在那些不支持audio标签的浏览器中显示
        2,最好使用source标签,找到一个支持的source后,就不再继续往后查找了
        3,支持的格式
          mp3
          ogg
          wav
    属性:
      controls: 显示音频控件
      autoplay: 自动播放
      loop: 循环
      muted: 静音
      preload: 当网页加载的时候,音频是否被加载, 如果设置了autoplay, 则此属性自动失效
        auto: 当页面加载后,载入整个音频
        meta: 当页面加载后,载入元数据
        none: 当页面加载后,不载入音频
      src: 音频的URL

video

  定义视频: (行内元素)
  <video></video>
   ps:  1,可在其中放置文本,文本将在那些不支持video标签的浏览器中显示
        2,最好使用source标签,找到一个支持的source后,就不再继续往后查找了
        3,最好规定width和height
        4,支持的格式
          mp4
          ogg
          webm
    属性:
      controls: 显示视频控件
      autoplay: 自动播放
      loop: 循环
      muted: 静音
      preload: 当网页加载的时候,视频是否被加载,如果设置了autoplay, 则此属性自动失效
        auto: 当页面加载后,载入整个视频
        meta: 当页面加载后,载入元数据
        none: 当页面加载后,不载入视频
      src: 视频的URL  
      poster: 规定视频加载时显示的图像URL
      width: 宽度,像素,100或100px
      height: 高度

source

  定义可选择的音视频: 
    ps: 找到一个支持的source后,就不再继续往后查找了
  <audio controls> 
    <source src="horse.ogg" type="audio/ogg"> 
    <source src="horse.mp3" type="audio/mpeg"> 
    您的浏览器不支持 audio 元素。 
  </audio> 

  <video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
    <source src="movie.webm" type="video/webm"> 
    您的浏览器不支持 video 标签。 
  </video>

form

定义表单: (块元素)
<form></form>
  属性: 
    action: 规定当提交表单时向何处发送表单数据
    autocomplete:  是否启动表单自动完成功能,默认开启,on
      autocomplete="off" 关闭
    method: 发送表单数据的HTTP方法
      get: 默认 
        1,提交的时候,以键值的形式附加在URL
        2,URL长度有限制,大约3000字符,数据最大2KB
        3,适合非安全数据,不要用get发送敏感数据
      post:
        1,没有长度限制,也没有数据限制
        2,适合发送安全数据
        3. 数据不会在地址栏中显示,包含在请求体中
        
    novalidate: 不对有规定格式的控件的格式进行验证
    accept-charset: 表单的字符编码,可以有多个,以空格分隔;默认为UNKNOWN(表示包含form元素的文档编码)
    enctype: 规定当提交表单到服务器之前如何对表单编码,
             只有method="post"才设置此属性
      application/x-www-form-urlencoded, 
                                        默认,允许提交普通字符、特殊字符,不允许将提交文件
                                        以及对所有字符进行编码,将空格转换为 + , 特殊字符转换为ASCII HEX值
      multipart/form-data, 允许文件被提交,不对其他字符进行编码
      text/plain, 只允许提交普通字符,将空格转换为 +。不允许提交特殊字符以及文件
    name: 表单名称
    target: 规定一个在何处打开提交表单后action程序响应的内容的URL
      _self: 默认
      _blank:

form标签中的元素

label
  <label></label> (行内元素)
  ps: 配合input, textarea, select使用
  属性:
    for: input 的 id值
input部分
 <input/>  (行内块)
 属性:
   type:
     text: 默认,可见宽度20个字符
     password: 密码字段
     button: 定义可点击的按钮(通常与JS使用)
     submit: 提交按钮
     image: 定义图像为提交按钮
     reset: 重置按钮
     checkbox: 复选框
     radio: 单选按钮
     color: 拾色器
     date: 日期
     time: 时间,不带时区
     datetime: 基于UTC时区
     datetime-local: 不带时区
     month: 年和月,不带时区
     week: 年和周,不带时区
     email: 邮箱字段
     tel: 电话字段
     search: 搜索字符串的字段
     url: 输入URL的字段
     number: 输入数字的字段
     range: 可拖拽游标输入数字的控件
     file: 上传文件控件
     hidden: 隐藏字段
   
   maxlength: 最大字符数
   size: 可见宽度,默认20
   name: 名字
   value: 值
   src: image图像的URL
   alt: 图像加载失败时的替换文本
   width: 图像宽
   height: 图像高
   checked: 默认选中 radio checkbox
   max: 最大值,接收数字和日期
   min: 最小值
   step: 步长
   multiple: 用于file和email,可以接收多个
   accept: 用于file,规定上传时的文件类型 <input accept="audio/*,video/*,image/*" />
         后缀名       MIME名称
         *.3gpp    audio/3gpp, video/3gpp
         *.ac3    audio/ac3
         *.asf       allpication/vnd.ms-asf
         *.au           audio/basic
         *.css           text/css
         *.csv           text/csv
         *.doc    application/msword
         *.dot    application/msword
         *.dtd    application/xml-dtd
         *.dwg    image/vnd.dwg
         *.dxf      image/vnd.dxf
         *.gif            image/gif
         *.htm    text/html
         *.html    text/html
         *.jp2            image/jp2
         *.jpe       image/jpeg
         *.jpeg    image/jpeg
         *.jpg          image/jpeg
         *.js       text/javascript, application/javascript
         *.json    application/json
         *.mp2    audio/mpeg, video/mpeg
         *.mp3    audio/mpeg
         *.mp4    audio/mp4, video/mp4
         *.mpeg    video/mpeg
         *.mpg    video/mpeg
         *.mpp    application/vnd.ms-project
         *.ogg    application/ogg, audio/ogg
         *.pdf    application/pdf
         *.png    image/png
         *.pot    application/vnd.ms-powerpoint
         *.pps    application/vnd.ms-powerpoint
         *.ppt    application/vnd.ms-powerpoint
         *.rtf            application/rtf, text/rtf
         *.svf           image/vnd.svf
         *.tif         image/tiff
         *.tiff       image/tiff
         *.txt           text/plain
         *.wdb    application/vnd.ms-works
         *.wps    application/vnd.ms-works
         *.xhtml    application/xhtml+xml
         *.xlc      application/vnd.ms-excel
         *.xlm    application/vnd.ms-excel
         *.xls           application/vnd.ms-excel
         *.xlt      application/vnd.ms-excel
         *.xlw      application/vnd.ms-excel
         *.xml    text/xml, application/xml
         *.zip            aplication/zip
         *.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
   formaction:
   formmethod:
   formectype:
   formtarget:
   formnovalidate:
   autocomplete:
   autofocus:
   required:
   readonly:
   disabled:
   placeholder:
   pattern:
   list: 引用datalist预定义的选项
     list="datalist_id"
     例子:option中value属性对应的值或者标签之间的内容只有符合type的格式才会显示
     <label for="ls">搜索</label>
     <input id="ls" list="url" type="url">
     <datalist id="url">
       <option>https://www.baidu.com</option>
       <option>https://v.qq.com</option>
       <option>https://v.qq.com</option>
     </datalist>
textarea
 文本域
 <textarea></textarea>
 ps: 标签之间的内容,会显示在文本框中
 属性:
   rows: 默认2
   cols: 默认20个字符
   wrap:
     soft: 提交表单时,不换行,默认
     hard: 换行
   maxlength:
   name:
   autofocus:
   readonly:
   required:
   placeholder:
   disabled:  
button
   按钮
   <button></button> 标签之间可以放文本或者图像
   属性:
     autofocus:
     disabled:
     form
     formaction:
     formmethod:
     formenctype:
     formtarget:
     formnovalidate: 
     name:
     type:
       button:
       submit:
       reset:
     value:   
select
  下拉列表
   <select></select>
   属性:
     autofocus:
     disabled:
     required:
     name:
     size:  >1 为滚动列表
     multiple: 可以选择多个,针对滚动列表
   <optgroup></optgroup>
   将选项分组
   属性:
     disabled: 禁用这一组
     label: 这一组的描述
   <option></option>
   定义选项
   属性:
     disabled:
     selected: 默认第一个选项被选中
     label: 内容更短的版本
     value:
   注意:如果没有规定 value 属性,选项的值将设置为 <option> 标签中的内容。
fieldset
   将相关元素分组  (块元素)
   <fieldset></fieldset>
   属性:
     disabled:
     name:
   <legend></legend> 为fieldset定义标题,是fieldset的第一个元素
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值