html的基础知识

文档的基本结构

题目

一级标题

脑图

html_基础的结构

常见元素

结构类

定义了文档的框架结构

块级元素,标题,1-6 字体逐渐减小

块级元素,组织文本的段落

块级元素其他元素的容器,常用来主旨章节;结合CSS设置样式;及文档布局

内联元素,文本容器,结合CSS设置样式

将页面分栏显示不同的html文版

内连框架

  • Coffee
  • Milk

无序列表

  1. Coffee
  2. Milk

有序列表

Coffee
Black hot drink
Milk
White cold drink

自定义列表,dt为标题,dd为注释

其中

内容类

标签代表一类的特殊内容

超链接

定义缩写,WHO

定义首字母缩写

地址

块引用插入前后换行的外边距

定义引用和引证,

The Scream by Edward Munch. Painted in 1893.

![](w3school.jpg) 图片

短引用,内容加引号

计算机相关的内容类

定义计算机代码。

           适合定义计算机代码。

定义键盘输入。

定义计算机代码样本。

定义打字机代码。

元素定义数学变量:

           定义预格式文本。       不赞成使用。使用 
 代替。

不赞成使用。使用

 代替。

不赞成使用。使用

 代替。

修饰形容类

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


横线

删除线

下划线

换行

 预格式文本,保留格式,适合代码块

文本样式修饰类

定义文字方向 This text will be written from right to left

定义粗体文本。

定义大号字。

定义着重文字。

定义斜体字。

定义小号字。

定义加重语气。

定义下标字。

定义上标字。

定义插入字。

定义删除字。

不赞成使用。使用 代替。

不赞成使用。使用 代替。

不赞成使用。使用样式(style)代替。

块级元素内联元素及嵌套

块级元素用来搭建网站架构、布局、承载内容,包括 div、ul、li、dl、dt、dd、h1~h6、p、address, etc

内嵌元素 一般用在网站内容之中的某些细节或部位的定义与修饰,用以“强调、区分样式、上标、下标、锚点”等等,包括 a, sapn, strong, sub, sup, img, etc

块元素和内嵌元素是可以相互转换的,如 display: block; /* 转成块元素 */,display: inline; /* 转成内嵌元素 */

块级元素是盒子,不管里面有多少东西,外部可以设置其宽高; 内嵌元素是袋子其宽高由内部的东西撑起来。

嵌套规则

块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素

块级元素不能放在

里面

h1-6、p、dt 只能包含只能包含内嵌元素,不能再包含块级元素

li 内可以包含 div 标签,li 和 div 标签都是装载内容的容器,地位平等,没有级别之分

块级元素与块级元素并列、内嵌元素与内嵌元素并列

标签不能包含,,

—— 对

元素细节

超链

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

指向邮箱的链接,发送邮件!

无下划线的超链,

图片作为超链, ![](/i/eg_buttonnext.gif)

target = "_blank" or "showframe" or none指定打开文档的显示位置为 新窗口 或 框架 或 当前页面

target = "iframe_name" 显示到指定的 iframe,

W3School.com.cn

跳转当页面制定的锚点,制作目录 ,基本的注意事项 - 有用的提示 --创建锚点-- 有用的提示,--本文档中跳转到书签-- 有用的提示--UML中添加直接跳转--

图片

URL 可以是相对路径和绝对路径 ,![](/i/ct_netscape.jpg)

alt 替换文本,指定图片显示失败时的替换文本,![](boat.gif)

嵌入图片与文字的竖直方向的对齐方式,![](/i/eg_cute.gif) middle top;水平方向的位置,eg_cute.gif

指定图片的大小 ![](w3school.jpg)

图片的边框 border="0"

带有可点击区域的图像映射

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域

中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 添加 id 和 name 属性。

![](planets.jpg)

列表

无序列表

基本用例

CoffeeMilk

项目符号

有序列表

基本用例

CoffeeMilk

项目编号

, 或 “a”, “I”, “i”

自定义列表

基本用例

Coffee Black hot drink MilkWhite cold drink

通用属性

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

accesskey 定义快捷键

webabcd blog

webabcd blog

style 定义样式

webabcd

class 指定需要应用的 css 类选择器

class

.myClass { font-size:36px; }

.myClass2 { color:Blue; }

webabcd

title 描述文档信息

webabcd blog

