HTML基础

一.简介 

什么是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 标签，而是使用标签来解释页面的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是标题</h1>
</body>
</html>

实例解释：　　

  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题

二.HTML元素

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

嵌套的 HTML 元素

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是标题</h1>
</body>
</html>

<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 元素能够：

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JD</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
</head>
<body>
    <a>第一章</a>  
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="https://wwwbaidu.com/" />
    <base target="_blank" />
</head>
<body>
    <h1>这是标题</h1>
</body>
</html>

HTML <link> 元素

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

<link> 标签最常用于连接样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
    <meta http-equiv="REFRESH" CONTENT="2;https://www.baidu.com">
    -->
    <title>JD</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
</head>
<body>
</body>
</html>

HTML <style> 元素

<style> 标签用于为 HTML 文档定义样式信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body {background-color:yellow}
        p {color:blue}
    </style>

</head>
<body>

</body>
</html>

HTML <meta> 元素

<meta>meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页 功能

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

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

<meta> 标签始终位于 head 元素中。

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

针对搜索引擎的关键词

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

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

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

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">

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

HTML <script> 元素

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

2.body标签

　　基础标签：

　　

示例　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
    <meta http-equiv="REFRESH" CONTENT="2;https://www.baidu.com">
    -->
    <title>JD</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
</head>
<body>
    <a>第一章</a>
    <!--定义超链接(本地)-->
    <a href="#t">第二章</a>
    <!--样式-->
    <h1 style="background-color: aqua;color: brown">JD</h1>
    <!--段落-->
    <p>这是一个段落</p>
    <!--字体加粗-->
    <b>呵呵</b>
    <!--换行-->
    <br>
    <!--水平线-->
    <hr>
    <!--斜体-->
    <em>哈哈</em>
    <hr>
    <!--上标-->
    3<sup>2</sup>=6
    <br>
    <!--下标-->
    C<sub>u</sub>
    <br>
    <!--为文字加上一条中线-->
    <strike>错误</strike>
    <hr style="color: cyan;height: 10px">
    <!--图片-->
    <img src="mac.jpg" width="600px" height="500px" title="MAC">
    <h1 id="t">第二章</h1>
</body>
</html>

图像标签

　　

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
    <meta http-equiv="REFRESH" CONTENT="2;https://www.baidu.com">
    -->
    <title>JD</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
</head>
<body>
    <!--水平线-->
    <hr>
    <!--图片-->
    <img src="mac.jpg" width="600px" height="500px" title="MAC">
</body>
</html>
View Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
    <meta http-equiv="REFRESH" CONTENT="2;https://www.baidu.com">
    -->
    <title>JD</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
</head>
<body>
    <!--水平线-->
    <hr>
    <!--图片-->
    <figcaption>MAC 图片</figcaption>
    <img src="mac.jpg" width="600px" height="500px" title="MAC">
</body>
</html>
View Code

链接

　　

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!--定义文档与外部资源的关系（本例是调用了JD的logo）-->
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <!--定义锚-->
    <a href="https://www.baidu.com">搜索引擎</a>
    <!--定义导航链接-->
    <nav>
        <a href="ex1.html">file1</a>
        <a href="ex2.html">file1</a>
    </nav>
</head>
<body>
  呵呵
</body>
</html>

列表

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <a>这是列表</a>
    <a href="2" >这是表格</a>
    <h1>列表</h1>
    <hr>
    <!--这是无序的-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <hr>
    <!--这是有序的-->
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <hr>
    <!--自定义-->
    <dl>
        <dt>北京</dt>
        <dd>昌平区</dd>
        <dd>海淀区</dd>
    </dl>
    <hr>
    <!--表格-->
    <table id="2" border="1"  cellpadding="2px" style="width: 300px">
        <tr >
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr >
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr >
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>
View Code

表格

 　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <!--表格-->
    <table id="2" border="1"  cellpadding="2px" style="width: 300px">
        <tr >
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr >
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr >
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>
View Code
<html>
<head>
<style type="text/css">
#customers
  {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
  }

#customers td, #customers th 
  {
  font-size:1em;
  border:1px solid #98bf21;
  padding:3px 7px 2px 7px;
  }

#customers th 
  {
  font-size:1.1em;
  text-align:left;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#A7C942;
  color:#ffffff;
  }

#customers tr.alt td 
  {
  color:#000000;
  background-color:#EAF2D3;
  }
</style>
</head>

<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>

<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>

<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>


</table>
</body>
</html>
漂亮的表格

表单

　　

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:文本域默认有多少行

<!DOCTYPE html>
<!--表单-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://www.sogou.com/web" method="post">
        <p>用户名:<input type="text" name="query"></p>
        <p>密码:<input type="password" name="passwd"></p>
        <p style="color: orange"><b>性别</b></p>
        <!--单选-->
        <p>男<input type="radio" name="sex" value="male"></p>
        <p>女<input type="radio" name="sex" value="female"></p>
        <p style="color: orange"><b>爱好</b></p>
        <!--多选-->
        <p>篮球<input type="checkbox" name="hobby" value="basketball"></p>
        <p>足球<input type="checkbox" name="hobby" value="football"></p>
        <p>乒乓球<input type="checkbox" name="hobby" value="table tennis"></p>
        <!--文本上传-->
        <p><input type="file" name="filename"></p>
        <p>备注<textarea name="login_info"></textarea></p>
        <select name="location">
            <optgroup label="河南省">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </optgroup>
            <optgroup label="河北省">
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </optgroup>
        </select>
        <input type="submit" >
    </form>
</body>
</html>
View Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表单input新增元素 -->
<form action="http://www.sogou.com/web" method="post" enctype="multipart/form-data">
    <b style="color: black">调查问卷</b>
    <p>姓名:<input type="text" name="query"></p>
    <!--date-->
    <p>出生年月:<input type="date" name="user_birth" /></p>
    <p style="color: orange"><b>性别</b></p>
    <!--单选-->
    <p>男<input type="radio" name="sex" value="male"></p>
    <p>女<input type="radio" name="sex" value="female"></p>
    *请选择每次访问页面等待时间
    <p>wait_time: <input type="number" name = "wait_time" min="1" max="10"  style="width: 100px"></p>
    <!--rang-->
    *请对每次体验评分
    <p>rang-are: <input type="range" name="rang" min="1" max="100" step="1" /></p>
    *请填写您的主页及联系方式
    <!--url-->
    <p>Homepage: <input type="url" name="user_url" /><br /></p>
    <!--email-->
    <p>E-mail: <input type="email" name="user_email" ></p>
    <!--提交按钮-->
    <p><input type="submit" ></p>
</form>

</body>
</html>
input 新元素

块级标签和内联标签

块级标签：<p><h1><table><ol><ul><form><div>

内联标签：<a><input><img><sub><sup><textarea><span>

block（块）元素的特点
① 总是在新行上开始；
② 高度，行高以及外边距和内边距都可控制；
③ 宽度缺省是它的容器的100%，除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素

inline元素的特点
① 和其他元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下 
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

 

特殊字符：

      &lt; &gt；&quot；&copy;&reg;

posted @ 2016-06-24 16:48  jl_bai  阅读(296)  评论(0)  编辑  收藏  举报

♥

收藏

∧

返回顶部