英语补充：
aside 旁边的
anchor 锚、定点
term 术语
inline 行内
推荐一本书
阮一峰-网道HTML教程
推荐两个工具
JSBin
代码沙盒
- HTML起手式
<!DOCTYPE html> 文档类型
<html lang="en"> html标签，可以把lang改成zh-CN
<head>
<meta charset="UTF-8"> 文件的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 如果当前页面在IE浏览器里显示，那么IE请升级成最新的内核
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 防止页面缩放
<title>Document</title> 网页的标题
</head>
<body>
</body>
</html>
一般来说head和body不缩进
head内部一般写的是一些看不见的元素
- 章节标签 主要作用：表示文章/书的层级
- 标题 h1～h6
- 章节 section
- 文章 article
- 段落 p
- 头部 header
- 脚部 footer
- 主要内容 main
- 旁支内容 aside
- 划分 div
以下为练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>顶部广告</header>
<div>
<main>
<h1>文章标题</h1>
<h2>副标题</h2>
<section>
<h2>第一段</h2>
<p>这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段</p>
<section>
<h3>1.1节</h3>
<p>这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容</p>
</section>
<section>
<h3>1.2节</h3>
<p>这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容</p>
</section>
</section>
</main>
<aside>参考资料：意为 也是内容里面的东西，但是我不是主要内容，是旁支内容</aside>
</div>
<footer>©版权所有</footer>
</body>
以下为Output截屏
- 全局属性 意为：所有标签都有的属性
- class
- contenteditable
- hidden
- id 一般不使用，唯一性无法保证
- style
- tabindex
- title 以下为练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.middle{
background: black;
color: white;
}
.bordered{
border: 10px solid red;
}
#xxx{
border: 10px solid yellow;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<header id="xxx" style ="border: 10px solid green;" tabindex=1 title="完整的内容">顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告</header>
<div class="middle bordered" contenteditable tabindex=2>
<main>
<h1>文章标题</h1>
<h2>副标题</h2>
<section>
<h2>第一段</h2>
<p>这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段</p>
<section>
<h3>1.1节</h3>
<p>这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容</p>
</section>
<section>
<h3>1.2节</h3>
<p>这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容</p>
</section>
</section>
</main>
<aside>参考资料：意为 也是内容里面的东西，但是我不是主要内容，是旁支内容</aside>
</div>
<footer>©版权所有</footer>
</body>
以下为Output截屏
小tips：
- class 最常用的属性
- contenteditable 让用户可以直接编辑内容
- hidden 隐藏标签
- id 有唯一性 但尽量不用 因为window里有很多已经定义好的全局属性，不可以和这些属性同名。
- style 优先级：JS > HTML的style标签 > CSS
- tabindex 按tab键顺序访问 正数，如tabindex=1 / 2/ 3/，表示按顺序访问
- 0， 表示最后访问
- -1， 表示不要用tab访问
- title 当鼠标移动到省略的地方上时，可以浮动地显示完整内容
作者：xulei1998 链接：juejin.cn/post/703367… 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
- 默认样式
- 为什么有默认样式：因为HTML被发明的时候，还没有CSS
- 怎么看默认样式：Chrome开发者工具 Elements -> Styles -> user agent stylesheet
- User Agent 就是浏览器
- CSS reset 默认样式已经不符合我们的需求
我个人常用CSS样式代码
或者抄大厂的代码
- 进入大厂首页
- Chrome开发者工具，找到类似代码
- 复制到自己的项目
- 命名为reset.css
常用的内容标签
- ol + li
- ul + li
- dl + dt + dd
- pre
- hr
- br
- a
- em
- strong
- code
- quote
- blockquote
ol ordered list
ul unordered list
list list item
ol之中只能有li
dl description list
dt description term 描述的谁-被描述的对象
dd description 描述的内容
The dd tag is used to describe a term/name in a description list.
hr 分割线
br 换行
a 超链接
em 表示语气上的强调
strong 表示内容本身的重要性
以下为练习代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<main>
<h1>前端是什么</h1>
<section>
<h2>
<pre>
第一章： <br>工作内容
</pre>
</h2>
<p>前端每天要做的事情有</p>
<ol>
<li>发邮件</li>
<li>跟产品经理撕逼</li>
<li>吃饭</li>
</ol>
<ul>
<li>发邮件</li>
<li>跟产品经理撕逼</li>
<li>吃饭</li>
</ul>
我的同事们有
<dl>
<dt>思思</dt>
<dd>大美女</dd>
</dl>
我会写JavaScript
<code>
<pre>
var a = 1
console.log(a)
</pre>
</code>
<p>
访问网站<a href="http://qq.com" target="_blank">QQ</a>
</p>
<p>
我们期末考试重点是<em>JavaScript</em>
</p>
<p>
我们<em>期末考试</em>重点是<strong>JavaScript</strong>
</p>
欧阳修说过<quote>三上：马上 枕上 厕上</quote>
<br><br>
欧阳修说过<blockquote>三上：马上 枕上 厕上</blockquote>
<section>
<h3>1.1节</h3>
<p>这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容这是1.1节内容</p>
</section>
<section>
<h3>1.2节</h3>
<p>这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容这是1.2节内容</p>
</section>
</section>
</main>
<aside>参考资料：意为 也是内容里面的东西，但是我不是主要内容，是旁支内容</aside>
</div>
<footer>©版权所有</footer>
</body>
以下为Output截屏
