w3c School读书笔记（一）：HTML基础

2017-04-02  本文已影响155人  呆呆的张先生

html的基础知识

w3c_html基础教程总结

文档的基本结构

<!DOCTYPE html>                 <!-- 定义文本类型 -->
<html>                          <!-- html文件起始 -->
<head>                          <!-- html文件头部 -->
    <meta />                    <!-- meta中定义类型、编码、作者、时间、编辑器、重定向 -->               
    <title> 题目</title>        <!--标题，在页面中不可见，显示在浏览器工具栏、添加收藏的标题、以及在浏览器搜索结果的显示 -->
    <base href="" target="" />  <!-- 超链的默认地址href及打开方式target -->
    <link rel="stylesheet" type="text/css" href="">
                                <!-- 定义文档与外部资源的关系，最常用来链接样式表-->
    <script type="text/javascript"></script>
                                <!-- 动态脚本的定义 -->
    <style>                             
    </style>                    <!-- 定义元素的样式，可以采用不同类型的选择器 -->
</head>
<body>                          <!-- html页面可见部分 -->
  <h1> 一级标题 </h1>           <!-- h1 -> h6 标题 -->
  <div> </div>                  <!-- 分节 -->
  <p> </p>                      <!-- 分段 -->
</body>
</html>                         <!-- html文件结束 -->

脑图

html_基础的结构html_基础的结构

常见元素

HTML元素语义的分类

结构类

定义了文档的框架结构

内容类

标签代表一类的特殊内容

计算机相关的内容类

修饰形容类

对内容或者格式起修饰和形容

文本样式修饰类

块级元素内联元素及嵌套

html块级元素&内联元素及嵌套

  • 块级元素用来搭建网站架构、布局、承载内容，包括 div、ul、li、dl、dt、dd、h1~h6、p、address, etc
  • 内嵌元素 一般用在网站内容之中的某些细节或部位的定义与修饰，用以“强调、区分样式、上标、下标、锚点”等等，包括 a, sapn, strong, sub, sup, img, etc
  • 块元素和内嵌元素是可以相互转换的，如 display: block; /* 转成块元素 */,display: inline; /* 转成内嵌元素 */
  • 块级元素是盒子，不管里面有多少东西，外部可以设置其宽高; 内嵌元素是袋子其宽高由内部的东西撑起来。
  • 嵌套规则
    • 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
    • 块级元素不能放在<p>里面
    • h1-6、p、dt 只能包含只能包含内嵌元素，不能再包含块级元素
    • li 内可以包含 div 标签，li 和 div 标签都是装载内容的容器，地位平等，没有级别之分
    • 块级元素与块级元素并列、内嵌元素与内嵌元素并列
    • <pre>标签不能包含<img>,<object>,<big>,<samll>,<sub>和<sup>标签
  <div><h2></h2><p></p></div> —— 对
  <div><a href=”#”></a><span></span></div> —— 对
  <div><h2></h2><span></span></div> —— 错

元素细节

超链

超链接可以文字或者图像，通过使用 href 属性 创建指向另一个文档的链接，通过使用 name 属性 创建文档内的书签

图片

![](planets.jpg)
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

列表

无序列表
  <ul>
    <li>Coffee</li>
    <li>Milk</li>
  </ul>
有序列表
  <ol>
    <li>Coffee</li>
    <li>Milk</li>
  </ol>
自定义列表
  <dl>
    <dt>Coffee</dt>  <!-- 项目 -->
    <dd>Black hot drink</dd> <!-- 注释-->
    <dt>Milk</dt>
    <dd>White cold drink</dd>
  </dl>

通用属性

HTML 5 (5) - 元素的通用属性

元素的通用属性 - accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone

<body>
    <!--
        accesskey - 用于定义快捷键。快捷键为：alt + accesskey，参考第一个示例
          第二个示例描述为：有全键盘的设备快捷键为：ctrl + alt + q（目前 IE 为：ctrl + shift + q），仅有小键盘的设备快捷键为：“数字 0 键”
    -->
    <a accesskey="w" href="http://webabcd.cnblogs.com/">webabcd blog</a>
    <a accesskey="q 0" href="http://webabcd.cnblogs.com/">webabcd blog</a>
</body>

<html>
<head>
    <title>class</title>
    <style>
        .myClass { font-size:36px; }
        .myClass2 { color:Blue; }
    </style>
</head>
<body>
    <!--
        class - 指定需要应用的 css 类选择器
    -->
    <span class="myClass myClass2">webabcd</span>
</body>
</html>

<body>
    <!--
        title - 用于描述元素信息，相当于 ToolTip
    -->
    <a title="webabcd" href="http://webabcd.cnblogs.com/">webabcd blog</a>
    ![头像](https://img.haomeiwen.com/i3561258/9e80624cc7ca4b79.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</body>

W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

<body>
    <!--
        id - 用于定义元素的唯一标识，主要给 DOM 用
    -->
    <a id="myId" href="http://webabcd.cnblogs.com/">webabcd blog</a>
    <script type="text/javascript"> alert(document.getElementById('myId').innerHTML); </script>
</body>

<body>
    <!--
        bdo - 定义文本排列的方向（bdo 是 bi-directional override 的缩写）
          dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的缩写）
    -->
    <bdo dir="rtl">123</bdo>
</body>

脚本

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

附录

meta 中定义类型、编码、作者、时间、编辑器、重定向

URL统一资源定位符

  • 统一资源定位器（URL）用于定位万维网上的文档（或其他数据）,样式为 scheme://host.domain:port/path/filename
  • scheme包含 http(超文本传输协议), 以 http:// 开头的普通网页。不加密; https(安全超文本传输协议) 安全网页。加密所有信息交换; ftp(文件传输协议)用于将文件下载或上传至网站; file 浏览本地计算机上的文件。
  • 编码; URL 只能使用 ASCII 字符集来通过因特网进行发送, 使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符, + 来替换空格

字符实体

某些符号是预留的，如果需要显示采用字符实体，&entity_name; 或 &#entity_name;

    空格           &nbsp;             &#160;
<   小于号          &lt;               &#60;
>   大于号          &gt;               &#62;
&   和号           &amp;              &#38;
"   引号           &quot;             &#34;
'   撇号           &apos; (IE不支持)  &#39;
￠   分（cent）      &cent;             &#162;
£   镑（pound）         &pound;            &#163;
¥   元（yen）       &yen;              &#165;
€   欧元（euro）     &euro;             &#8364;
§   小节           &sect;             &#167;
©   版权（copyright）&copy;             &#169;
®   注册商标         &reg;              &#174;
™   商标           &trade;            &#8482;
×   乘号           &times;            &#215;
÷   除号           &divide;           &#247;

颜色

查询手册

上一篇 下一篇

猜你喜欢

热点阅读