zoukankan      html  css  js  c++  java
  • HTML--基本标签

    一.html文档格式及标签格式

    HTML的全称是超文本标记语言(HyperText Markup Language),通过标记符描述页面显示的文本,图片,声音和影视动画

    1.html文档格式

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    
    <body>
    </body>
    
    </html>
    1. <!DOCTYPE html>声明为HTML5文档。

    2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。

      <html lang="en">指定网页的语言

    3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。

    4. <body>、</body>之间的文本是可见的网页主体内容。

    注意:对于中文网页需要使用 <meta charset="utf-8">声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">

    二.head中的标签

    head标签都放在头部分之间。这里面包含了:

    ​ <title><meta><link><style>

    • <title>:指定整个网页的标题,在浏览器最上方显示。

    • <meta>:提供有关页面的基本信息

    • <link>:定义文档与外部资源的关系。

    • <style>:定义内部样式表与网页的关系

    头标签位于文档的头部,不包含任何内容。

    提供的信息是用户不可见的。 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    1.title标签

    主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。

     <title>网页标题</title>

    2.Meta标签

      元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。

    标签位于文档的头部,不包含任何内容。

      提供的信息是用户不可见的。

    meta标签的组成:

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

    常用的meta标签:

    1)http-equiv属性

      它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

    <!--重定向 2秒后跳转到对应的网址,注意分号-->
    <meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
    <!--指定文档的内容类型和编码类型 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!--告诉IE浏览器以最高级模式渲染当前网页-->
    <meta http-equiv="x-ua-compatible" content="IE=edge"> 

    ps:关于mime文件类型(前端静态资源文件):

    连接:http://www.w3school.com.cn/media/media_mimeref.asp

    2)name属性

    <meta name="keywords" content="内容关键字1,关键字2,..." />
    <meta name="author" content="网页作者姓名" />
    <meta name="description" content="页面描述文字" />
    <meta name="others" content="其他搜索内容" />

    应用:

      主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

    这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到。

    <meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />

    只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做*SEO*(search engine optimization,搜索引擎优化)。

    <meta name="viewport" content="width=device-width, initial-scale=1">

    上面这个标签,是让我们网页支持移动端,移动设备优先(了解即可)

    3.link标签

    link标签定义了文档与外部资源之间的关系,通常用于链接到样式表:

    <link type="目标文件类型" rel/rev="stylesheet" href="相对路径/目标文档或资源URL" [media="适用介质列表" charset="目标文件编码"] />

    href:该属性指定引用外部文件的URL

    type:该属性规定目标文件类型,常用的数值有 text/css , text/javascript , image/gif.

    rel/rev: 表示当前源文档与目标文档之间的关系和方向. rel属性指定从源文档到目标文档(前向链接)的关系,而rev属性则指定从目标文档到源文档(逆向链接)的关系.这两种属性可以在<link>或<a>标记中同时使用.属性的取值如下

    • alternate:可选版本
    • stylesheet:外部样式表
    • start:第一个文档
    • next:下一个文档
    • prev:前一个文档
    • contents:文档目录
    • index:文档索引
    • copyright:版权信息文档
    • chapter:文档的章
    • section:文档的节
    • subsection:文档子段
    • appendix:文档附录
    • help:帮助文档
    • bookmark:相关文档
    • glossary:文档字词的术语表或解释
    • external: 外部文档

    例如,

    <link rel="stylesheet" type="text/css" href="c1-2.css" />

    4.style标签

    style标签在 HTML 文档中添加样式: 

    <head>
        <style type="text/css">
            body { padding: 0px;">yellow}
            p {color:blue}
        </style>
    </head>

    三.body中的标签

    
    
    b  标签: 加粗
    i : 斜体
    u: 下划线
    s: 删除线
    p: 段落
    h1~h6: 标题标签
    br: 换行
    hr:横线
    div: 块级标签
    span: 行内标签
    img:图片
    a:超链接
    ul:无序列表
    ol:有序列表
    li:列表内容
    table:表格
        thead:表格头部
        tbody:表格身体
        tfoot:表格底部
            tr  :行
                td:单元格
    form 表单
    
    <h1></h1>   标题:标题使用<h1><h6>标签进行定义。<h1>定义最大的标题,<h6>定义最小的标题。
    
    <p></p> 段落 : align='属性'   属性有left ,center,right
    
    <select>多选 里面的每一项用<option>来表示
    
    <label>通过for属性,将lable和input标签绑定,为 input 元素定义标注(标记)
    
    <b></b><strong></strong>  粗体标签
    
    <i></i><em>   斜体字标签
    
    <div></div> 盒子标签 align='属性' 设置块儿的位置,可以换行
    
    <span></span> 行内标签 里面只能放文字,图片,表单
    
    <a  href='网页链接'></a>
    
    <div id='top1'></div>    <a href='#top1'></a> 锚链接
    
    <img href='路径' /> 图片标签
    
    <ol> <ol> 有序列表 
    <li></li> 列表项  <li> 必须在列表内使用
    
    <ul></ul> 无序列表
    
    <table>表格标签  border:边框(px) 宽 height:高 
    <thead>表头
    <tr> 每一行
    <td> 单元格
    </td>
    </tr>
    </thead> 
    </table>
    
    cellpadding:单元格到边的距离. cellspacing:单元格和单元格之间的距离(外边距)
    <th> 加粗的单元格 相当于<td> + <b>
    
    
    <form method='提交方式' action='数据发送的url'></form>表单
    
    <input type='属性'>输入标签
    [
    text:默认
    password:密码框
    radio:单选按钮:name相同的作为一组,组内互斥,只能选其中一个
    checkbox 多选按钮,name相同的为一组,可多选
    button 普通按钮
    submit 提交按钮,点击会将表单数据按照method请求方式 提交在action的url中
    reset 重置当前表单内的所有内容
    image 图片按钮,
    file 上传文件到服务器,要上传文件,form表单的method必须是post,并且在form标签中设置属性enctype="multipart/form-data"
    value=”内容“:文本框里的默认内容(已经被填好的)
    size=“50”:表示文本框可以显示50个字符。
    readonly 输入框只读
    disabled 不可用
    checked 选择框默认选中
    ]
    
    <textarea> 文本标签
    [
    value:提交给服务器的值。
    rows="4":指定文本区域的行数。
    cols="20":指定文本区域的列数。
    readonly:只读
    ]
    常用标签
    
    
  • 相关阅读:
    BOI 2002 双调路径
    BOI'98 DAY 2 TASK 1 CONFERENCE CALL Dijkstra/Dijkstra+priority_queue/SPFA
    USACO 2013 November Contest, Silver Problem 2. Crowded Cows 单调队列
    BOI 2003 Problem. Spaceship
    USACO 2006 November Contest Problem. Road Blocks SPFA
    CEOI 2004 Trial session Problem. Journey DFS
    USACO 2015 January Contest, Silver Problem 2. Cow Routing Dijkstra
    LG P1233 木棍加工 动态规划,Dilworth
    LG P1020 导弹拦截 Dilworth
    USACO 2007 February Contest, Silver Problem 3. Silver Cow Party SPFA
  • 原文地址:https://www.cnblogs.com/robertx/p/10311445.html
Copyright © 2011-2022 走看看