HTML入门笔记1

462 阅读4分钟

常见单词

  • 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起手式

  • lang,title改,其他不需要改

直接动手写(抄)一个章节部分吧!

  1. 我们在body标签里动手
  2. 用h1标签写一个标题,为了规范只能有这么一个h1
  3. 要开始写章节了,章节就是section标签!章节要标题,所以加一个h2标签,正文就用p标签
  4. 每一章里面如果有小节,那么就应该按照章里有节的逻辑顺序,章的section标签里面写一个表示小节的section标签,同样的可以加标题h3标签,正文p
  5. 写一个header标签和footer标签,位于body内部的顶和底(好理解),可以放广告嘛
  6. 写一个main标签,包住什么代码就表示这个范围内的内容属于一个主要部分(毕竟广告什么的可以不用动)
  7. 有main就可以有aside,写在main外面哦,我用来写了“上一章和下一章”
  8. 我的footer标签写的是版权所有,用代码©xxx

预览一哈

全局属性

  • class
  • contenteditable
  • hidden
  • id
  • style
  • tabindex
  • title

class

  1. 修改div标签,改成<div class="middle">
  2. 在head标签里加一个style标签,写上```[class=middle]{background: black;color: white;}有没有空格并不影响
  3. 虽然还是那么丑。

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还没有出生
  • 怎么看默认样式?
    1. Chrome开发者工具
    2. 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标签内