任务四

HTML vs XML vs XHTML

HTML,超文本标记语言,是语法较为松散的、不严格的Web语言;

XML,可扩展标记语言,主要用于存储数据和结构;

XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格。

XML与HTML

XML 与 HTML 的主要差异

XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计:

XML 被设计为传输和存储数据,其焦点是数据的内容。

HTML 被设计用来显示数据,其焦点是数据的外观。

HTML 旨在显示信息,而 XML 旨在传输信息。

XHTML

XHTML 是 HTML 与 XML(扩展标记语言)的结合物。

XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。


语义化HTML

语义化HTML是一种编写HTML的方式

选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。


表现(内容)、样式、行为分离

写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去写样式。

写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化

HTML 内不允许出现属性样式,尽量不要出现行内样式

这样做的优点,易读和维护方便


HTML常见标签

h1~h6

标题

h1代表页面最大的标题

h2二级标题

h3... 更弱的标题

p

段落,表示大段文字

a

链接,链到一个地址

href="http://jirengu.com" target="_blank" title="饥人谷">饥人谷.com

|href     |是a标签必备属性|

|target="_blank"       |在新窗口打开(没有的话在当前页面跳转)|

|title="xxx"     | 显示xxx(在不点击的情况下显示链接到哪里)|

|a href="#about"     ||锚点,点击时跳转到id为about的锚点|

|a href="/"      |返回根目录,或者返回网站首页|

img

展示一张图片(只闭合标签,最后不需要加 /)

src="滑稽.jpg" alt="图片">

src     图片地址

alt      默认不显示,当图片显示不出来时才显示(用来说明图片是什么)

div

语义为“一大块”,用于给页面划分区块,让结构更清晰

id="header">...


id    为页面上的元素起一个唯一的名字

ul li

-ul: unsort list 无序列表

-用于表示并列的内容

-ul的直接子元素是li

-可以嵌套

任务四_第1张图片


任务四_第2张图片

ol li

ol: order list 有序序列表 用于表示带步骤或者编号的并列内容 ol的直接子元素只能是li 可以嵌套

任务四_第3张图片


任务四_第4张图片

dl dt dd

用于展示一系列 “标题:内容... ”的场景

任务四_第5张图片
任务四_第6张图片

button

按钮

你可能感兴趣的:(任务四)