第一课 前端与HTML

前端关注点： 功能、 美观、 无障碍、 性能、 安全、 兼容、 体验、

<img src="photo.jpg"/>src是属性名，photo.jpg是属性值。

<!doctype h†ml>渲染模式 浏览器拿到html代码解析成DOM树

HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如input、meta
• 属性值推荐用双引号包裹
• 某些属性之可以忽略，比如required、readonly

标题h1～h6

<h1>一级标题</h1>
<h2>二级标题</h2>
<p>段落</p>
<h2>二级标题</h2>

表单

<h2>有序列表</h2>
<ol>       //order list
    <li>第一名</li>       //list item
    <li>第二名</li>
</ol>

<h2>购物清单（无序列表）</h2>
<ul>       //unorder list
    <li>草莓</li>       //list item
    <li>西瓜</li>
</ul>


<h2>霸王别姬（定义列表）</h2>
<dl>       //definition list
    <dt>导演：</dt>       //definition title
    <dd>陈凯歌</dd>
    <dt>演员：</dt>       //可以多对多
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
</dl>

链接

//a-anchor，href超链接

多媒体

输入

引用

一般三种引用，长引用1种，短引用2种。

• 长文字引用<blockqute cite="http:">
• 短引用<cite>小王子</cite>。作品引用。
• 短引用<q>字符串是不可变量</q>。内容引用。

代码

• 短代码<code></code>
• 多行代码<pre><code>多行代码</code></pre>

强调

• 紧急，语气上强调<strong></strong>
• 重读<em></em>

内容划分

header页头， nav导航， footer页尾。

语义化是什么

• HTML种的元素、属性及属性值都拥有某些含义
• 开发者应该遵循语义来编写HTML
  • 有序列表用ol；无序列表用ul
  • lang属性表示内容所使用的语言

谁在使用我们写的HTML

• 开发者：修改、维护页面
• 浏览器：展示页面
• 搜索引擎：提取关键词、排序
• 屏幕阅读器：给盲人读页面内容

无障碍性：不仅是指残疾人，正常人也有障碍环境，比如在公交车上比较抖动/当前图片未加载。

语义化的好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性

html传达的是内容，而不是样式。

如何做到语义化

• 了解每个标签和属性的含义【推荐看MDN文档、w3c规范，正确使用标签及属性】。
• 思考什么标签最适合描述这个内容。
• 不使用可视化工具生成代码。