阅读 124

【HTML全解】HTML标签

英语小课堂

英语.png

HTML起手式

首先我们写什么呢

起手式.png

我们可以把语言改为中文,标题改成自己想要的,其他不改。

章节标签

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

小tips: ©的写法: ©

章节标签.png

全局属性:所有标签都有的属性

  • class
    给标签分类 <div class="middle bordered"></div>

  • contenteditable
    让用户可以直接编辑内容

  • hidden
    隐藏标签

  • id
    加上id以后可以调css
    加上id以后可以用js
    id.style.border = "1px solid red"
    但不提倡用这种写法, 因为这种写法对id的命名有要求,比如用parent, top, self等命 名id就不行。因为window里有很多已经定义好的全局属性,不可以和这些属性同名。 所以不到万不得已不要用id,用class

  • style
    设置内联样式
    对于style的优先级: JS > HTML的style标签 > CSS

  • tabindex
    正数,如tabindex=1 / 2/ 3/,表示按顺序访问
    0, 表示最后访问
    -1, 表示不要用tab访问

  • title 用来显示完整内容
    应用场景:文字超长变省略号
    单行文字溢出:
    1、调整css
    2、white-space: nowrap; 不要换行
    3、text-overflow: ellipsis 溢出的部分用....
    4、overflow: hidden; 溢出的部分隐藏
    但我希望,当鼠标移动到省略的地方上时,可以浮动地显示完整内容,就可以在title="完 整内容",即可

全局属性.png

如何让<style>标签显示在页面上?

<style>放在<body>里面
然后设置 style {display: block}
js.jirengu.com/xevecakopu/…

清除默认样式 rest.css

清除默认样式的代码点击:Here

清除默认样式.png

内容标签

  • ol + li (ordered list + list item)
    有序列表+列表中的一项
  • ul + li (unordered list + list item)
    无序列表+列表中的一项
  • dl + dt + dd (description list + d term + dd)
    描述列表 + 要描述的对象+ 描述的内容
  • pre
    <pre></pre> 保留空格、回车键;没有这标签,无论多少空格,都默认多余的空格和回车键转换为一个空格
  • code
    <code></code> 写入代码用的
    如果需要写换行的代码,嵌套一个pre标签即可
    <pre><code>var aaa = 1; console.log(a)</code></pre>
  • hr 水平分隔线
  • br 换行
  • a 用来超链接的
    target="_blank" 增加这个可以达到新窗口打开,不加就在当前页面打开(鼠标中键可以新窗口打开),中国习惯新窗口打开
  • em和strong 表示强调
    em 表示语气上的强调
    strong 表示内容本身很重要
  • quote 行内引用
  • blockquote 换行的引用

内容标签1.png 内容标签2.png

文章分类
前端
文章标签