天天看点
返回

WEB前端学习之HTML一、HTML(HTML5标准)

web开发人员必须学习得3门语言：

  1.  HTML   定义了网页的内容；
  2. CSS 描述了网页的布局；
  3. JavaScript   网页的行为。

一、HTML(HTML5标准)

1.什么是HTML：

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

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

2.HTML 标签：

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

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

3.通用声明：

    HTML5 ：<!DOCTYPE  html> 

4.字符声明：

    如果要是用中文，就需要在头部将字符声明为 UTF-8。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

5.HTML 元素:

    HTML 文档由 HTML 元素定义。 如：

WEB前端学习之HTML一、HTML(HTML5标准)
  •     HTML 元素以开始标签（起始标签）起始，HTML 元素以结束标签（闭合标签）终止。
  •     元素的内容是开始标签与结束标签之间的内容
  •     某些 HTML 元素具有空内容（empty content）
  •     空元素在开始标签中进行关闭（以开始标签的结束而结束）
  •     大多数 HTML 元素可拥有属性

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

  • <!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>
  •  这个 <p> 元素定义了 HTML 文档中的一个段落。 这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
  •  <body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。元素内容是另一个 HTML 元素（p 元素）。
  • html> 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.元素内容是另一个 HTML 元素（body 元素）。
  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。
  • 使用小写标签。（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

6.HTML属性：

    属性是 HTML 元素提供的附加信息。

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value"。

示例：HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

        <a href="http://www.runoob.com" target="_blank" rel="external nofollow" >这是一个链接</a>

        属性值应该始终被包括在引号内。双引号是最常用的，在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号，例如：name='John "ShotGun" Nelson' 。

7.HTML标题：

        标题（Heading）是通过 <h1> - <h6> 标签进行定义的.   <h1> 定义最大的标题。 <h6> 定义最小的标题。

        <hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

        HTM注释:   <!--这是一个注释，注释在浏览器中不会显示--> .

8.HTML 段落:

        HTML 可以将文档分割为若干段落。段落是通过 <p> 标签定义的。示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

</body>
</html>

     如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这个<br>段落<br>演示了分行的效果</p>

</body>
</html>

运行结果：

  • WEB前端学习之HTML一、HTML(HTML5标准)

9.HTML 链接：

        HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。如：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 

</head>
<body>

<p>
<a href="/index.html" target="_blank" rel="external nofollow" >本文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href="http://www.microsoft.com/" target="_blank" rel="external nofollow" >本文本</a> 是一个指向万维网上的页面的链接。</p>

</body>
</html>

HTML 链接语法：

    <a href="url" target="_blank" rel="external nofollow" >链接文本</a>     href 属性描述了链接的目标。

    示例:<a href="http://www.runoob.com/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >访问菜鸟教程</a>

    使用 target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：

    <a href="http://www.runoob.com/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank">访问菜鸟教程!</a>

    id属性可用于创建在一个HTML文档书签标记。( 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。)  实例：

  • 在HTML文档中插入ID:      <a id="tips">有用的提示部分</a>
  • 在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：<a href="#tips" target="_blank" rel="external nofollow" >访问有用的提示部分</a>
  • 或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：<a href="http://www.runoob.com/html/html-links.html#tips" target="_blank" rel="external nofollow" >访问有用的提示部分</a>

10.HTML 头部：

  1.     HTML <head> 元素：定义了文档的信息

    <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

  2. HTML <title> 元素：定义了文档的标题

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

            <title> 在 HTML/XHTML 文档中是必须的。

            <title> 元素：   定义了浏览器工具栏的标题；当网页添加到收藏夹时，显示在收藏夹中的标题；显示在搜索引擎结果页面的标题。 实例：

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>
  3. HTML <base> 元素：定义了页面链接标签的默认链接地址。<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接，示例: 
    <head>
<base href="http://www.runoob.com/images/" target="_blank" rel="external nofollow"  target="_blank">
</head>

  4. HTML <link> 元素：定义了一个文档和外部资源之间的关系。

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

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

    <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" target="_blank" rel="external nofollow" >
</head>

  5. HTML <style> 元素：定义了HTML文档的样式文件。<style> 标签定义了HTML文档的样式文件引用地址.

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

    <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

  6. HTML <meta> 元素：定义了HTML文档中的元数据。

    提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

    1.页面编码（告诉浏览器是什么编码）

    < meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

    2.刷新和跳转

    < meta http-equiv=“Refresh” Content=“30″>

    < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

    3.关键词

    < meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

    4.描述

    例如：cnblogs

    5.X-UA-Compatible：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   #选择支持的浏览器版本

  7. HTML <script> 元素：定义了客户端的脚本文件。<script>标签用于加载脚本文件，如： JavaScript。:

    1.引进文件

    < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

    2.写js代码

    < script type="text/javascript" > ... </script >

11.HTML body标签：

标签一般分为两种：块级标签 和 行内标签 

  •     a、span、select 等
  •     div、h1、p 等

常用标签:

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

a标签（超链接标签）:

    1、跳转< a href="http://www.autohome.com.cn" target="_blank" rel="external nofollow" > </a>

      target属性，_black表示在新的页面打开

    2、锚   href='#某个标签的ID'    标签的ID不允许重复

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

特殊字符：

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

<div>和<span>：

<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现. 

<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别

所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而生的。

图像标签（img）：

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

列表标签：

<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表

         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题

         <dd> 列表项

表格标签（table）：

表格概念

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

表格的基本结构：

<table>
         <tr>
                <th>标题</th>
                <th>标题</th>
         </tr>
         
         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>

属性：

<tr>: 表行

<th>: 表头
<td>:表数据


属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）

---------------------------------------------------------------------------------------------------------

小结： 所有标签分为：

                块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）

                行内标签： span（白板）

            标签之间可以嵌套

            标签存在的意义，css操作，js操作

            ps:chorme审查元素的使用

                - 定位

                - 查看样式

        - h系列

        - div

        - span

        - input系列 + form标签

            input type='text'     - name属性，value="赵凡" 

            input type='password' - name属性，value="赵凡" 

            input type='submit'   - value='提交' 提交按钮，表单

            input type='button'   - value='登录' 按钮

            input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）

            input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）

            input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"

            input type='rest'     - 重置

            <textarea >默认值</textarea>  - name属性

            select标签            - name,内部option value, 提交到后台，size，multiple

        - a标签

            - 跳转

            - 锚     href='#某个标签的ID'    标签的ID不允许重复

        - img 

             src

             alt

             title

        - 列表

            ul

                li

            ol

                li

            dl

                dt

                dd

        - 表格

            table

                thead

                    tr

                        th

                tbody

                    tr

                        td

            colspan = ''

            rowspan = ''

        - label

            用于点击文件，使得关联的标签获取光标

            <label for="username">用户名：</label>

            <input id="username" type="text" name="user" />

        - fieldset

            legend

转载于:https://my.oschina.net/sign/blog/1796794

前端 javascript xhtml
上一篇: 什么是web前端
下一篇: Web前端常见问题

继续阅读