![头像](http://upload-images.jianshu.io/upload_images/3561258-9e80624cc7ca4b79.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

id 用于定义元素的唯一标识,主要给 DOM 用,

id与name的区别

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

webabcd blog

dir 文本排列方向,可能的值有:auto|ltr|rtl

123

spellcheck - 是否使用浏览器的拼写检查功能对元素内的内容做拼写检查

hidden - 用于隐藏元素

contenteditable - 用于定义内容是否可编辑

ontextmenu - 指定上下文菜单的数据源

draggable - 元素是否可拖拽;dropzone - 拖放的目标元素

脚本

标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

如果浏览器压根没法识别

待深入

附录

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

类型和编码格式

作者

审核

编辑软件

重定向

针对搜索引擎的,一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面

关键字

描述

URL统一资源定位符

统一资源定位器(URL)用于定位万维网上的文档(或其他数据),样式为 scheme://host.domain:port/path/filename

scheme包含 http(超文本传输协议), 以 http:// 开头的普通网页。不加密; https(安全超文本传输协议) 安全网页。加密所有信息交换; ftp(文件传输协议)用于将文件下载或上传至网站; file 浏览本地计算机上的文件。

编码; URL 只能使用 ASCII 字符集来通过因特网进行发送, 使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符, + 来替换空格

字符实体

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

空格

< 小于号 < <

> 大于号 > >

& 和号 & &

" 引号 " "

' 撇号 ' (IE不支持) '

¢ 分(cent) ¢ ¢

£ 镑(pound) £ £

¥ 元(yen) ¥ ¥

€ 欧元(euro) € €

§ 小节 § §

© 版权(copyright)© ©

® 注册商标 ® ®

™ 商标 ™ ™

× 乘号 × ×

÷ 除号 ÷ ÷

颜色

查询手册

阅读与html阅读的区别,w3c School读书笔记(一):HTML基础相关推荐

  1. 阅读《Oracle内核技术揭秘》的读书笔记

    阅读<Oracle内核技术揭秘>,对oracle的内存结构.锁.共享池.undo.redo等整理成了如下的思维导图: 转载于:https://www.cnblogs.com/hikeepg ...

  2. 如何阅读一本书 读书笔记

    <?xml version="1.0" encoding="utf-8"?> 如何阅读一本书 读书笔记 如何阅读一本书 读书笔记 1 简介 此书第一 ...

  3. 《如何阅读一本书》读书笔记2

    第一篇 阅读的层次 第一章 阅读的活力与艺术 这是一本为阅读的人,或是想要成为阅读的人而写的书.尤其是想要阅读的人.所谓"阅读的人"(readers),是指那些今天仍然习惯于从书写 ...

  4. 好的阅读就是主动阅读

    读书还需要什么方法,打开一本书,读就好了.有趣的书,你确实不需要花什么力气就能读下去,但那些真正让你心智提升类的书,可能就不那么容易读了.作者把阅读的过程比作棒球,阅读者就像接球手,如何接住作者发出的 ...

  5. 《如何阅读一本书》-读书笔记-reading_note

    <如何阅读一本书>-读书笔记-reading_note 文章目录 <如何阅读一本书>-读书笔记-reading_note 1 书籍信息 2 书评 3 读书笔记 4 精彩书评 1 ...

  6. 读书笔记之《如何阅读一本书》

    作者 莫提默·J·艾德勒 感想 我是跳跃着了这本书,用书里提到的层次来讲的话 应该就是检视阅读.看看目录基本就知道作者要表达什么了,作者的目标很存粹,就是想通过这本书来提升读者的阅读技巧.说句实话看完 ...

  7. 《如何阅读一本书》--读书笔记

    <如何阅读一本书>的读书笔记 <如何阅读一本书>[美]莫提默 ⋅\cdot⋅ J. 艾德勒 查尔斯 ⋅\cdot⋅ 范多伦 著 郝明义 朱衣 译 主要内容 该书讲述了阅读可分为 ...

  8. 读《任何阅读一本书HOW TO READ A BOOK》之读书笔记

    书本框架: 主动阅读的优势,所有的求知都带有主动性 阅读的四个阶段:基础阅读.概要阅读.分析阅读.主题阅读 每个一个阶段都要分为几个小阶段 本书的重要部分:分析阅读 本书的主要目标:为增进理解力而阅读 ...

  9. linux内核 阅读,Linux内核阅读感悟

    <Linux内核阅读感悟>由会员分享,可在线阅读,更多相关<Linux内核阅读感悟(261页珍藏版)>请在人人文库网上搜索. 1.contents表格我读了你的想法.2读核感悟 ...

最新文章

  1. levelDB数据库使用及实例 - 高性能nosql存储数据库
  2. 文本编辑器中查找对话框及功能实现
  3. 50万数据生成6位数不重复字符串_R语言系列3:高级数据管理
  4. 16.04编译android 7.0,ubuntu16.04 编译Android5.1报错
  5. 生命游戏c语言代码easy,c++生命游戏源码
  6. JS判断UA动态加载CSS的方法
  7. 28. Location replace() 方法
  8. 虚拟Linux系统使用Windows系统oracle数据库
  9. HTML基础代码用法大全,html代码大全(基础使用代码)(颜色代码完整版)
  10. sensor接口之DVP
  11. web资源优化-图片篇(一)
  12. Esac代表什么意义?
  13. RabbitMq(二)一文彻底弄懂RabbitMq的四种交换机原理及springboot实战应用
  14. jquery 绘图工具 flot 使用
  15. Android Audio 2: Audio相关术语
  16. R实战 | OPLS-DA(正交偏最小二乘判别分析)筛选差异变量(VIP)及其可视化
  17. centos7配置 console口_7.5. Configuring the Linux Console
  18. OPenCV 图像透视变换矫正
  19. uniapp在线打包ipa - iOS篇
  20. windows杀死nginx进程

热门文章

  1. SourceTree查找Github修改记录的技巧
  2. Angular HTTPClient的使用方法
  3. SAP UI5应用里的页面路由处理
  4. 使用SAP UI5 Web Components开发React应用
  5. why Participants tab in GM6 is hidden - by extension
  6. sap-statistics in SAP UI5 http roundtrip
  7. 如何处理resource not found for the segment XXXXX error message
  8. 得到application server上所有的logon user
  9. C4C的Rich text editor的JavaScript实现
  10. 我2017年游泳特训安排