《HTML入门笔记1》

2021-07-03 283 阅读2分钟

1.Tim Berners-Lee 发明了HTML (同时发明了WWW、HTTP和URL)

2.HTML的起手式

3.常用的表章节的标签

标题 h1~h6
章节 section
文章 article
段落 p
头部 header
脚部 footer
主要内容 main
旁支内容 aside
划分 div
©的写法：©

4.全局属性

class
contenteditable
hidden
id
- 加上id以后可以调css
- 加上id以后可以用js id.style.border = "1px solid red"
style
- 设置内联样式
- 对于style的优先级：JS > HTML的style标签 > CSS
tabindex
- 正数，如tabindex=1 / 2/ 3/，表示按顺序访问
- 0，表示最后访问
- 1，表示不要用tab访问
title

用来显示完整内容
应用场景：: 文字超长变省略号
单行文字溢出：: 调整css; white-space: nowrap; 不要换行; text-overflow: ellipsis 溢出的部分用....; overflow: hidden; 溢出的部分隐藏
输入 title="完整的内容" 当鼠标移动到省略的地方上时，可以浮动地显示完整内容

5.内容标签

<code></code> 代码

var aaa = 1;
console.log(a)

hr水平分隔线
br 换行
ol li 有序列表
ul li 无序列表
dl + dt 要描述的对象 + dd 要描述的内容
<em>和<strong> 表示强调
- em 表示语气上的强调
- strong 表示内容本身很重要
quote 行内引用
blockquote 换行的引用拓展：HTML 代码里的多处空格、回车、tab 等内容，默认会被转化为一个空格如果想保留多处空格、回车、tab等，就要用pre <pre></pre> 保留空格、回车键；其他标签会把多余的空格和回车键转换为一个空格

6.reset.css 修改HTML默认样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

本文为fjl的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

友情链接：