40-1 html

http://www.w3school.com.cn/

一、HTML（Hyper Text Markup Language，超文本标记语言）

  • 超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素；
  • 标记语言: 标记（标签）构成的语言。

 网页就是用HTML写的文档，该文档由浏览器解析后显示给用户。网页分为：

  • 静态网页：静态的资源，如xxx.html
  • 动态网页：html代码是由某种开发语言根据用户请求动态生成的

 二、标签

1. 什么是标签

（在js中称之为element，即元素）

  • 是由一对尖括号包裹的单词构成，例如: <html> 所有标签中的单词不能以数字开头
  • 标签不区分大小写，即<html> 和 <HTML>相同，但推荐使用小写。
  • 标签分为两部分：开始标签（start tag、opening tag）<a> 和 结束标签（end tag、closing tag）</a>。两个标签之间的部分我们叫做标签体。
  • 有些标签仅用一个标签，这种标签叫做自闭合标签，可加/（其他成对出现的可以成为闭合标签）。例如: <br/> <hr/> <input /> <img />
  • 标签可以嵌套，但不能交叉嵌套。如不能这样写： <a><b></a></b>

2. 标签的属性

<h1 style='color:yellow'>Hello,World</h1>
  • 通常是以键值对形式出现的。例如 style='color:yellow'
  • 属性只能出现在开始标签 或 自闭合标签中.
  • 属性名字全部小写。属性值必须使用双引号或单引号包裹 例如 name="alex"
  • 如果属性值和属性名完全一样，直接写属性名即可。 例如 readonly

 HTML 文档，带有最基本的必需的元素：

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>

　　3.<!DOCTYPE html> 标签

添加了<!DOCTYPE html>，那么浏览器就得老老实实的按照W3C的标准解析渲染页面。

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为CompatibilityMode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standarsmode)。
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用新的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

 

head标签

 <head> 标签用于定义文档的头部，它是所有头部元素的容器。绝大多数文档头部包含的数据都不会真正作为内容显示给用户。

头部常用的标签：

 1、<meta> 

（1）name属性

<meta name ="xxx" content="xxx">

 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩培训机构是由一个老的男孩创建的">

（2）http-equiv属性

<meta http-equiv="xxx" content="xxx">

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content,content中的内容其实就是各个参数的变量值。　

<meta http-equiv="Refresh" content="2">                             # 2s后自动刷新页面
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">   #(注意引号位于秒数的前面和网址的后面) 2s后自动跳转

<meta http-equiv="content-Type" content="text/html;charset=UTF8">   # 可简写为<meta charset="UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中
一个风险就是旧版本网站无法正确的显示。

为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirks mode"为预设，这会
使页面以旧版本浏览器的视点显示，"Standards mode"(也称为"strict mode")特点是支持业界标准最为完善。
然而要利用这个增强的支持功能，网页必须包含恰当的<!DOCTYPE>指令。

若一个网页没有包含<!DOCTYPE>指令，IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏
览器无法辨识，IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令，兼容性模式的
切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。

随著时间经过，更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6
不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对IE做特定的对应。

当 IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的
特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式，受到影
响的网站拥有者被迫更新他们的网站使其能支持IE7。

IE8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮
助减轻所有问题，IE8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加
了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新
你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器
编译你的页面。

这能让你选择将你的网站更新支持IE8新特点的时机。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 <!DOCTYPE> 指令来确
定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式
（Quirks 模式）显示该网页。
X-UA-Compatible

2、<title>

<title>oldboy</title>                                              # 选项卡上的名称

 3、<link>

<link rel="icon" href="http://www.jd.com/favicon.ico">             # 选项卡上的小图标
<link rel="stylesheet" href="css.css">

 4、<script>

<script src="hello.js"></script>
body标签

一、基本标签

一些常见的简单标签：

<hn>             n的取值范围是1~6; 从大到小. 用来表示标题
<p>              段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白
<b> <strong>     加粗标签
<em>             文字变成斜体.   
<strike>         为文字加上一条中线。与用<del>内容</del>,功能相同
<hr>             水平线
<br>             换行    
<sup>和<sub>     上角标和下角表
<div><span>

一些常见特殊符号：

  • &nbsp;     空格
  • &lt;           左尖角符号<
  • &gt;          右尖角符号>
  • &quot;      引号"
  • &copy;      C标
  • &reg;        R标

1、标签的类型

（1）块级标签（block 元素）

