Fulongのblog

html笔记

2017/12/03 FrontEnd 共 7834 字，约 23 分钟

如何理解HTML?

Web标准包括三个方面：

  • 结构标准（HTML）：用于对网页元素进行整理和分类。
  • 表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
  • 行为标准（JS）：用于定义网页的交互和行为。

HTML 不是一种编程语言，是一种描述性的标记语言。

作用：HTML是负责描述文档语义的语言。

HTML 格式的文件是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。

比如，面试的时候问你，<h1> 标签有什么作用？

  • 正确答案：给文本增加主标题的语义。
  • 错误答案：给文字加粗、加黑、变大。

之前的HTMl很混乱，还有些样式的标签，比如粗体<b> 等，新一代的html都废弃这些了，使之专门负责语义。

语义化的意义是什么

  • 开发者容易理解，便于维护。
  • 机器（搜索引擎、读屏软件等）容易理解结构
  • 有助于 SEO

HTML 相当于人的身体组织结构

笔记

  • 文档声明头
  • 计算机编码介绍 unicode是4字节表示，ansi是2字节，utf-8是变长。中文除utf8外还可以gbk仅包含常用中文。追求速度就后者，字节少，快，但不全。

  • HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

  • iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用样式表-->
    <!--head部分链接样式表-->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <!--单个文件特殊样式-->
    <style type="text/css">
        body {background-color: #63ff52
        }
        p {margin-left: 20px}
    </style>
    <!--内联样式见下-->
</head>
<body>

<!--标题-->
    <h1>mafulong</h1>
<!--水平线-->
    <hr />
<!--链接-->
    <a href="http://www.baidu.com">Baidu</a>
<!--折行-->
    <br>
<!--图片-->
    <img src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" width="120" height="130"/>
<!--段落-->
    <p>mafulong</p>
<!--样式-->
    <!--背景颜色；对齐方式； 字体； 字体大小； 字体颜色-->
    <p style="background-color: green">mafulong</p>
    <p style="text-align: center; color: blue; font-family: Arial; font-size: 20px">mafulong</p>
<!--文本格式化标签-->
    <!--粗体-->
    <b>mafulong</b>
    <!--斜体-->
    <i>mafulong</i>
    <q>引用</q>
    <blockquote>自动缩进的长引用</blockquote>
    <var>数学变量，斜体表示</var>
<!--联系信息-->
    <address>斜体表示</address>
<!--代码-->
    <pre>
        <code>
            保持代码格式，不删除空格
        </code>
    </pre>
<!--html可定义专属注释-->
    <!--[if IE 8]>
    .... some HTML here ....
    <![endif]-->
<!--表格-->
    <!--空的单元格要输入&nbsp-->
    <table border="1">
        <!-- 表头 -->
        <tr>
            <th>Name</th>
            <th>Telephone</th>
          </tr>
        <!--table row-->
        <tr>
            <!--table data-->
            <td>12</td>
            <td>323</td>
        </tr>
        <tr>
            <td>fj</td>
            <td>df</td>
        </tr>
    </table>
<!--列表-->
    <!--有序列表-->
    <ol>
        <li>1</li>
    </ol>
    <!--有序列表-->
    <ul>
        <li>。</li>
    </ul>
    <!--自定义列表 -->
    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>
<!-- 图片 -->
	<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

    <!-- 点击图片跳转 -->
    <p>无边框的图片链接:
    <a href="http://www.runoob.com/html/html-tutorial.html">
    <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
</body>
</html>





fieldset，legend 是表单的语义化。
  • label标签 将文字绑定到一个input上，避免点文字和点radio等分离，使其作为一个整体。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!--style:标签名.类名 小标签名-->
    <!--或者： #id 小标签名-->
    <style>
        renshen {
            color: #63ff52;
        }
    </style>
</head>
<body>
<!--分类行内元素：span-->
<p>我的母亲有 <span style="color: blue">蓝色</span> 的眼睛。</p>

<!--分类块级元素：div-->
<!--利用div做布局工具-->
<div style="color: #0000ff">
    <h3>这是一个在 div 元素中的标题。</h3>
    <p>这是一个在 div 元素中的文本。</p>
</div>

<!--类用.引用， id用#引用-->
<!--header,nav,section,footer-->
<!--html5自己带元素，定义style引用时不需要用#，直接用，如header{}-->
<!--Bootstrap响应式CSS框架，适配显示器-->
<renshen>
    <p>人生啊</p>
</renshen>
<!--表单-->
<form action="a.html" method="get">
    <!--通过name提交-->
    <!--<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
-->
    <fieldset>
        <legend>Personal information:</legend>
        Name: <input type="text" size="30"/><br/>
        E-mail: <input type="text" size="30"/><br/>
        Date of birth: <input type="text" size="10"/>
    </fieldset>
    First name<br/>
    <input type="text" name="" firstname value="wahh" autofocus/>
    <input type="radio" name="sex" value="male"/>female
    <input type="radio" name="sex" value="female"/>male

    <!-- submit定义了提交按钮。
    当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
    action 属性会对接收到的用户输入数据进行相关的处理: -->
    <input type="submit" value="Submit"/>

    <!--下拉列表-->
    <!-- 还有optiongroup可以2层选择那样 -->
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <!--textarea-->
    <textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
    </textarea>
    <!--button-->
    <!-- 下面两种实现效果一样 -->
    <button type="button" onclick="alert('Hello World!')">Click Me!</button>
    <input type="button" value="Hello world!"/>
</form>
</body>
</html>

速查

参考手册

HTML基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
    H5已废弃
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
    The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
<address> （联系信息）
    就是斜体
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

参考

可以超链接可以设置html锚点到某个元素。

图片（Images）

必须有src和alt属性

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

无序列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格（Tables）

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

表单（Forms）

每个输入元素必须有一个name属性

在form规定action, submit提交就执行，method规定post还是get, 默认是get

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

参考

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。

我们可以使用 form 标签来创建表单

input也可以脱离form使用，不过可能需要结合ajax等。

实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

事件

参考

  • onclick：用户点击 HTML 元素。
  • onchange：HTML 元素改变. onchange 事件会在域的内容改变时发生。onchange 事件也可用于单选框与复选框改变后触发的事件。
  • onload：浏览器已完成页面的加载。
  • onmouseover：用户在一个HTML元素上移动鼠标。
  • onmouseout：用户从一个HTML元素上移开鼠标。
  • onkeydown：用户按下键盘按键。

Search

    Table of Contents

    Popular Posts