Lecture2 HTML基础
文章目录
2.1 HTML Overview
- Hypertext Markup Language (HTML) ，全称为超文本标记语言，是⼀种标记语⾔。它包括⼀系列标签．通过这些标签可以将⽹络上的⽂档格式统⼀，使分散的Internet资源连接为⼀个逻辑整体。
- HTML（超⽂本标记语⾔——HyperText Markup Language）是构成 Web 世界的⼀砖⼀瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述⼀个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）-- MDN
2.1.1 HTML版本
- 1989: 伯纳斯-李写了⼀份备忘录，提议建⽴⼀个基于互联⽹的超⽂本系统
- 1995: RFC 1866，HTML 2成为官⽅标准语⾔
- 1997: HTML 4
- 1999: HTML 4.01
- 2001-01: XHTML
- 2014 html5
- 2016 html5.1
- 2017 html5.2
2.1.2 HTML and XHTML
- HTML最初是⼀种应用程序标准通⽤标记语⾔(SGML)
- SGML是⼀种⾮常灵活的标记语⾔
- 需要⼀个相对复杂、宽松且通常⾃定义的解析器
- XHTML:
- XML的应用程序，SGML的⼀个更严格的子集
- 真正的XHTML文档允许使用标准XML工具执行自动化处理
2.1.3 标记语言
-
标记
- 在文档中嵌入代码
- 代码被称为“标签”
- 代码
- 描述结构文档
- 包括处理说明
-
标记语言
- 描述标签语法的计算机语言
- 可以与其他工具一起使用来指定渲染
-
逻辑标记
- 描述文档的各个部分
- 不指定如何渲染
This is <strong>very</strong> important.效果： This is very important.
-
逻辑
-
呈现是客户的“决定”
-
当客户端⽆法展示时，会出现优雅降级
<img alt=“image description” src=“foo.gif”>
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。区别：
优雅降级是从复杂的现状开始，并试图减少用户体验的供给
渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带 -
2.1.4 Markdown
- Markdown 是⼀种轻量级标记语⾔，它允许⼈们使⽤易读易写的 纯⽂本格式编写⽂档。
- Markdown 语⾔在 2004 由约翰·格鲁伯（英语：John Gruber）创建。
- Markdown 编写的⽂档可以导出 HTML 、Word、图像、PDF、 Epub 等多种格式的⽂档。
- Markdown 编写的⽂档后缀为 .md, .markdown。
- Markdown 应⽤
- Markdown 能被使⽤来撰写电⼦书，如：Gitbook。
- 当前许多⽹站都⼴泛使⽤ Markdown 来撰写帮助⽂档或是⽤于论坛上发 表消息。例如：GitHub、简书、reddit、Diaspora、Stack Exchange、 OpenStreetMap 、SourceForge等。
2.1.5 如何编写(x)HTML
-
编辑器
-
生成器
-
https://github.com/Microsoft/ailab/tree/master/Sketch2Code
https://sketch2code.azurewebsites.net/
-
-
Sketch2Code处理流程
-
2.1.6 HTML基础
-
XHTML 或 HTML 文档组成
-
DOCTYPE
-
使用的文档类型定义DTD
-
doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。
doctype在html中的作用就是触发浏览器的标准模式，如果html中省略了doctype，浏览器就会进入到Quirks模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异。
-
-
Head
- 元信息
- 只有
<title>是必须的
-
Body
- 需要呈现的内容
-
-
HTML 元素详解
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了⼀个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘 记包含结束标签的错误，这可能会产⽣⼀些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输⼊的⽂本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是⼀个完整的元素。
-
块级元素或⾏内元素
- 块级元素占据其⽗元素（容器）的整个⽔平空间，垂 直空间等于其内容⾼度，因此创建了⼀个“块” 。
- 例如: paragraphs, lists, table cells
- 通常浏览器会在块级元素前后另起⼀个新⾏
- ⾏内元素只占据它对应标签的边框所包含的空间。
- 例如: bold text, code fragments, images
- 浏览器允许许多⾏内元素出现在同⼀⾏上
- 必须嵌套在块级元素中
- 块级元素占据其⽗元素（容器）的整个⽔平空间，垂 直空间等于其内容⾼度，因此创建了⼀个“块” 。
-
注释：
<!-- ... -->- 不能嵌套
- 许多网页根本没有注释
-
网页标题：
<title><title>Chapter 2: HTML Basics</title>- 用于：
- 定义浏览器⼯具栏中的标题
- 提供⻚⾯被添加到收藏夹时的标题
- 显示在搜索引擎结果中的⻚⾯标题
- 标题长度受限
- SEO（Search Engine Optimization：搜索引擎优化）权重大
- 用于：
-
<meta><meta name=“description" content=“introduction of XXX" /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" />-
⽤于提供关于HTML⽂档的元数据
-
<meta>标签只能出现在<head>⾥ -
标签通常⽤于给出⽹⻚描述、关键词、⽂档作者、最后修改日期等信息。
-
属性
属性 值 描述 charset character_set HTML5新属性：定义文档的字符编码，通常为 UTF-8 http-equiv contennt-type
expires
refresh
set-cookie把content属性关联到http头部 name author
description
keywords
generator
revised
others把content属性关联到一个名称 scheme some_text (html5不支持)定义用于翻译content属性值的格式 -
设置网页关键字 keywords
-
设置关键字可以帮助搜索引擎检索信息，但是不会直接显示在网页上。
语法：<meta name="keywords" content="具体的关键字"><!DOCTYPE html> <html> <head> <meta name="keywords" content="诗词" /> <title></title> </head> <body> </body> </html>
-
-
设置网页说明
-
设置网页说明也是为了方便搜索引擎搜索，它用来详细说明网页的内容，同样不会在网页上直接显示出来。
语法：<meta name="description" content="具体的网页说明"><!DOCTYPE html> <html> <head> <meta name="description" content="这是一个内容为诗词的网页" /> <title></title> </head> <body> </body> </html>
-
-
添加作者信息
-
在
<meta>中添加网页制作者的姓名
语法：<meta name="author" content="作者的姓名"><!DOCTYPE html> <html> <head> <meta name="author" content="adins" /> <title></title> </head> <body> </body> </html>
-
-
规定字符编码
-
charset属性规定HTML文档的字符编码。
语法：<meta charset="字符编码集"><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> </body> </html>
-
-
定时跳转
-
使用
<meta>标签可以使网页在一段时间后自动刷新，将http-equiv属性设置为refresh来实现自动刷新，content属性设置为更新时间。
语法：<meta http-equiv="refresh" content="跳转的时间; url=跳转到的地址">
刷新时间和链接地址之间用分号相隔。默认情况下，跳转以秒为单位。<!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="5; url=target/index.html" /> <title></title> </head> <body> </body> </html>
-
-
-
-
<h1> - <h6><h1> - <h6>标签被⽤来定义 HTML 标题。- ⽤标题来呈现⽂档结构是很重要的
<h1> 定义重要等级最⾼的标题。<h6>定义重要等级最低的标题。
-
<p>- 段落
-
<br>- 插⼊⼀个简单的换⾏符
<br>标签是⼀个空标签，意味着它没有结束标签。
-
<a>-
定义超链接
<p> Search <a href=“http://www.google.com/”>Google</a> or our <a href=“lectures.html”>Lecture Notes</a> </p> -
Search Google or our Lecture Notes
-
<a>元素最重要的属性是 href 属性，它指定链接的⽬标。 -
请使⽤ CSS 来改变链接的样式。
-
-
图像
<img>-
<img>是空标签，只包含属性，并且没有闭合标签<img src="url" alt="some_text"> -
src 指 “source”。源属性的值是图像的 URL 地址。
-
alt 属性⽤来为图像定义⼀串预备的可替换的⽂本。
-
通过在
<a>标签中嵌套<img>标签，给图像添加到另⼀个⽂档的链接。<a href=“http://theonering.net/”> <img src="hh.jpg" alt=“some-text” width="304"height="228"> </a> -
图像格式
- GIF
- 透明、⽆损、256
- ⽤于动画
- JPEG
- 使⽤范围最⼴
- 有损
- 背景图、轮播图或者商品的banner图
- PNG
- 真彩⾊和调⾊板、透明、⽆损
- ⽂件体积⼤
- 颜⾊数少的单帧图像，图标，LOGO
- webp
- 有损、压缩率⾼，同时⽀持透明度和动画
- 浏览器兼容性
- SVG
- LOGO
- GIF
-
-
<em> & <strong>- em: 呈现为被强调的⽂本
- strong: 定义重要的⽂本
<p> HTML is <em>really</em>, <strong>REALLY</strong> fun! </p>HTML is really, REALLY fun!
- em vs. i, strong vs. b
<i>⽆强调或着重意味的斜体（italic），⽐如⽣物学名、术语、外来语（⽐如 「de facto」这样的英语⾥常⽤的拉丁语短语）<b>>⽆强调或着重意味的粗体（bold），⽐如⽂章摘要中的关键词、评测⽂章 中的产品名称、⽂章的导⾔……
-
嵌套的标签
- 标签必须正确嵌套：结束标记必须与最近打开的标记匹配
- 浏览器可能会正确地呈现它（错误的嵌套标签），但它是⽆效的XHTML
-
Table: <table> <tr> <td> <th> <caption><table> <caption>Smart Guys</caption> <tr><th>name</th><th>gender</th></tr> <tr><td>Bill</td><td>male</td></tr> <tr><td>Susan</td><td>female</td></tr> </table>Smart Guys name gender Bill male Susan female - 不要⽤于布局!
- 结构混乱，不清晰
- css更强⼤，访问性更好，能在范围更⼴的设备上运作，如⼿机
- 机器难以理解，不利于SEO
- 基于css的布局⻚⾯⽐表单布局更⼩更简单\
- 不要⽤于布局!
-
块元素
<blockquote><p>As Lincoln said in his famous Gettysburg Address:</p> <blockquote> <p>Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p> </blockquote>As Lincoln said in his famous Gettysburg Address:
Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.
-
行内引用
<q><p>Quoth the Raven, <q>Nevermore.</q></p>Quoth the Raven,
Nevermore.
-
为何不像下⾯的⽅式?
-
<p>Quoth the Raven, "Nevermore."</p> -
不使⽤
""的原因是:- XHTML不应该直接包含引号字符，应该写成转义
" - 使⽤
<q>的话可以使⽤CSS样式
- XHTML不应该直接包含引号字符，应该写成转义
-
-
-
HTML字符实体
-
HTML 中的预留字符必须被替换为字符实体
-
⼀些在键盘上找不到的字符也可以使⽤字符实体来替换
character (s) entity <> <>é è ñ éèñTM © ™©π δ ∆ πδΔИ И" & "& -
要在Web⻚⾯中显示链接⽂本，必须对其特殊字符进⾏如下所示的编码
<p> <a href="http://google.com/search? q=marty&ie=utf-8&aq=t"> Search Google for Marty </a> </p><p> <a href="http://google.com/search?q=marty&ie=utf-8&aq=t "> Search Google for Marty </a> </p>
-
2.2 表单 Form
-
<form>：HTML 表单⽤于收集⽤户的输⼊信息 -
HTML 表单表示⽂档中的⼀个区域，此区域包含交互控件，将⽤户收集到的信息发送到 Web 服务器。
- 基本语法:
<form>...form elements...</form> - 表单元素允许用户在表单中输⼊内容，比如：文本域 （textarea）、下拉列表（select）、单选框（radiobuttons）、复选框（checkbox）等等
- 包含提交按钮
- 当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的⽂件名。
- 基本语法:
-
表单例子（必须将表单的控件包装在块元素中，比如div, fieldset等）
<form> <div class="form-group"> <label for="inputEmail">Email</label> <input type="email" class="form-control" id="inputEmail" placeholder="Email"> </div> <div class="form-group"> <label for="inputPassword">Password</label> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn">Login</button> </form>Login -
<form>标签
- 表单属性说明如何处理用户输⼊
- action=“url” (必须)
- 指定单击Submit按钮时将数据发送到哪⾥
- method=“get” (缺省)
- 将表单数据以名称/值对的形式附加到 URL 中
- URL 的长度是有限的（大约 3000 字符）
- 绝不要使⽤ GET 来发送敏感数据！（在 URL 中是可见的）
- 对于用户希望加⼊书签的表单提交很有用
- GET 更适用于非安全数据，比如在 Google 中查询字符串
- method=“post”
- 将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
- 没有长度限制
- 通过 POST 提交的表单不能加入书签
- action=“url” (必须)
- 表单属性说明如何处理用户输⼊
-
<input>-
<input>标签规定了用户可以在其中输⼊数据的输入字段。 -
<input>元素在<form>元素中使用，用来声明允许用户输入数据的 input 控件。 -
输入字段可通过多种方式改变，取决于 type 属性。
<form action="demo_form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"> </form> <!--点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。--><input type="text" name="firstname" /> <input type="radio" name="sex" value="male" /> Male <input type="checkbox" name="bike" /> <input type="password" name=“pwd">
-
2.3 Web Standards
- Web标准
- 更严格和结构化的语言
- 不同浏览器之间的兼容性更强
- 更有可能让页面在以后也能正确显示
- 可以与SVG(图形)、MathML、MusicML等其他XML数据进行交换。
- XHTML 1.0 vs HTML 4.01
- 文档结构
- XHTML DOCTYPE 是强制性的
<html>中的 XML namespace 属性是强制性的<html>、<head>、<title>以及<body>也是强制性的
- 元素语法
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素必须小写
- XHTML 文档必须有⼀个根元素
- 属性语法
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的
- 文档结构
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
