HTML基础

阅读量：7120 次

发布时间：2019-06-28

本文共 7098 字，大约阅读时间需要 23 分钟。

一.简介

什么是HTML ?　　

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

网页==HTML文档，由浏览器解析，用来展示的

静态网页：静态的资源，如xxx.html

动态网页：html代码是由某种开发语言根据用户请求动态生成的

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

    
         Title    这是标题

实例解释：　　

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

二.HTML元素

　　HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成

    
         Title    这是标题

<body> 元素：

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）

<html> 元素：

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。

元素内容是另一个 HTML 元素（body 元素

空的 HTML 元素:

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障

三.HTML标签

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码

开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）

标签属性：　　

通常是以键值对形式出现的. 例如 name="alex"

属性只能出现在开始标签或自闭和标签中.

属性名字全部小写. *属性值必须使用双引号或单引号包裹例如 name="alex"

如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

1.head头部元素标签

　　<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>

<title> 标签定义文档的标题

title 元素能够：

定义浏览器工具栏中的标题

提供页面被添加到收藏夹时显示的标题

显示在搜索引擎结果中的页面标题

    
         JD    
         第一章

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

    
                 这是标题

HTML <link> 元素

JD

HTML <style> 元素

HTML <meta> 元素

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务

针对搜索引擎的关键词

　　一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面

meta 元素定义页面的关键词：

name 和 content 属性的作用是描述页面的内容

HTML <script> 元素

　　<script> 标签用于定义客户端脚本，比如 JavaScript

2.body标签

　　基础标签：

示例　

第一章

第二章

JD

这是一个段落

呵呵

哈哈

3²=6

C_u

错误

第二章

图像标签

示例

JD

View Code

View Code

链接

示例

列表

    
          table    这是列表    这是表格    列表
    
      
    
          
              
       1
        
       2
        
       3
    
      
    
      
    
          
              
       1
        
       2
        
       3
    
      
    
      
    
          
              
       
        北京
       
        
       
        昌平区
       
        
       
        海淀区
       
    
      
    
      
    
          
      
                                            1                      2                      3                 
                                     4                      5                      6                 
                                     7                      8                      9

View Code

表格

    
          table    
          
      
                                            1                      2                      3                 
                                     4                      5                      6                 
                                     7                      8                      9

View Code


      
                        Company          Contact          Country         
                 Apple          Steven Jobs          USA         
                 Baidu          Li YanHong          China         
                 Google          Larry Page          USA         
                 Lenovo          Liu Chuanzhi          China         
                 Microsoft          Bill Gates          USA         
                 Nokia          Stephen Elop          Finland

Company	Contact	Country
Apple	Steven Jobs	USA
Baidu	Li YanHong	China
Google	Larry Page	USA
Lenovo	Liu Chuanzhi	China
Microsoft	Bill Gates	USA
Nokia	Stephen Elop	Finland

漂亮的表格

表单

1.表单属性

　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get 默认取值就是 get（信封）

get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

get/post是常见的两种请求方式

2.表单元素

<input> type: text 文本输入框

password 密码输入框

radio 单选框

checkbox 多选框

submit 提交按钮

button 按钮(需要配合js使用.) button和submit的区别？

file 提交文件：form表单需要加上属性enctype="multipart/form-data"

　　　　《HTML5新加》　　

- 　　email email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值
- 　　url　　url 类型用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值
- 　　number number 类型用于应该包含数值的输入域
- 　　range range 类型用于应该包含一定范围内数字值的输入域，range 类型显示为滑动条
- 　　Date pickers (date, month, week, time, datetime, datetime-local)

HTML5 拥有多个可供选取日期和时间的新输入类型：

- - - 　　date - 选取日、月、年
    - 　　month - 选取月、年
    - 　　week - 选取周和年
    - 　　time - 选取时间（小时和分钟）
    - 　　datetime - 选取时间、日、月、年（UTC 时间）
    - 　　datetime-local - 选取时间、日、月、年（本地时间）

- 　　search search 类型用于搜索域，比如站点搜索或 Google 搜索

<select> 下拉选标签属性：

name:表单提交项的键.

size：选项个数

multiple：multiple

<option> 下拉选中的每一项属性：value:表单提交项的值. selected: selected下拉选默认被选中

<optgroup>为每一项加上分组

<textarea> 文本域

　　　　name:表单提交项的键. cols:文本域默认有多少列 rows:文本域默认有多少行

View Code

    
          Title
      
          
       调查问卷    
       姓名:
    
           
       出生年月:
    
       性别
    
           
       男
    
       女
    *请选择每次访问页面等待时间    
       wait_time: 
    
           *请对每次体验评分    
       rang-are: 
    *请填写您的主页及联系方式    
           
       Homepage: 
    
           
       E-mail: