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标签内
avatar
文章
阅读
粉丝