HTML标签起手式
写HTML首先应该写什么?
我们可以把语言改为中文
<html lang="ch-ZN">
章节标签
<h1~h6>-标题<section>-章节article-文章<p>-段落<header>-页面顶部的内容<footer>-页面底部的内容<main>-主要内容<aside>-旁支内容<div>-划分
小tips: ©的写法:
©
全局属性: 所有标签都有的属性
查看HTML默认样式
- 可以通过Chrome开发者工具
- Elements ->styles- >user agent stylesheet查看HTML默认样式
淘宝首页官网样式初始化
class-给代码块用class=xxx做一个标记.XXX-选中所有的类名为XXX的代码块,或者使用[class=XXX],后者的不便之处在于类名必须与XXX完全一致,用.XXX可以匹配关键字中被空格分隔的一部分。contenteditable-带这个标签的元素可以被用户编辑。hidden-隐藏标签id-与class类似,但是原则上id是唯一的,class是不唯一的。但是由于id重复也不会报错,不到万不得已不要用id,用class。另外,在JS中可以直接使用id名称修改元素h.style.border = "10px solid green";但不提倡用这种写法, 因为这种写法对id的命名有要求,比如用parent, top, self等命名id就不行。因为window里有很多已经定义好的全局属性,不可以和这些属性同名。style-html的属性,优先级高于标签,但是JS又高于style。
JS > HTML的style标签 > CSS 例如:
1.#h{ border:10px solid red; }-在head中
2.<header id="h" style="border:10px solid green;" >-在body的header中
3.h.style.border="10px solid black";-在JS中最终效果是黑色。
-
tabindex-控制使用tab响应的顺序 1.正数,如tabindex=1 / 2/ 3/,表示按顺序访问
2.注意0是最后一个,
3.-1是无法选择到此处。 -
title-对于超出页面部分需要用省略号的情况: -
- 用来显示完整内容
-
- 应用场景:文字超长变省略号
-
- 单行文字溢出:
- 调整css
white-space: nowrap;不要换行text-overflow: ellipsis溢出的部分用....overflow: hidden;溢出的部分隐藏
内容标签
1.ol+li -有顺序的列表(ordered + list iten)
- ol表示有序的列表,li表示列表里面的某一项
2.
ul+li-沒有順序的列表(ynordered list + list item) - ul表示没有顺序的列表
3.
dl+dt+dd-描述性的列表(description list + term +data) dl用来描述一个东西,dt里面写的是描述的谁,dd里面写的是描述的内容 4.pre-保留空格,回车,Tab。 由于在HTML中,多个连续的空白会缩成一个空格,而在pre标签中,这些空白都会保留。(preview的缩写)
5.hr-分割线
6.br-回车(break的缩写)br是用来换行的 7.a(anchor的缩写)
8.em-表示强调(emphasis)
9.strong-加粗em表示语气上的强调strong表示内容本身很重要 10.code-代码片段code里面的字体是等宽的 11.q-引用(quote的缩写)- quote默认表示行内引用
blockquote-换行引用
- 表示结构里引用