zoukankan      html  css  js  c++  java
  • HTML 简介

    什么是HTML

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

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

    html结构:

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

    DOCTYPE 

    <!DOCTYPE html>  

    Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

    Meta(metadata information)

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

    • 页面编码(告诉浏览器是什么编码)

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

    • 刷新和跳转
    <meta http-equiv=“Refresh” Content=“30″>
    
    <meta http-equiv="Refresh" Content=5;Url="http://www.autohome.com.cn" />
    • 关键词

    <meta name="keywords" content="博客园,IT技术,老男孩" >

    • 描述
    <meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

    Title

    网页头部信息 

    <title>58同城一个神奇的网站!!!</title>

    Link

    1.css
    
    <link rel="stylesheet" type="text/css" href="css/common.css" >        #放置style样式的文件
    
    2.icon
    
    <link rel="shortcut icon" href="image/favicon.ico">           #放置favicon图片的地方

    Style

    在页面中写样式

    例如

    <head>
    < style type="text/css" >
    .bb{
          background-color: red;
       }
    < /style>

    </head> 

    或者

    <body>

    <div style="background-color:red">123</div>

    <div style="background-color:red">123</div>

    </dody>

    或者:

    common.css #将样式保存在common.css文件中.然后用class引用即可.

    .bb{ 
          background-color: red; 
       } 

    .aa{ 
          background-color: red; 
       } 

    <div class=".bb">123</div>

    style样式可以写在单个css文件中,也可以写在<head> <head/>中或在common.css文件中单独配置!

    Script

    1. 引进文件

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

    1. 写js代码

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

    上述这些一般都是在head中设置。

    HTML 标签

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

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

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

    HTML 链接

    HTML 链接是通过标签 <a> 来定义的.

    <a href="http://www.autohome.com.cn">点击跳转</a>
    <a target="_blank" href="http://www.9888.cn">点击跳转</a>
    
    target属性,_black表示在新的页面打开
    
    锚:点击标签菜单后页面显示对应的内容
    <body>
    <!--锚:点击标签菜单后页面显示对应的内容-->
    <a href="#a2">书签</a>          <!--表示跳转的位置为a2,#位特殊字符-->
    <div id="a1" style="height: 700px;">     <!--id为标签唯一的值-->
        1内容
    </div>
    
    <div id="a2" style="height: 500px;">
        2内容
    </div>
    
    </body>

    HTML 段落

    HTML 段落是通过标签 <p> 来定义的.

    p表示段落,默认段落之间是有间隔的!

    br 是换行

    <!DOCTYPE html>
    <html>
    <body>
    
    <p>这是一个段落。</p>
    <p>这是一个段落。</p>
    <p>这是一<br>个段落。</p>
    </body> </html>

    HTML 标题

    HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
    
    </body>
    </html>
    

    HTML 图像

    HTML 图像是通过标签 <img> 来定义的.

    <html>
    <body>
    
    <img src="/images/w3cschool.png" width="300" height="120" />
    
    </body>
    </html>
    

    HTML <select> 标签

    定义和用法

    select 元素可创建单选或多选菜单。

    <select&> 元素中的 <option> 标签用于定义列表中的可用选项。

    提示和注释:

    提示:select 元素是一种表单控件,可用于在表单中接受用户输入。

    属性

    属性描述
    autofocus autofocus 规定在页面加载后文本区域自动获得焦点。
    disabled disabled 规定禁用该下拉列表。
    form form_id 规定文本区域所属的一个或多个表单。
    multiple multiple 规定可选择多个选项。
    name name 规定下拉列表的名称。
    required required 规定文本区域是必填的。
    size number 规定下拉列表中可见选项的数目。

    亲自试一试 - 更多实例

    标准实例

    <select>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">天津</option>
      <option value="4" selected="selected">西安</option>   <!--selected="selected"表示默认西安是被选中的-->
        <!--value定义什么值提交到后台获取的就是什么值,需要结合form表单一块使用-->
    </select>
    

    在浏览器中显示的个数实例:

    <select size="2">       <!--size是在浏览器中显示的个数 -->
      <option>北京</option>
      <option>上海</option>
      <option>天津</option>
      <option>西安</option>
    
    </select>

     在浏览器中可以多选:

    <select size="2" multiple="multiple">    <!--multiple="multiple"表示可以多选 -->
      <option>北京</option>
      <option>上海</option>
      <option>天津</option>
      <option>西安</option>
    
    </select>
    

    在浏览器中显示成省-市的类型:

    <select>
    						<optgroup label="陕西省">
    							<option>西安</option>
    							<option>咸阳</option>
    						</optgroup>
    						<optgroup label="山西省">
    							<option>太原</option>
    							<option>平遥</option>
    						</optgroup>
    					</select>
    

    select <option> 标签

    定义和用法

    option 元素定义下拉列表中的一个选项(一个条目)。

    浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。

    option 元素位于 select 元素内部。

    提示和注释:

    注释:<option> 标签可以在不带有任何属性的情况下使用,但是您通常需要使用 value 属性,此属性会指示出被送往服务器的内容。

    注释:请与 select 元素配合使用此标签,否则这个标签是没有意义的。

    提示:如果列表选项很多,可以使用 <optgroup> 标签对相关选项进行组合。

    可选的属性

    属性描述
    disabled disabled 规定此选项应在首次加载时被禁用。
    label text 定义当使用 <optgroup> 时所使用的标注。
    selected selected 规定选项(在首次显示在列表中时)表现为选中状态。
    value text 定义送往服务器的选项值。

    HTML <input> 系列标签

    通过对input标签设置不同的属性,显示不同的效果,input属于自闭合标签

    实例

    一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:

    <html>
    
    <body>
    
    <form>
    用户:
    <input type="text">
    <br />
    密码:
    <input type="password">
    <br />
    <input type="submit"/>
    </form>
    
    </body>
    </html>
    

    定义和用法

    <input> 标签用于搜集用户信息。

    根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

    属性

    属性描述
    accept mime_type 规定通过文件上传来提交的文件的类型。
    align
    • left
    • right
    • top
    • middle
    • bottom
    不赞成使用。规定图像输入的对齐方式。
    alt text 定义图像输入的替代文本。
    autocomplete
    • on
    • off
    规定是否使用输入字段的自动完成功能。
    autofocus autofocus

    规定输入字段在页面加载时是否获得焦点。

    (不适用于 type="hidden")

    checked checked 规定此 input 元素首次加载时应当被选中。
    disabled disabled 当 input 元素加载时禁用此元素。
    form formname 规定输入字段所属的一个或多个表单。
    formaction URL

    覆盖表单的 action 属性。

    (适用于 type="submit" 和 type="image")

    formenctype 见注释

    覆盖表单的 enctype 属性。

    (适用于 type="submit" 和 type="image")

    formmethod
    • get
    • post

    覆盖表单的 method 属性。

    (适用于 type="submit" 和 type="image")

    formnovalidate formnovalidate

    覆盖表单的 novalidate 属性。

    如果使用该属性,则提交表单时不进行验证。

    formtarget
    • _blank
    • _self
    • _parent
    • _top
    • framename

    覆盖表单的 target 属性。

    (适用于 type="submit" 和 type="image")

    height
    • pixels
    • %
    定义 input 字段的高度。(适用于 type="image")
    list datalist-id 引用包含输入字段的预定义选项的 datalist 。
    max
    • number
    • date

    规定输入字段的最大值。

    请与 "min" 属性配合使用,来创建合法值的范围。

    maxlength number 规定输入字段中的字符的最大长度。
    min
    • number
    • date

    规定输入字段的最小值。

    请与 "max" 属性配合使用,来创建合法值的范围。

    multiple multiple 如果使用该属性,则允许一个以上的值。
    name field_name 定义 input 元素的名称。
    pattern regexp_pattern

    规定输入字段的值的模式或格式。

    例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。

    placeholder text 规定帮助用户填写输入字段的提示。
    readonly readonly 规定输入字段为只读。
    required required 指示输入字段的值是必需的。
    size number_of_char 定义输入字段的宽度。
    src URL 定义以提交按钮形式显示的图像的 URL。
    step number 规定输入字的的合法数字间隔。
    type
    • button
    • checkbox
    • file
    • hidden
    • image
    • password
    • radio
    • reset
    • submit
    • text
    规定 input 元素的类型。
    value value 规定 input 元素的值。
    width
    • pixels
    • %
    定义 input 字段的宽度。(适用于 type="image")

    Checkbox 对象

    Checkbox 对象代表一个 HTML 表单中的 一个复选框.(可以选多个)

    在 HTML 文档中 <input type="checkbox"> 每出现一次,Checkbox 对象就会被创建。

    					<h2>Checkbox</h2>
    					<input type="checkbox">
    					<input checked="" type="checkbox">
    					<input checked="checked" type="checkbox">
    				
    

    Radio 对象

    Radio 对象代表 HTML 表单中的单选按钮。

    在 HTML 表单中 <input type="radio"> 每出现一次,一个 Radio 对象就会被创建。

    单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。

    当单选按钮被选中或不选中时,该按钮就会触发 onclick 事件句柄。

    您可通过遍历表单的 elements[] 数组来访问 Radio 对象,或者通过使用 document.getElementById()。

    <div id="0">
    					<h2>redio</h2>
    					男<input value="man" type="radio">
    					女<input value="male" type="radio">
    					保密<input value="no" type="radio">
    					<br/>
    					男<input name="gender" value="man" type="radio">
    					女<input name="gender" value="male" type="radio">
    					保密<input checked="checked" name="gender" value="no" type="radio">
    				</div>
    
    # name属性设置相同时只能选择一个,他们之间就是互斥的关系!
    

    提交按钮标签:

    Button 对象

    Button 对象代表 HTML 文档中的一个按钮。

    该元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用。

    在 HTML 文档中 <input type="button"> 标签每出现一次,一个 Button 对象 就会被创建。

    您可以通过遍历表单的 elements[] 数组来访问某个按钮,或者通过使用 document.getElementById()。

    <input  type="button" value="提交" >
    

    Submit 对象

    Submit 对象代表 HTML 表单中的一个提交按钮 (submit button)。

    在 HTML 表单中 <input type="submit"> 标签每出现一次,一个 Submit 对象就会被创建。

    在表单提交之前,触发 onclick 事件句柄,并且一个句柄可以通过返回 fasle 来取消表单提交。

    <input  type="submit" value="submit" >
    

    FileUpload 对象

    在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被上传,用来上传和提交文件。

    该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件。

    <input  type="file"  >
    

    HTML <textarea> 标签

    定义和用法

    <textarea> 标签定义多行的文本输入控件。

    文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

    可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

    注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。

    提示:可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式

    <textarea>hello world</textarea>
    

     HTML <form> 标签

    定义和用法

    <form> 标签用于为用户输入创建 HTML 表单。

    表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

    表单还可以包含 menustextareafieldsetlegendlabel 元素

    表单用于向服务器传输数据。

    提示和注释

    注释:form 元素是块级元素,其前后会产生折行。

    属性描述
    accept MIME_type HTML 5 中不支持。
    accept-charset charset_list 规定服务器可处理的表单数据字符集。
    action URL 规定当提交表单时向何处发送表单数据。
    autocomplete
    • on
    • off
    规定是否启用表单的自动完成功能。
    enctype 见说明 规定在发送表单数据之前如何对其进行编码。
    method
    • get
    • post
    规定用于发送 form-data 的 HTTP 方法。
    name form_name 规定表单的名称。
    novalidate novalidate 如果使用该属性,则提交表单时不进行验证。
    target
    • _blank
    • _self
    • _parent
    • _top
    • framename
    规定在何处打开 action URL。
    <form action="http://192.168.21.128:8080/html/form_action.asp" method="POST">
        <p>
            用户名:<input type="text" name="user"/>
        </p>
        <p>
            密码:<input type="password" name="pwd"/>
        </p>
        <p>
            部门:<select name="depart">
                    <option value="1">CEO</option>
                    <option value="2">CTO</option>
                    <option value="3">COO</option>
        </select>
        </p>
        <input type="submit" value="提交"/>
    </form>
    
    <!--请单击确认按钮,输入会发送到服务器上名为 "form_action.asp" 的页面,method有get和post两种发送方式--> 
    <!--form通过设置action指定我要提交到哪,通过submit执行提交的动作,name等于什么(name="user")作为key,输入什么作为value来接收到  --> 

    HTML <label> 标签

    定义和用法

    <label> 标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for 属性应当与相关元素的 id 属性相同。

    属性

    属性描述
    for id 规定 label 绑定到哪个表单元素。
    form formid 规定 label 字段所属的一个或多个表单
    <html>
    <body>
    
    <p>请点击文本标记之一,就可以触发相关控件:</p>
    
    <form>
    <label for="male">男</label>
    <input type="radio"  id="male" />
    <br />
    <label for="female">女</label>
    <input type="radio"  id="female" />
    </form>
    
    </body>
    </html>
    

    html三种列表:ul ol dl

    <h2>ul ol dl</h2>
    <p>ul</p>
    <ul>
        <li>ul.li</li>
        <li>ul.li</li>
        <li>ul.li</li>
    </ul>
    

    效果如下,前面加个点

    ul

         
    • ul.li
    •    
    • ul.li
    •    
    • ul.li
    <ol>
    			<li>ol.li</li>
    			<li>ol.li</li>
    			<li>ol.li</li>
    		</ol>
    
    <!--#前面标记为1,2,3 -->
    
    <dl>
    		<dt>河北省</dt>
    		<dd>邯郸</dd>
    		<dd>石家庄</dd>
    		<dt>山西省</dt>
    		<dd>太原</dd>
    		<dd>平遥</dd>
    	</dl>
    
    <!--会产生自动缩进的样式-->

    HTML <table> 标签

    定义和用法

    <table> 标签定义 HTML 表格。

    简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

    tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

    更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

    <table>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>籍贯</td>
            </tr>
    
            <tr>
                <td>saneri</td>
                <td>男</td>
                <td>陕西</td>
            </tr>
    
            </table>
    
    效果如下:
    
    姓名   性别  籍贯
    
    saneri 男    陕西
    

    显示边框效果:

    <table border="1">
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>籍贯</td>
            </tr>
    
            <tr>
                <td>saneri</td>
                <td>男</td>
                <td>陕西</td>
            </tr>
    
            </table>
    

    colspan左右合并单元格 rowspan上下合并单元格

    <body>
    <table border="1">
            <tr>
                <td colspan="2">1</td>      
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr> 
            </table>
    
    <!--colspan="2"表示1占两个位置,横向占两格-->
    <table border="1">
            <tr>
                <td rowspan="2">1</td>      
                            <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>3</td>
            </tr> 
            </table>
    <!--rowspan="2"表示1占两个位置,纵向占两格-->
    </body>
    

    效果如下:

    HTML <fieldset> 标签

    定义和用法

    fieldset 元素可将表单内的相关元素分组。

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

    当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

    <fieldset> 标签没有必需的或唯一的属性。

    <fieldset>
    			<legend>登录</legend>
    			<p>用户名:</p>
    			<p>密码:</p>
    		</fieldset>
    

    HTML <div> 标签

    定义和用法

    <div> 可定义文档中的分区或节(division/section)。

    <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

    如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

    用法

    <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

    不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

    可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

    <html>
    <body>
    
    <h3>This is a header</h3>
    <p>This is a paragraph.</p>
    
    <div style="color:#00FF00">
      <h3>This is a header</h3>
      <p>This is a paragraph.</p>
    </div>
    
    </body>
    </html>
    

    执行后效果:

    This is a header

    This is a paragraph.

    This is a header

    This is a paragraph.

    style应用的方式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
       <style>
    .logo {
    
        background-color: red;
        font-size: 18px;
        border: 1px;
    }
    .logo a{                    <!--a标签拥有logo属性,并引用自己的属性 -->
    font-size: 56px;
    
        }
     
    .logo a,p{                  <!--a和p标签同时拥有logo属性 -->  
        font-size: 56px;
        background-color:yellow;
        }
    #cc {                                           <!-- 以#号开头的应用是用id=cc这种方法引用 -->
    font-size: 56px;
    background-color:blue;
        }
        </style>
    </head>
     
    <body>
    <div class="logo">              <!--让a标签和p标签同时拥有logo属性 -->
        <div>div标签</div>
        <a>a标签</a>
        <p>p标签</p>
     
        </div>
    <div class="logo">hello world</div>
    <span id="cc">goodbye</span>                    <!--带#的引用用id -->
    </body>
    </html>    

    HTML <span> 标签

    <span>标签和<div>一样是一个容器,默认什么都不是,二者区别在于<div>标签里面有内容后将变成一个块级标签,而<span>标签里面有内容后将变成一个内联标签

    <head>
        <style>
            .logo {
                font-size: 56px;
                background-color:yellow;
            }
            .c {
                font-size: 20px;
                background-color:red;
            }
        </style>
    </head>
    
    <body>
        <span class="logo">hello world</span>             
        <span class="c">goodbye</span>
    
    </body>  

    .

    .

    .

    参阅文档:http://www.w3school.com.cn/html/

    特殊字符文档:http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

  • 相关阅读:
    【转】【人在职场】能力与价值
    【转】小议Bug敏感度---Bug敏感度的故事(一)
    【转】请尊重测试:测试从业五年有感
    【转】性能测试设计和LR原理的探讨
    【转】企业级Java应用最重要的4个性能指标
    暂存
    存储过程参数输入输出
    sqlserver 分页
    学习网址
    daatable动态创建
  • 原文地址:https://www.cnblogs.com/saneri/p/5157739.html
Copyright © 2011-2022 走看看