包括：<p><h1><table><ol><ul><form><div>等，特点如下：

    •  总是在新行上开始；
    •  宽度缺省是它的容器的100%，除非设定一个宽度。
    •  它可以容纳内联元素和其他块元素

（2）内联标签（inline 元素）

包括：<a><input><img><sub><sup><textarea><span>等，特点如下：

    • 和其他元素都在一行上；
    • 宽度就是它的文字或图片的宽度，不可改变
    • 内联元素只能容纳文本或者其他内联元素

2、标签嵌套规则

    • 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
    • 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
    • li内可以包含div
    • 块级元素与块级元素并列、内联元素与内联元素并列。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div4>.c2{
            background-color: green;
        }
    </style>
</head>
<body>
 <div id="div4">hello div4
     <div class="c2">hello div5</div>
     <p class="c3">hello p4
         <div class="c2">hello 6</div>
     </p>
 </div>
</body>
</html>



<!--实际执行时，会被浏览器变成如下代码：-->

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div4>.c2{
            background-color: green;
        }
    </style>
</head>
<body>
<div id="div4">hello div4
    <div class="c2">hello div5</div>
    <p class="c3">hello p4</p>
    <div class="c2">hello 6</div>     <!--div被从p中拿了出来-->
    <p></p>
</div>
</body></html>
View Code

 

二、常用的重点标签详解

1、图形标签: <img>

<img src="1.jpg" width="200px" height="200px" alt="hehe" title="大美女">

src:          是source单词的缩写，表示源文件路径。加载图片的过程是由浏览器单开一线程进行的，所以不影响图片外其他内容的显示。
alt:           图片没有加载成功时的提示.
title:         鼠标悬浮时的提示信息.
width:       图片（即内容）的宽，而不是<img>标签的宽度，因为它是内联标签，宽度只会根据内容变，没法直接设定
height:     图片的高 (宽高两个属性只用一个会自动等比缩放.)

2、超链接标签(锚标签)<a>

（1）超链接

herf是Hypertext Reference的缩写。

<a href="http://www.baidu.com">baidu</a>
<a href="http://www.baidu.com" target="_blank">baidu</a>    <!--在新窗口中打开百度-->
<a href="#">baidu</a>     <!-- 井号表示空，即点击后哪里也不跳去。先在代码中占个位置，方便以后加链接-->

（2）锚

用于文档内的跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div_top">top</div>
<a href="#div1">第一章</a>
<a href="#div2">第二章</a>
<a href="#div3">第三章</a>

<div id="div1">第一章</div><a href="#div_top">返回</a>
<div id="div2">第二章</div><a href="#div_top">返回</a>
<div id="div3">第三章</div><a href="#div_top">返回</a>

</body>
</html>
View Code

补充：

href=”javascript:void(0);”含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数。
<a href="#" onclick="javascript:方法;return false;">文字</a>

　而 <a href="#">点击</a> 点击后会回到网面顶部

 

3、列表标签<ul> <ol> <dl>

（1）<ul>

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

 

（2）<ol>

<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>

 

（3）<dl>

<dl>
    <dt>第一章</dt>
    <dd>111</dd>
    <dd>111</dd>
    <dd>111</dd>
    <dd>111</dd>
    <dt>第二章</dt>
    <dd>111</dd>
    <dd>111</dd>
    <dd>111</dd>
    <dd>111</dd>
</dl>

4、表格标签 <table>

<table border="3" cellpadding="20px" cellspacing="0px">

    <tbody>
          <tr>
              <td>内容1</td>
              <td>内容2</td>
              <td>内容3</td>
          </tr>
          <tr>
              <td>内容4</td>
              <td>内容5</td>
              <td>内容6</td>
          </tr>
    </tbody>
    <thead>                     <!--在代码中无论放在前面还是后面，显示时都是会显示的表的头部-->
          <tr>
              <th>标题1</th>
              <th>标题2</th>
              <th>标题3</th>
          </tr>
    </thead>

</table>
View Code

1. table中的常用标签：

  • thead:          定义表头（第一行）
  • tbody：        定义表格主体
  • tfoot：         定义表格页脚（最后一行）
  • th：             用于表头中的单元格,使其中的内容居中加粗
  • tr：              用于行
  • td：             用于行中的单元格
  • caption：     指定表格的标题

2. talbe的常用属性：

  • border:             表格边框.
  • cellpadding:      内边距
  • cellspacing:      外边距.
  • width:               像素 百分比.（最好通过css来设置长宽）

