HTML的基础知识点

Aurora
154 阅读14分钟

什么是HTML？

HTML的全称是Hyper Text Markup Language（超文本标记语言），它不是一种编程语言，而是一种标记语言，是用来构造浏览器的页面。“超文本”是页面里面包含着图片、链接、甚至音乐、程序等等的非文本语言元素。

HTML文档：

是HTML的根元素，是用来包含HTML文档的所有元素。 是在整个HTML文件的头部，这部分的内容是不会被展示在页面上的，这里通常是包括了页面的编码描述信息，作者描述信息，页面描述信息，JS的导入，CSS的导入等等信息。

<meta charset="utf-8>是用来声明当前文档的编码方式为utf-8。

用来声明当前文档的标题，并且该标题会展示在浏览器的选项卡中。 显示在页面上的所有元素都写在该元素里面。 下面是HTML5的HTML文档： <!DOCTYPE html> 
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

</body>

</html>

HTML元素

块级元素（Block elements）

独自占一行空间，通常是用来布局段落，列表，导航菜单，脚注等等结构。

注意：不可以将块级元素嵌套在行内元素中去。

常见的块级元素有：

（这个元素是纯粹的块级元素）、

、

,

,

... 、...

行内元素（Inline elements）

与其它元素共享一行空间，一般是嵌套在块级元素中的，通常作为段落中的一部分出现。

常见的行内元素有：

这个元素是纯粹的行内元素）、（加粗效果）、（加粗效果）、（倾斜效果，意味强调）...

HTML核心属性（绝大部分的元素都可以使用的属性）

id             唯一标识用的

class        用来标识一类元素

style        样式的使用

title          用来描述内容

HTML的语法

1、空白：在html文档中无论你在文档里面使用键盘敲出多少个空格或者换行，浏览器都会解析为一个空白。

2、实体：

  • 空格： 

  • <     :  <

  •     ：>

  • &     ：&

  • "       ："

  • '        ：'

3、注释：         注意：CSS注释为：/*  这是一段注释 */

HTML标签

  • 段落

我是彭于晏

  • 标题

一级标题

、

二级标题

、

三级标题

、

四级标题

、
五级标题
、
六级标题
  • 其它文本类型标签

   意为强调，内容更加有用

            加粗

         意为强调，突出文章重点，倾斜效果

             斜体

             下划线

上标 、            下标

  • 列表

**   1.**

    是有序列表    它的子元素是
  1. ,序号默认是1开始的；
    属性start规定了起始值，属性reversed规定了列表顺序为降序；

                                   tpye属性规定列表使用的标记类型，取值为：disc等，不建议使用。

   2.

    是无序列表    子元素是
  • ；

                                        tpye属性规定列表使用的标记类型，取值为：disc等，不建议使用。

       3.

    列表（自定义列表）      子元素
    :标题，子元素
    ：列表项。

                              href 表示跳转的目的地，取值如：目标元素的ID值；用于描点跳转-href="#目标元素的ID值"。

                          url使用的是path来定位文件，path可分为结对路径和相对路径。

                          email   QQ空间。

                          target规定如何打开链接文件：_self（默认，在当前页面打开新页面）；_blank（在新的页面打开链接文件）。

  • 图片       找不到图片

src是图片的url地址；alt是代替图片而出现的文本，前提是在src里面出错，图片在页面无法显示；width和height分别设置图片的宽高，单位是px（不建议使用）。

  • 表格

表格的属性：

                     align：表格如何在文档中对齐，取值为left、center、right。

                     border：表格边框的样式。

                     cellpadding：定义内容与单元格之间的距离。

                     cellspacing：定义单元格与单元格之间的距离。

                     width：定义表格的宽度。

                     bgcolor：定义表格的背景色。

表格的结构：

                   

：列分组

                   

：表头，它的里面包括着标签：和：表格的身体，它的里面包括着多个

                    

：表格的表脚，包括着对表的总结信息

                     

：表格的行，可以包括多个定义一个表里面的一组列，只能作为table的子元素，位于定义一个表中的列，常用做于元素的子元素。span 跨列数，规定由多少列可以作为同一列。

例子：

：表格的标题

                   

                    

、元素

and标签：

                      

表格中用来包含数据的单元格，常用于表头的单元格，写在该标签的内容有着居中加粗的效果。

                       属性：colspan  跨列数；rowspan  跨行数；width  宽度。

colgroup的使用：

                 

元素后，其它元素之前。

                 

学生信息表
姓名性别年龄
姓名性别年龄
姓名性别年龄

页面效果图：

HTML5-新增标签

  • header
有着引导和导航作用的结构元素，常作为标题，也可以用作搜索表单或者logo。

例如：

<header>
<h1>欢迎来到我的页面</h1>
<p>我是个大帅哥！</p>
</header>
  • nav
可以作为页面导航的链接组，导航元素可以链接到替他页面或者当前页面的其它部分。
例如：
<nav class="parent">      <ul>        <li><a href="#">one</a></li>        <li><a href="#">one</a></li>        <li><a href="#">one</a></li>      </ul>    </nav>
  • article
