• html标签简介（常用）

    什么是HTML

    • htyper text markup language  即超文本标记语言
    • 超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
    • 标记语言: 标记（标签）构成的语言.
    • 网页==HTML文档，由浏览器解析，用来展示的
    • 静态网页：静态的资源，如xxx.html
    • 动态网页：html代码是由某种开发语言根据用户请求动态生成的

    什么是标签

    • 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
    • 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
    • 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
    • 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
    • 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

    标签属性

    • 通常是以键值对形式出现的. 例如 name="aaron"
    • 属性只能出现在 开始标签 或 自闭和标签中.
    • 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="aaron"
    • 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

    标签分类

    　　标签一般分为两种：

    　　1. 块级标签

    　　　　霸占一整行的标签。比如：<h>,<p>,<div>,<form>等

    　　2. 行内标签

    　　　　可以多个标签共同占用一行的标签。比如：<span>,<a>,<input>,<img>,<label>等

    　　3. 块级标签特点

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

    　　4. 行内标签特点

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

    特殊字符

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

    html文件结构

    标签使用范围说明

    　　由上图可以看出，html文件主要由<head>标签和<body>标签组成。在这两个标签的标签体中能够嵌套如下标签：

    • <head>标签：<!DOCTYPE html>  <meta>  <title>  <link>  <style>  <script>  
    • 其余标签都在<body>标签中嵌套

    <!DOCTYPE html>标签

          由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；

          由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standarsmode)，这就是二者最简单的区别。

          W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

    1
    2
    3
    window.top.document.compatMode：
    //BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
    //CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

          这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

          如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

          这就是<!DOCTYPE html>的作用。

    <meta>标签

    　　有两个属性：http-equiv属性 和  name属性，不同属性有不同的参数，这些不同的参数使得名，meta标签有不同的功能。

    http-equiv属性

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

    • 页面编码
    1
    <meta http-equiv="content-Type" charset=UTF8">
    • 页面刷新和跳转
    1
    2
    <meta http-equiv="Refresh"Content="30"> 每隔30秒刷新一次网页
    <meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 过5秒跳转到某网页。（关于跳转，可以在应急的时候用，一般可以用js实现）
    • 解决IE浏览器兼容性问题
    1
    <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

    name属性

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

    • 供搜索引擎使用（关键词）
    1
    <meta name="keywords" content="星际2，飞船，UFO，皮卡">  关键字
    •  网站信息描述
    1
    <meta name="description" content="为您提供最新的信息">  网站描述

    <title>标签

    　　title标签写网站头部信息，即网页标签的名称

    <link>标签

    　　link标签有两个作用：

    1.设置标签页图标：

    1
    <link rel="shortcut icon" href="image/favicon.ico">  # rel指的是类型，href是文件路径，(image是存放图片的文件夹)

    2.外联CSS文件：

    1
    <link rel="stylesheet" type="text/css" href="css/common.css">    # rel指的是类型，href是存放css文件的文件夹

     <style>标签

    　　在html文件中编写css样式

    <script>标签

    1.引进文件

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

    2.写js代码

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

    基本标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <hn>：n的取值范围是1~6; 从大到小. 用来表示标题.
    <p>：段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
    <b> <strong>：加粗标签.
    <strike>：为文字加上一条中线.
    <em>：文字变成斜体.
    <sup>和<sub>：上角标 和 下角表.
    <br>：换行.
    <hr>：水平线
    <div>：白板，本身没有特性，块级标签。
    <span>：白板，本身没有特性，行内标签。

     <sup>和<sub>的使用

    1
    2
    <p>这个文本包含 <sub>下标</sub>文本。</p>
    <p>这个文本包含 <sup>上标</sup> 文本。</p>

     　显示结果：

    　　这个文本包含 下标文本。

    　　这个文本包含 上标 文本。

    <input>标签

    type属性

    　　可以有如下取值：

    1
    2
    3
    4
    5
    6
    7
    text 文本输入框
    password 密码输入框
    radio 单选框
    checkbox 多选框 
    submit 提交按钮        
    button 按钮(需要配合js使用.) button和submit的区别？
    file 提交文件：form表单需要加上属性enctype="multipart/form-data"  

    name属性

    • 表单提交项的键。
    • 注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。

    value属性

    　　表单提交项的值。

    checked属性

     　　radio 和 checkbox 默认被选中

    readonly属性

    　　只读，text 和 password 标签中使用

    disabled属性

    　　使得input标签无法编辑，对所用的input标签都有效

     <textarea>标签

    文本域标签，有如下三个属性：

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

     <label>标签

    1
    2
    <label for="xxx">姓名</label>
    <input id="xxx" type="text">

    　　 当label标签通过for属性与其他标签的id属性关联时，点击label标签的标签体时，会自动响应label标签所关联的标签

    <select>标签

    　　选择框，有如下属性：

    1
    2
    3
    name: 表单提交项的键。<br>value：表单提交项的值。
    size：选项个数
    multiple：multiple <br>selectted：默认选择项

     　　如果属性设置multiple="multiple" size="3"，表示选择框只能同时显示三项。<option>内的 value 为后台识别，innerText为文本内容。

    1
    2
    3
    4
    5
    6
    7
    8
    <p>选择你的地址</p>
            <select name="city">
                <option value="1" selected="selected">北京</option> <!-- selected 默认选项 -->
                <option value="2">深圳</option>
                <option value="3">上海</option>
                <option value="4">杭州</option>
                <option value="5">成都</option>
            </select>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <p>请选择籍贯</p>
            <select name="jiguan">
                <optgroup label="河北省">
                    <option value="1">石家庄</option>
                    <option value="2">保定</option>
                    <option value="3">邯郸</option>
                </optgroup>
                <optgroup label="湖南">
                    <option>长沙</option>
                    <option>株洲</option>
                    <option>湘潭</option>
                </optgroup>
                <optgroup label="广东">
                    <option>广州</option>
                    <option>深圳</option>
                    <option>佛山</option>
                    <option>珠海</option>
                    <option>中山</option>
                </optgroup>
            </select>

     <form>标签

    • 表单用于向服务器传输数据。
    • 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
    • 表单还可以包含textarea、select、fieldset和 label 标签。

     action属性

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

    method属性

    　　表单的提交方式 post/get 。 默认取值就是 get。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    get:   1. 提交的键值对.放在地址栏中url后面.
           2. 安全性相对较差.
           3.对提交内容的长度有限制.
     
    post:    1. 提交的键值对 不在地址栏.
             2. 安全性相对较高.
             3. 对提交内容的长度理论上无限制.
     
    get/post是常见的两种请求方式.    

     enctype属性

    当上传文件时，form标签必须添加该属性，而且还必须已post方式发送请求

    1
    enctype="multipart/form-data"

     <a>标签

    　　有两个作用：

    • 作超链接：跳转到指定url
    1
    <a href="http://www.baidu.com"  target="_blank"  title="点一下看看啊">你好</a>
    • 作锚点：条转到指定id
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <a href="#i5">第五章</a>
      
    <div id="i1" style="height:600px;">第一章的内容 <p>绪论</p></div>
    <div id="i2" style="height:600px;">第二章的内容 <p>公元500年</p></div>
    <div id="i3" style="height:600px;">第三章的内容 <p>公园1000年</p></div>
    <div id="i4" style="height:600px;">第四章的内容 <p>公元1900年</p></div>
    <div id="i5" style="height:600px;">第五章的内容 <p>公元2010年</p></div>

     注意：<a>标签默认的显示样式会有下划线，如果看着不爽想要去掉，在a标签样式中设置：text-decoration:none;

    <img>标签

    　　图片显示标签

    属性如下：

    1
    2
    3
    4
    5
    src: 要显示图片的路径.
    alt: 图片没有加载成功时的提示.
    title: 鼠标悬浮时的提示信息.
    图片的宽
    height:图片的高 (宽高两个属性只用一个会自动等比缩放

     注意：也可以把img标签嵌套在a标签中，来实现点击图片跳转的功能。

    列表标签

    1
    2
    3
    4
    5
    6
    <ul>: 无序列表
    <ol>: 有序列表
             <li>:列表中的每一项.
    <dl>  定义列表
             <dt> 列表标题
             <dd> 列表项

     <ul> 标签

    1
    2
    3
    4
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>

    　 浏览器显示如下：

    • Coffee
    • Milk

    <ol>标签

    1
    2
    3
    4
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

    　　浏览器中显示如下：

    　　　　1.Coffee

    　　　　2.Milk

    <dl>标签

    1
    2
    3
    4
    5
    6
    <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
    </dl>

    　　浏览器显示如下：

    　　 Coffee
    　　- black hot drink
    　　 Milk
    　　- white cold drink

    <table>标签

    　　构建表格。

    属性如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    border: 表格边框.
    cellpadding: 内边距
    cellspacing: 外边距
    像素 百分比.（最好通过css来设置长宽）
    <tr>: table row
             <th>: table head cell
             <td>: table data cell
    rowspan:  单元格竖跨多少行
    colspan:  单元格横跨多少列（即合并单元格）
    <th>: table header <tbody>(不常用): 为表格进行分区.

    合并单元格

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <h4>单元格跨两格:</h4>
    <table border="1">
    <tr>
      <th>Name</th>
      <th colspan="2">Telephone</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
    </tr>
    </table>

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <h4>单元格跨两列:</h4>
    <table border="1">
    <tr>
      <th>First Name:</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th rowspan="2">Telephone:</th>
      <td>555 77 854</td>
    </tr>
    <tr>
      <td>555 77 855</td>
    </tr>
    </table>

     
  • 相关阅读:
    Leetcode Substring with Concatenation of All Words
    Leetcode Divide Two Integers
    Leetcode Edit Distance
    Leetcode Longest Palindromic Substring
    Leetcode Longest Substring Without Repeating Characters
    Leetcode 4Sum
    Leetcode 3Sum Closest
    Leetcode 3Sum
    Leetcode Candy
    Leetcode jump Game II
  • 原文地址：https://www.cnblogs.com/aibabel/p/12121317.html
Copyright © 2020-2023  润新知