有趣的前端知识(二)

推荐阅读

智能化校园:深入探讨云端管理系统设计与实现(一)
智能化校园:深入探讨云端管理系统设计与实现(二)


文章目录

  • 推荐阅读
      • HTML元素
        • 元素
        • 属性
        • 头部元素
        • 列表元素
        • 区块元素
        • 表单元素
      • 颜色
      • 字符实体


有趣的前端知识(二)_第1张图片

HTML元素

元素

元素语法:

  • 元素以开始标签起始,以结束标签终止。
  • 元素内容是开始标签与结束标签之间的内容。
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 不少元素具有空内容。
  • 大多数元素可以嵌套其他元素。

这是一个段落。

,这一整个就是元素。

标签加属性加内容为元素
image.png




hello

属性
  • 元素中可以设置属性
  • 属性一般添加到开始标签中
  • 属性总是以名称或者值对的形式出现,例如:name="value"或者name=‘value’
  • 属性和属性值对大小写都行。
  • 属性值始终被包括在引号内,双引号或单引号皆可。

在某些个别的情况下,比如属性值本身就含有双引号,那么就必须使用单引号,例如:
name='hello “bob” ’

 
hello

头部元素
元素包含了所有的头部标签元素。在 元素中声明元信息,指示浏览器在何处可以找到样式表,包含的脚本等等。
可以添加在头部区域的元素标签为: ** ,

元素
标签定义了不同文档的标题。
在HTML/XHTML文档是必需的。
元素:</p> <ol> <li>定义了浏览器工具栏的标题</li> <li>当网页添加到收藏夹时,显示在收藏夹中的标题</li> <li>显示在搜索引擎结果页面的标题</li> </ol> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题 文档内容......

元素
标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。




元素
标签定义了文档与外部资源之间的关系。
标签通常用于链接到样式表。







元素
meta标签描述了一些基本的元数据。
标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
常用属性:content、http-equiv、charset

//为搜索引擎定义关键词:

//为网页定义描述内容:

定义网页作者:

每30秒钟刷新当前页面

列表元素

无序列表使用

  • 标签,有序列表使用
    1. 标签。

  • A
  • B
  1. C
  2. D

有趣的前端知识(二)_第2张图片
自定义列表以

标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以
开始。
有趣的前端知识(二)_第3张图片

区块元素

块级元素显示时通常会以新行来开始(和结束),

,

,

  • , 。
    内联元素显示时通常不会以新行开始, ,
    , , 。
    独立成行的元素为块元素,行内元素不能独立成行。
    有趣的前端知识(二)_第4张图片
    有趣的前端知识(二)_第5张图片

区块元素

这是一个在 div 元素中的标题。

这是一个在 div 元素中的段落。


内联元素

北京北京大学

北京北京大学

北京北京大学

有趣的前端知识(二)_第6张图片

表单元素

HTML 表单用于收集用户的输入信息。
表单标签

标签 描述
定义供用户输入的表单
定义输入域
定义文本域 (一个多行的输入控件)
定义了 元素的标签,一般为输入标题
定义了一组相关的表单元素,并使用外框包含起来
定义了 元素的标题
定义了下拉选项列表
定义选项组
定义下拉列表中的选项
定义一个点击按钮
指定一个预先定义的输入控件选项列表
定义了表单的密钥对生成器字段
定义一个计算结果

表单元素(声明表单范围,声明数据信息提交到服务器的范围)
表单控件(用来给用户输入数据)

  1. input元素,输入类型由type属性决定。
  • 文本框

    value :默认输入的值,maxlength:最大长度 ,readonly:设置只读。
    
  • 密码框

  • 文件框

  • 隐藏框

  • 单选框

     name :组名,同组radio互斥,checked:设置默认选中
    
  • 复选框

    checked 设置默认选中
    
  • 提交按钮

    method属性,用来定义表单数据的提交方式

  • post:指的是 HTTP POST 方法,表单数据会包含在表单体内然后发送给服务器,用于提交敏感数据,如用户名与密码等。
  • get:默认值,指的是 HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 ?作为分隔符,一般用于不敏感信息,如分页等。例如:https://www.baidu.com/?page=1,这里的 page=1 就是 get 方法提交的数据。
  • 重置按钮
  • 普通按钮
  1. 其他元素(3个)

label:用来管理表单中的文本,可以将文本和控件联系在一起。
select:下拉选,selected 默认选中
textarea 文本域,cols 指定最大列数,rows 指定指定最大行数,readonly

账号:

密码:

头像:

性别:

兴趣: music reading football

城市:

简介:

有趣的前端知识(二)_第7张图片

颜色

颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
RGBA 的意思是(Red-Green-Blue-Alpha)它是在 RGB 上扩展包括了 **“alpha” **通道,运行对颜色值设置透明度,该透明度的设置范围为0-1。
可以去该网站进行颜色对比。
HTML颜色代码表

字符实体

HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。

不间断空格
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用   字符实体。

实体名称对大小写敏感!

显示结果 描述 实体名称
空格  
< 小于号 <
> 大于号 >
& 和号 &
" 引号 "
撇号 ' (IE不支持)
¢
£ £
¥ 人民币/日元 ¥
欧元
§ 小节 §
© 版权 ©
® 注册商标 ®
商标
× 乘号 ×
÷ 除号 ÷

有趣的前端知识(二)_第8张图片

你可能感兴趣的:(前端,前端,html)