代表文档，页面或者是应用程序中独立的完整的，可以独自被外部引用的内容，也可以嵌套使用

例如：

<article>
  <h1>《帅哥新文集》</h1>
  <p> 《帅哥新文集》在2011年3月14日21:00 发布。</p>
</article>
  • section
是HTML文档独立的功能

例如：

<section><h1>文章</h1><p>这是一篇好文章</p></section>
  • aside
是用来表示当前页面或文章的附属信息内容，可以是引用、侧边栏、广告、导航条等等其它区别于主要内容的部分。

例如：

<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
  • footer
作为其上层父级内容区块或者是一个根目录的脚注。通常是脚注信息（作者，相关阅读或者版权信息等等）。

例如：

<footer>
  <p>writed by: pengyuyan</p>
  <p>Contact information: <a href="mailto:pengyuyan@example.com">pengyuyan@example.com</a>.</p>
</footer>
  • address
用来在文档中展示联系信息 如：作者名字，电话号码等等。

例如：

<address>
Written by PENGYUYAN<br> 
22<br>
CHINA
</address>
  • figure 与 figcaion
用来表示网页上一块独立内容，如果将它从页面上移除后不会对页面上的其他内容产生任何影响，
元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。
表示
元素的标题，它从属于
元素，必须书写在
元素内部。一个
元素内最多只允许放置一个
元素，但是允许放置多个其他元素。

例如：

<figure><figcaption>figure和figcaption标签示例</figcaption><p>作者：xxx 时间：2020年</p><p>这是一段代码示例</p></figure>

  • details

details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。

属性open，默认值为false，其内部的子元素被收起来不展示。summary子元素从属于details，当鼠标单击summary元素中的文字时，details元素中的其它从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供单击。

例如：

<details><summary>选我啊！</summary><p>我知道我很帅！</p></details>

表单（form)

Form标签属性

  • action      处理表单信息的应用程序的地址。
  • method    浏览器用来提交表单的HTTP方法，常用的属性是get/post。

       1）get     对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔。

       2）post    对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部。

  • name     表单的名字
  • target      浏览器接受到form的提交信息后在哪里显示回应

        1）_self    在当前选项卡打开响应内容

        2）_blank    在新选项卡打开响应内容

表单数据的内容类型

enctype属性 - application/x-www-form-urlencoded      所有字符（默认）使用到的编码方式。

                     - multipart/form-data           不对字符编码；在使用包含【文件上传控件】的表单时，必须使用该值。

                     - text/plain            空格转换为“+”加号，但是不对特殊字符编码。

Input表单控件

type属性，用来设定控件类型，取值如下：
  • text                 单行文本框

  • password        密码框，输入的内容将会被遮掩

  • checkbox        单选文本框，必须使用value属性来描述该组件提交的值，使用checked    属性默认选中。

  • radio               单选按钮，必须使用value属性来描述该控件所提交的值，使用checked属性默认选中。一个单选按钮组中所有控件都应该具有相同的name值，这样，每次只能选中按钮组中的某一个控件。

  • submit             提交按钮

  • reset                 重置按钮

  • file                    文件按钮，该控件时用于选中文件系统中的某个文件。

  • hidden              隐藏域，不会显示在页面上，但是其值会被提交。

  • image                图像按钮，必须使用src来加载图片，使用alt来声明替代文本。

  • button               普通按钮

其它属性：

  • name                 用来设定控件名字和提交数据的属性名

  • value                  用来控件值初始化，可选

  • checked             单选框，复选框默认选中属性

  • disabled             禁用组件，禁用组件的值也是不能够提交。

  • size                     当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,

    password，这时宽度是整数值，表示字符的数目，默认为20。
  • maxlength          指定可以输入的字符的最大值。适用于控件类型为text,password。

botton表单控件

属性：

  • type    指定控件类型    取值：button，submit，reset
  • name   按钮名称

label表单控件

label用于表示某一表单控件的标题，属性for与设定标题的表单控件的ID值一致。

例子：

<label>Click me<input type="text"></label>

使用了for

<label for="username">Click me</label><input type="text"  id="username">

select表单控件

select用来表示下拉列表或者列表，可用的属性如下：

  • multiple      指定控件类型
                           布尔类型的值，表示是否允许多选，如果select元素不包含属性size和属性
multiple时，表单类型显示为菜单（组合框），如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框。
  • size              显示的行数

                           当要表示一个可以滚动的列表时候，size表示同时展示的行数。默认值为0。表示非列表显示。

  • disabled       表示禁用控件，禁用控件的值也不能被提交。

  • name            用于指定该组件的名字，会与其option子元素的value值组成键值对随其他表单数据一齐被提交。

option表单组件

option用于表示选项，常包含在 , 中 disabled         表示禁用组件，禁用组件的值也不能被提交。 value              定义控件的初始值。提交表单时，初始值会被提交给服务器。 selected          表示该选项默认被选中。 optgroup表单控件 optgroup用于表示包含option的选项组，常包含在中。

