笔记 - HTML入门

Emist
231 阅读8分钟

HTML 入门

HTML - Hypertext Markup Language

1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统[5]。他规定HTML并在1990年底写出浏览器和服务器软件。(from wikipedia)

HTML 骨架

<!DOCTYPE html>
<html  lang="zh-CN">
<head>
  <meta charset="UTF-8"> <!-- 规定编码为 UTF-8 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 禁用缩放，兼容手机-->
  <meta http-equiv="X-UA-Compatible" content="ie-edge"> <!-- IE使用Edge内核-->
    <title>Test</title>
</head>
<body>
</body>

charset="GBK"， 汉字内码扩展规范，仅适用中文

HTML Elements

HTML元素可被分为两类，普通元素和语义(Semantics)元素 普通元素构建出HTML骨架，语义元素具有和部分普通元素一样的格式效果，并方便搜索引擎爬虫的扫描，可用于SEO。

普通元素：

<head> 头元素，用来放置各种需要第一步加载的内容。包括基础的css，需要加载的一些框架内容。
h1-h6：标题，1为最大，6最小。
<div>：division，分割网页区域。

内容标签：

<a>：anchor，锚元素，主要用于创建超链接，也可以指向同一页面中的位置，指向电子邮件地址。
<a href="#" target="_blank">Test</a> target="_blank"可以让链接在新标签页打开。
<p>：paragraph，段落，放置自然段文字。
<strong> and <em>：两个元素都表强调，重要性上strong > em，strong显示为粗体，全局强调，表重要性。em显示为斜体 ，局部强调，改变句子内的语义。
<img>：image，图片，src属性内填写文件路径，alt属性填写图片无法显示时显示的替代内容。
<ul> and <li>：unordered list，无序列表，type属性包含circle（空心圆点），disc（实心圆点），square（实心方点）。
<ol> and <li>：ordered list，有序列表
type属性包含：

  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马数字编号
  • I 表示大写罗马数字编号
  • 1 表示数字编号（默认） start属性：控制列表起始值，接受数字，罗马数字，大小写英文字母。

<dl><dt><dd>：description list, description term, description details. 描述列表 dt：术语 dd：该术语的描述 <pre>：预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。
<code>：呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.
<hr>：分割线
<br>：空格，等同&nbsp;
<quote>：引用，无自带特殊样式，默认内联，不换行。
<blockquote>：块引用，可换行。

语义元素：（参考MDN Semantic）

<header>：多用于网页头部，展示标题或介绍内容，网页标题，导航，搜索框多放置于header。 <footer>：多用于页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息。一般来说需要延后加载的文件也会放在这里，多为js。 <nav>：navigation，导航栏，由菜单，目录和索引构成。 <main> ：网页主体，任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。 <aside>：可理解为侧边栏，独立于main之外的部分。 <section>：可用于划分区域，近似于div，但是具有语义。 <article>：原意是文字，应有多个部分组成，可包含标题和内容，可成为可独立分配的或可复用的结构。 <figure>：表一段独立的内容, 经常与说明

配合使用, 并且作为一个独立的引用单元。这个标签经常是在主文中引用的图片，插图，表格，代码段等等。 <mark>：表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。 这个 HTML mark 标签代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签. 举个例子，它可以用来显示搜索引擎搜索后关键词 <time>：利用datetime属性标注时间，此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点。

全局属性

class

全局类名，拥有class的元素可以被类选择器识别，可被用于css, js, DOM，识别和访问特定元素。理论上class不可重复，每个class都是全局唯一的，如有重复类名会报错。 css写法：

# 只匹配完全符合的class值，例如class="a b"，选择器只有a，则不识别
[class="theClassName"] {...} 
# 适用于所有包含这一类名的class
.theClassName {...}
id

（理论上）全局唯一的id，但出现重复ID时不会报错，可用于css, js, DOM.

[id="theIdName"] {... }
#theIdName {...}

倘若ID与window已有的属性重名，则js无法找到拥有该ID的元素。但仍然可以使用getElementById()方法找到元素。

contenteditable

带有这一属性的元素可被用户编辑，但不会上传。 tips: 可将从head移进body，将style本身作为元素放入stylesheet并显示，加上contenteditable，则style可显示在网页头部，编辑效果立即显示，但被编辑的部分不会影响源文件，且不可新增，只可编辑。 举例： 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <style contenteditable> /* 加上contenteditable，使style可在页面上编辑 */
    style {display: block;} /* 添加display属性使style显示*/
    .test {
      border: 10px solid blue;
      background: green;
    }
  </style>
  <div class="test">
    <p>The concert starts at <time>20:00</time>.</p>
  </div>
</body>
</html>
hidden

令元素不显示在页面上，但css里面的display: block有优先级，可令其重新显示

style

style属性的优先级高于css style。可以通过js修改。 一般情况下，优先级如下： （外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style 有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

tabindex

给tab选择加上顺序，以index值从小到大选择。 特异值： 0 ：最后一个被选中 -1 ：永远不被选中

