前端三剑客之HTML详解（下）

前端三剑客之HTML详解（上）

HTML元素

元素

元素语法：

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

p>
    这是一个段落。/p>
    ，这一整个就是元素。

标签加属性加内容为元素

html>
    
body>
    
p>
    hello/p>
    
/body>
    
/html>
    

属性

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

在某些个别的情况下，比如属性值本身就含有双引号，那么就必须使用单引号，例如：

name='hello "bob" '

div style="color: antiquewhite">
    hello/div>
    

头部元素

head> 元素包含了所有的头部标签元素。在 head> 元素中声明元信息，指示浏览器在何处可以找到样式表，包含的脚本等等。

可以添加在头部区域的元素标签为: title> , style> , meta> , link> , script> , noscript> 和 base> 。

title> 元素

title> 标签定义了不同文档的标题。

在HTML/XHTML文档是必需的。

title> 元素:

1. 定义了浏览器工具栏的标题
2. 当网页添加到收藏夹时，显示在收藏夹中的标题
3. 显示在搜索引擎结果页面的标题

!DOCTYPE html>
    
html>
    
head>
     
meta charset="utf-8">
     
title>
    文档标题/title>
    
/head>
    
 
body>
    
文档内容......
/body>
    
 
/html>
    

base> 元素

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

head>
    
base href="http://www.baidu.com" target="_blank">
    
/head>
    

link> 元素

link> 标签定义了文档与外部资源之间的关系。

link> 标签通常用于链接到样式表。

head>
    
link rel="stylesheet" type="text/css" href="test.css">
    
/head>
    

style> 元素

style> 标签定义了HTML文档的样式文件引用地址.

在style> 元素中你也可以直接添加样式来渲染 HTML 文档.

head>
    
style type="text/css">

body{
    
    background-color:red;

}
    
/style>
    
/head>
    

meta> 元素

meta标签描述了一些基本的元数据。

meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

常用属性：content、http-equiv、charset

//为搜索引擎定义关键词:
meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    
//为网页定义描述内容:
meta name="description" content="免费 Web &
     编程 教程">
    
定义网页作者:
meta name="author" content="ktrol">
    
每30秒钟刷新当前页面
meta http-equiv="refresh" content="30">
    

列表元素

无序列表使用 ul> 标签，有序列表使用ol> 标签。

ul>
    
li>
    A/li>
    
li>
    B/li>
    
/ul>
    
ol>
    
li>
    C/li>
    
li>
    D/li>
    
/ol>
    

自定义列表以 dl> 标签开始。每个自定义列表项以 dt> 开始。每个自定义列表项的定义以 dd> 开始。

区块元素

块级元素显示时通常会以新行来开始（和结束）， h1> , p> , ul> , table> 。

内联元素显示时通常不会以新行开始，b> , td> , a> , img> 。

独立成行的元素为块元素，行内元素不能独立成行。

p>
    区块元素/p>
    
div style="color:red">
    
  h3>
    这是一个在 div 元素中的标题。/h3>
    
  p>
    这是一个在 div 元素中的段落。/p>
    
/div>
    
br>
    
p>
    内联元素/p>
    
p>
    北京span style="color: blue">
    北京大学/span>
    p>
    
p>
    北京b>
    北京大学/b>
    /p>
    
p>
    北京u>
    北京大学/u>
    /p>
    

表单元素

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

表单标签

表单元素（声明表单范围，声明数据信息提交到服务器的范围)

表单控件（用来给用户输入数据）

1. input元素，输入类型由type属性决定。

• 文本框input type="text">

value ：默认输入的值，maxlength：最大长度 ，readonly：设置只读。

• 密码框input type="password">
• 文件框input type="file"/>
• 隐藏框input type="hidden" value="kk"/>
• 单选框input type="radio">

name ：组名，同组radio互斥，checked:设置默认选中

• 复选框input type="checkbox">

checked 设置默认选中

• 提交按钮input type="submit">

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

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

• 重置按钮 input type="reset">
• 普通按钮 input type="button">

1. 其他元素（3个）

label:用来管理表单中的文本,可以将文本和控件联系在一起。

select:下拉选,selected 默认选中

textarea 文本域,cols 指定最大列数,rows 指定指定最大行数,readonly

form action="https://www.baidu.com">
    
  p>
    
    账号:input type="text"
  value="baidu"
  maxlength="12">
    
 /p>
    
  p>
    
    密码:input type="password"3. maxlength="16">
    
  /p>
    
    p>
    
        头像：input type="file"/>
    
    /p>
    
    p>
    
        input type="hidden" value="kk"/>
    
    /p>
    
    p>
    
        性别：
        input type="radio" name="sex" checked/>
    男
        input type="radio" name="sex"/>
    女
    /p>
    
    p>
    
        兴趣:
        input type="checkbox" checked/>
    music
        input type="checkbox"/>
    reading
        input type="checkbox"/>
    football
    /p>
    
    p>
    
    input type="submit" value="注册"/>
    
    input type="reset" value="重置"/>
    
    input type="button" value="试试"/>
    
    p/>
    
    p>
    
        input type="checkbox" id="a"/>
    
        label for="a">
    I agree/label>
    
    /p>
    
    p>
    
        城市：
        select>
    
            option>
    请选择/option>
    
            option>
     beijng/option>
    
            option>
    shanghai/option>
    
            option>
    guangzhou/option>
    
            option>
    changsha/option>
    
        /select>
    
    /p>
    
    p>
    
        简介：
        textarea cols="5" rows="5">
    想啥呢/textarea>
    
    /p>
    
/form>
    

颜色

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度，该透明度的设置范围为0-1。

可以去该网站进行颜色对比。

https://www.rapidtables.org/zh-CN/web/color/html-color-codes.html

字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

不间断空格

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

实体名称对大小写敏感！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！