3. 合并单元格

<table border="1">
           <tr>
               <th id="th1">标题1</th>
               <th>标题2</th>
               <th>标题3</th>
           </tr>
           <tr>
               <td colspan="2">内容1</td>    <!--横向合并单元格，横跨两列-->
               <td>内容3</td>
           </tr>
           <tr>
               <td>内容1</td>
               <td>内容2</td>
               <td>内容3</td>

           </tr>
           <tr>
               <td>内容1</td>
               <td rowspan="2">内容2</td>    <!--纵向合并单元格，纵跨两行-->
               <td>内容3</td>
           </tr>
           <tr>
               <td>内容1</td>
               <td>内容3</td>
           </tr>
</table>
View Code

5、表单<form>

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

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、select、fieldset和 label 元素。

1. 表单属性

  • action：表单提交到哪。 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web 
  • method：GET、POST是常见的两种请求方式， 默认取值 就是 GET。
  • novalidate：novalidate="novalidate"规定当提交表单时，浏览器不自动对其进行验证。

2. 表单元素

 （1）<input>标签

a. type属性

type="text"           文本输入框
     "password"       密码输入框
     "radio"          单选框
     "checkbox"       多选框
     "submit"         提交按钮
     "button"         按钮(需要配合js使用.如点击，触发某种指定的操作)
     "image"          定义图像形式的提交按钮.用src属性指定按钮图片
     "file"           提交文件:请求方式必须为post，且form表单需要加上属性enctype="multipart/form-data"

<input type="radio" name="hobby" value="1">            # 单选1
<input type="radio" name="hobby" value="2">            # 单选2
<input type="radio" name="hobby" value="3" checked>    # 单选3,checked表示被预先选中
<input type="radio" name="hobby" value="4">            # 单选4
/**注意：name值一定要相同才能够单选，要默认选项，加一个属性checked就行了**/

b. name属性

name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

name="xxx"    表单提交项的键.

 c. value属性

value对于不同的输入类型，value属性的用法也不同：

type = "button", "reset", "submit"    - 定义按钮上的显示的文本
type = "text", "password", "hidden"   - 定义输入字段的初始值
type = "checkbox", "radio", "image"   - 定义与输入相关联的值

d. placeholder 属性

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

e.disabled 属性

输入框变成灰色，值不可修改。

（2）<select>标签

<select name="opt1">
    <option value="a1">选项1</option>
    <option value="a2">选项2</option>
    <option value="a3">选项3</option>
</select>

select的属性：

    • name是提交给后端的键名，option的value值是提交给后端的键值
    • multiple 规定可多选
    • size 对象显示的选项数
<select name="opt2" multiple size="8">
    <optgroup label="组别1">
        <option value="a1">选项1</option>
        <option value="a2">选项2</option>
        <option value="a3">选项3</option>
    </optgroup>
    <optgroup label="组别2">
        <option value="b1">选项1</option>
        <option value="b2">选项2</option>
        <option value="b3">选项3</option>
    </optgroup>
</select>

    • option的selected="selected" 属性，表示此项被选中。
<select>
  <option>Volvo</option>
  <option selected="selected">Saab</option>     <!--页面加载时，预先选定该选项。被预选的选项显示在下拉列表的最前面的位置-->
  <option>Mercedes</option>
  <option>Audi</option>
</select>　

（3）<textarea> 文本域标签

 <textarea rows="10" cols="10">自我简介</textarea>

（4）<label> 

 通过for将这个标签和input标签绑定在一次，点击这个label中的文本就可以将光标定位到input的输入框上

<label for="www">姓名</label>
<input id="www" type="text">

（5）<fieldset>

<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>

 

3、form表单提交方式

（1）通过 type=‘submit’ 提交

<form action="/url.do" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>

（2）js提交form表单

js事件触发表单提交，通过button、链接等触发事件，js调用submit()方法提交表单数据，jquery通过submit()方法

<form id="form" action="/url.do" method="post">
   <input type="text" name="name"/>
</form>

<script>
//js提交方式: 
document.getElementById("form").submit();
//jquery提交方式:
$("#form").submit();
</script>

　　

 

参考：http://www.cnblogs.com/yuanchenqi/articles/5976755.html

　

　　

posted @ 2017-08-05 17:57  seaidler  阅读(237)  评论(0)    收藏  举报