常见单词
- heading=标题
- body=身体、正文
- paragraph=段落
- section=章节
- article=一篇文章
- main=主要
- aside=旁边的(次要)
- anchor=锚、定点 /enker/
- strong=强壮、重要
- emphasis=强调、重读
- order=顺序、秩序
- ordered=有序的
- unordered=无序的
- description=描述
- term ----------->术语
- data=数据
- quote=引用/kwout/
- block-------------------->块
- inline---------------------->行内、【计】内联{在一行的里面}
- break=打断
推荐工具
- 网道——HTML电子书
- 每一次的练习新建一个项目
- vscode不要同时打开多个项目
- 一个vscode的格式化插件prettier,搭配配置自动格式化
- 牢记如何问问题
- 怎么得到代码链接?使用JSBin。
- JSBin有缺陷,只能单文件,如果多文件用codesandbox
开始吧!HTML起手式
直接动手写(抄)一个章节部分吧!
- 我们在body标签里动手
- 用h1标签写一个标题,为了规范只能有这么一个h1
- 要开始写章节了,章节就是section标签!章节要标题,所以加一个h2标签,正文就用p标签
- 每一章里面如果有小节,那么就应该按照章里有节的逻辑顺序,章的section标签里面写一个表示小节的section标签,同样的可以加标题h3标签,正文p
- 写一个header标签和footer标签,位于body内部的顶和底(好理解),可以放广告嘛
- 写一个main标签,包住什么代码就表示这个范围内的内容属于一个主要部分(毕竟广告什么的可以不用动)
- 有main就可以有aside,写在main外面哦,我用来写了“上一章和下一章”
- 我的footer标签写的是版权所有,用代码
©xxx
预览一哈
全局属性
- class
- contenteditable
- hidden
- id
- style
- tabindex
- title
class
- 修改div标签,改成
<div class="middle">
- 在head标签里加一个style标签,写上```[class=middle]{background: black;color: white;}有没有空格并不影响
- 虽然还是那么丑。
4. 如果在body里的div写的是
<div class="middle border">
表示两个class,那么style标签里就应该改成
.middle{}.bordered{}
contenteditable (content + editable)
- 标签后面加一个 contenteditable就行了
- 可以使任何一个元素被编辑,比如变成一个文本编辑器
- 把style放进body
<style contenteditable>
style{display: block; border: 1px solid red;}
[class=middle]{background: black;color: white;}
</style>
- 上面代码中,display部分就是让他显示出来,接着的border表示给他个框框,框框的参数颜色等等
- 此时用户可以直接修改style部分代码来实现即时换肤。。
hidden
- 和contenteditor用法一样,直接隐藏元素。可以修改css文件显示回来
id
<xxx id="">
- style里写
[id=""]{ }
或者#xxxx{}
- 如果元素是全页面唯一那就用id,如果不是那就用class
- 不到万不得已,就不要用id,因为就算重复了他不报错
- JS可以直接获取id.比如
xxx.style.border = 'lpx solid green'
- id的取值也有忌讳,许多特殊的值取不了。怎么知道?在浏览器Console写windows.出来的多少都不行
- 新手谨慎使用
style
- 每一个元素能写一个style属性
- 这是针对html的一个属性,不是css,里的那个style是css
- 优先级比css的高
- JS里调用style的话会覆盖了html的
tabindex
<xxxx tabindex=数字>
,正数数字表示次序1,2,3,等等
- 用到情况略少
- 页面中可交互的地方可以用键盘tab过去
- 如果数字是0,表示是最后一个
- 如果数字是-1,表示不要来我这
title
- 鼠标移过去会浮现一个框
<xxx title="想写什么写什么">
默认样式
- 为什么会有默认样式?因为HTML被发明的时候CSS还没有出生
- 怎么看默认样式?
- Chrome开发者工具
- Elements->Style->user agent stylesheet
- User Agent就是浏览器
- CSS reset ?默认样式已经不符合CSS语法了
- 默认样式优先级很低,用户可以自己写css覆盖掉
- 默认样式很丑,我们自己要干吊他,在head里的style里reset他们!
- 你可以抄别人的reset.css:用chrome偷窥代码
内容标签
- ol + li ol= ordered list,有序列表,只能含有li =list item
- ul + li ul= unordered list,无序列表
- dl + dt + dd dl= description list 描述列表,dt =description term,dd=description data(这个data并没有官方明确说明)
- pre 用于保留空格(默认是只显示一个空格or缩进)
- hr 用于整一个分割线
- br 用于换行
- a 超链接.
<a href ="">内容</a>
- em = emphasis,强调,默认样式是斜体,可以自己改
- strong 容易和em混淆,em是语气主观上强调,strong是本身就重要
-** code **用于写等宽距的代码,搭配pre使用
- quote 引用,默认内联,不换行
- blockquote 块级引用,自己会换行,
- 扩展:
target = "_blank"
作用为点开链接时新建窗口,写在a标签内