title

包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户。一些典型用例：

  • 链接：被链接文档的标题或描述
  • 媒体元素，例如图像：描述或关联信息
  • 段落：脚注或者相关的评论
  • 引用：作者信息，以及其他  css tips：怎样换行不溢出且显示为省略号
.theExample {
white-space: norap;
overflow: hidden;
text-overflow: ellipsis
}

剩余内容可以放进title

默认样式

HTML元素有自己的默认初始样式，但style可以覆盖默认样式。

css reset

动手写css之前清除默认样式。

HTML 常用标签

a 锚

#####属性

href:

hyper reference 超链接 文件路径，URL或伪协议。 URL: 建议使用 //abc.com无协议，则自动选择协议。 伪协议： javascript: Code mailto: emailAddress tel:number e.g 空伪协议 <a href="javascript:;">空伪协议</a> ** id**: e.g id = xxx <a href="#xxx"> </a>

target:

目标窗口。 _self：默认值，在当前窗口打开页面。 _blank: 在空白页打开。 _top: 在顶级窗口打开(e.g. 多层iframe)。 _parent: 在上一级窗口打开。 window name: 如果target="name"则打开一个以name命名的窗口，所有target为name的连接都将在该窗口打开。 target name: 连接将在指定iframe内打开。

download:

部分浏览器不支持该属性。 理论上download可以下载目标网页。

rel=noopener

iframe 内嵌窗口

不常见…

table 表格

<table>
        <thead> // table head
            <tr> // table row
                <th>like table's header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>table data</td>
            </tr>
       <tr>
            <td colspan="3" >表格合并列，合并3列</td>
            <td  rowspan="3">表格合并行，合并3行</td>
        </tr>

        </tbody>
        <tfoot></tfoot> // 使用较少
    </table>

colspan: 合并列 rowspan: 合并行 tips: http-server -c-1 启动HTTP Server

img 图片

发出GET request，获取图片 （永远不要让图片变形，改变图片比例）

属性：

<img src="" alt=""> src: 相对路径，URL alt: 图片无法显示时的替代文本 height / width: 高与宽，只写一个另一个则会自适应。

事件：

onload: 加载成功调用 onerror: 加载失败调用 e.g.

<img id="testImg" src="testImg.jpg" alt="测试图片" />
    <script>
        // 当图片正常显示
        testImg.onload = function(){
            console.log("testImg Loading Succeed");
        };
        // 图片加载失败，使用404.jpg替代
        testImg.onerror = function(){
            testImg.src = "404.jpg";
        };
    </script>
响应式
        /* 响应式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 图片大小适应屏幕 */
        img {
            max-width: 100%;
        }
可替换元素

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的 （from MDN) img是一种可替换元素，其展示的图片由src决定，因此可被替换，而查看html并不能看到图片本身。 、、、、都是可替换元素。这些元素往往没有实际的内容，即是一个空元素。 与此相对，<div>、<p>、<h1>到<h6>、<table>则为不可替换元素，其内容直接表现给用户端（例如浏览器）。


form 表单

form可发送GET, POST请求，遂刷新页面

属性

action: 类似于source，form请求的目标页面 <form action="test.php">

autocomplete: 用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。 on为打开自动补全，off关闭自动补全。

method: GET, POST

tips: <button>和<input type="submit">区别
button标签内还能再添加其他内容。只有当type="submit"时才能提交。（默认值也为submit）。type="button"无法被提交。

<button type="submit"><strong>我是一个加粗按钮</strong></button>

而input标签自关闭，不能再添加内容。

<input type="submit" value="提交" />

target: 表示在提交表单之后，在哪里显示响应信息。

  • _self：默认值。在相同浏览上下文中加载。
  • _blank：在新的未命名的浏览上下文中加载。
  • _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
  • _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。 此值可被<button>或拥有提交作用的<input>拥有的formtarget属性覆盖。
事件

onsubmit

input 输入

获取用户输入

属性：

MDN input element 属性真的太多了 text: 文本输入
password: 密码输入，自动用替代符号隐藏输入内容 *******
color: 可供选择的调色板
radio: 单选，选项input需要有相同的name
checkbox: 多选，选项input需要有相同的name
file: 提交文件，添加mutiple可选择多个文件 e.g. <input type="file" multiple />
hidden: 隐藏的输入框，一般用于自动提交id等服务于机器的功能。

<textarea> 多行输入框
用法近似input text
<textarea style="resize:none; width:50%; height:5%"></textarea>
resize:none 禁止输入框大小被拖拽改变

<select> 下拉式选择

 <select>
        <option value="1">Mon</option>
        <option value="2">Tue</option>
</select>

option中间的值只显示，value内定义的值会被提交

事件

onchange: 用户输入改变 onfocus: 鼠标光标停留时 onblur: 鼠标光标离开时

验证器

HTML5自带验证器 <input type="text" required /> 如果未填写该输入框即提交，页面出现提示。

avatar
文章
阅读
粉丝