zoukankan      html  css  js  c++  java
  • html系统化总结

    1.首先什么是HTML?

      HTML是用来描述网页的语言

    • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页

    2.HTML文档 = 网页

    • HTML文档 描述网页
    • HTML文档包含纯文档和标签
    • HTML文档也被称为网页

    3.HTML大致结构:

    <DOCTYPE HTML>

    <html>

      <body>

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

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

      </body>

    </html>

    4.HTML链接引用格式

    <a href="http://www.baidu.com">这是一个链接</a>

    5.HTML图像引用格式

    <img src="a.png" width="" heigh=""/>

    6.HTML标签对大小写不敏感,但通常使用小写

    7.定义属性居中

    <h1 align="center">This is heading 1</h1>

    8.body设置背景颜色

    <body bgcolor="yellow">

    9.水平线

    <hr/>

    10.注释

    <!--注释-->

    11.style改变HTML格式

    12.使文字上浮缩小,下浮缩小

    <sub>sunscript</sub>

    <sup>superscript</sup>

    13.删除字效果,插入字效果

    <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

    14.缩略词abbr

    <p><abbr tittle="World Health Organization">WHO</abbr></p>

    15.取消链接下划线

    <a href="/example/html/lastpage.html" style="text-decoration:none">

    16.链接外部的css文件

    <link rel="stylesheet" type="text/css" href="/html/csstest1.css" >

    17.使用命名锚锁定内容

    <a name="tips">基本的注意事项 - 有用的提示</a>

    <a href="#tips">有用的提示</a>

    18.在新的浏览器窗口打开链接

    <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

    19.将图片作为链接

    <a href="/example/html/lastpage.html">
    <img border="0" src="/i/eg_buttonnext.gif" />
    </a>

    20.定义网页背景图片

    <body background="/i/eg_background.jpg">

    21.表格的水平表头

    <tr>

    <th>Heading</th>

    <th>Another Heading</th>

    </tr>

    22.表格的垂直表头

    <tr>
    <th>姓名</th>
    <td>Bill Gates</td>
    </tr>

    23.设置表格的标题

    <table border="6">
    <caption>我的标题</caption>

    24.表格的背景图像

    <table border="1"
    background="/i/eg_bg_07.gif">

    25.单元格的背景图像

    <td
    background="/i/eg_bg_07.gif">


    下面进入到重点模式

    26.大多数 HTML 元素被定义为块级元素或内联元素

    内联元素在显示时通常不会以新行开始。

    例子:<b>, <td>, <a>, <img>

    块级元素在浏览器显示时,通常会以新行来开始(和结束)。

    例子:<h1>, <p>, <ul>, <table>

    27.div(块级元素)

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

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

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

    28.span(内联元素)

    如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。

    可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

    29.html中类的css引用为 “.”,如:.red{ ....}。id的引用为“#”,如#r1{....}

    30.html中的文件路径:

    31.通过在头部设置base标签,是链接在新的页面中显示

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Language" content="zh-cn" />

    <base target="_blank" />
    </head>

    32.head元素

    <head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

    以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。

    33.Tittle元素

    title 元素在所有 HTML/XHTML 文档中都是必需的。

    title 元素能够:

    • 定义浏览器工具栏中的标题
    • 提供页面被添加到收藏夹时显示的标题
    • 显示在搜索引擎结果中的页面标题

     34.清除div左右浮动效果

    clear:both;

    35.html5中的符号支持

            

    36.可以通过utf-8编码,在html中引进emoji表情

    如<p>$#128512</p>

    37.<!DOCTYPE> 声明

     <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。

    38.post与get

    您应该使用 POST:

    如果表单正在更新数据,或者包含敏感信息(例如密码)。

    POST 的安全性更好,因为在页面地址栏中被提交的数据是不可见的

    关于 GET 的注意事项:

    • 以名称/值对的形式将表单数据追加到 URL
    • 永远不要使用 GET 发送敏感数据!(提交的表单数据在 URL 中可见!)
    • URL 的长度受到限制(2048 个字符)
    • 对于用户希望将结果添加为书签的表单提交很有用
    • GET 适用于非安全数据,例如 Google 中的查询字符串

    关于 POST 的注意事项:

    • 将表单数据附加在 HTTP 请求的正文中(不在 URL 中显示提交的表单数据)
    • POST 没有大小限制,可用于发送大量数据。
    • 带有 POST 的表单提交无法添加书签
  • 相关阅读:
    Vue.js学习笔记 第五篇 事件处理
    多sheet导出核心代码
    jeecg查询备份
    输入URL 一瞬间发生了什么
    get post 的区别
    Redis所需内存 超过可用内存怎么办
    MySQL联合索引
    常用的sql
    MySQL 时间类型字段的分析
    PHP各个版本的区别
  • 原文地址:https://www.cnblogs.com/wfswf/p/15472412.html
Copyright © 2011-2022 走看看