属性：

  • disabled       表示禁用组件，禁用组件的值也不能被提交
  • label             表示选项组的名称

textarea表单控件

textarea用于表示多行文本框，没有value属性，其值被包含在标签内。

属性：

  • rows             定义文本框的行数
  • cols              定义文本框的列数
  • disabled       表示禁用控件，禁用组件的值也不能被提交
  • readonly      表示该控件只读，其值依然会被提交
  • name           用于指定该控件的名字，会随着其值一同被提交到后台

fieldset表单控件

fieldset控件用于在一个web表单中对多个控件和标签进行分组。

属性：

  • disabled        禁用filedset元素，该属性会影响fieldset的子元素。
  • name             fieldset元素的名称。
注意：fieldset的标题由标签提供。

HTML5-表单（新增）

新增表单元素

  • progress
progress表示任务的完成情况，常用于进度条。

属性：

  1. max        定义进度元素所要求的任务的工作量，默认值为1
  2. value      定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数
  • output
output 表示用户动作产生的结果。

属性：

  1. name        定义元素的名称。
  2. for            其他元素的id列表，表明这些元素为计算提供了输入值(或其他影响)，语义上的含义，但是未实现功能。
  • meter
meter元素表示规定范围内的数量值。例如：磁盘使用量，某个候选者的投票人数占
总投票人数的比例等。

属性：

  1. value           在元素中特地表示出来的实际值，该值在min与max之间，如果未指定，该值默认为1。
  2. min             指定规定范围时允许使用的最小值，默认为0。
  3. max             指定规定范围时允许使用的最大值，默认为1。
  4. low              规定范围的下限值必须小于或等于high属性的值。
  5. high             规定范围的上限值（表示较高危险的意思）。
  6. optimum     最佳值，最优值。
例如：
<meter low="69" high="80" max="100" value="84">A</meter>

注意：

  • 如果optimum<low，value越低越好。
                    value
                    low<=value<=high，是黄色
                    value>high，是红色
  • 如果low<=optimum<=high，或者没有optimum，value在中间最好
                    low<=value<=high，是绿色，其他为黄色
  • 如果optimum>high，value越高越好
                    value
                    low<=value<=high，是黄色
                    value>high，是绿色
  • datalist
 datalist表示其他控件可用的值，其值通过作为datalist的子元素存在。

注意：

与select的option的对比：
  • 如果在option标签内部写了内容的话，点击option之后，datalist显示的是option的
value，select那边显示的是option的元素内容。
  • 数据提交都提交的是option的value值。
  • datalist在火狐和谷歌上显示的区别，火狐上只显示内容，谷歌上显示value跟内容。

新增表单属性

type属性扩展：

在H5中，对input的type进行了扩展，可以有更多的取值
  • number                数字控件（只能输入数字） 属性min,max,step可以配合使用
  • range                   范围控件（通过控制条调整值）属性min,max,step可以配合使用
  • search                   搜索控件
  • tel                         电话控件
  • urlurl                    地址控件
  • email                    email控件，有校验功能
  • color                     颜色控件
  • date                      日期控件（年，月，日，不包含时间），火狐支持，谷歌支持
  • time                       时间控件，火狐支持，谷歌支持
  • datetime-local      日期时间控件，暂时火狐不支持，谷歌支持
  • month                  月插件（年，月），暂时火狐不支持，谷歌支持
  • week                     周插件（年，周）暂时火狐不支持，谷歌支持
form属性                  

在H5中，可以将表单内的从属元素书写在页面上的任何地方，然后为该元素指定一个form属性，属性值为该表单的id。

formaction               

一般用于提交按钮和图片按钮上，用于指定处理表单提交的后台程序，可以重写form中的action属性。

formenctype            

一般用于提交按钮和图片按钮上，用于指定处理表单的内容类型。

formmethod

一般用于提交按钮和图片按钮上，用于指定表单的提交方式。

formnovalidate

一般用于提交按钮和图片按钮上，布尔类型，提交时表单不被验证。

formtarget

一般用于提交按钮和图片按钮上，用于指定表单提交后在哪里显示响应页面。

autofocus

当页面加载完毕的时候，默认聚焦。在页面中，只能有一个表单元素具有该属性，值为boolean类型。

list

取值为元素的id，用于显示提示内容。

max/min

表单组件能够接受到的最大值/最小值。

placeholder

对用户的输入进行提示，常用于搜索框，不要出现回车换行。

pattern

取值为正则表达式，用于表单验证。

比如验证手机号：pattern=”1\d{10}” maxlength=“11”

验证邮箱：pattern=”\W+@\W+.com”

required

表示在表单提交之前必须表单组件中必须输入值

其它属性

媒体元素

音频

视频

高亮、引用、缩略词

高亮

高亮显示，黄底

引用

引用，倾斜

缩略词

<abbr title=”HyperText Markup Language”>HTML

思维导图

avatar
文章
阅读
粉丝