HTML入门

125 阅读3分钟

1. HTML 的由来

HTML是由Tim Bernes-Lee发明的,可称为李博士,自己写了个服务器和浏览器,同时发明了URL+HTTP+HTML,即是WWW(万维网),基于互联网实现了输入地址即可看到网页。

内容共享是互联网的本质。

2. HTML起手式

编辑器中使用叹号+tab键

<!DOCTYPE html>
<!-- doctype表示文档类型-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--防止页面缩放-->
    <title>Document</title>
</head>
<body>
</body>
</html>

3. 常用的表章节的标签有哪些

  • <h1>~<h6>:表示6级标题,从一至六字体大小依次递减 -<section>:表示独立的某个章节,但如果元素的内容作为一个独立的有意义的集合,元素可能是更好的选择。
  • <article>:文档、页面、应用或网站中的独立结构,独立成文章
  • <main>:呈现了文档的或应用的主体部分
  • <aside>:表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。通常是侧边栏或者标注框
  • <p>:表示段落
  • <header>:表示头部信息(页眉),如用来放广告信息
  • <footer>:表示脚注(页脚),可用来放版权说明
  • <div>:用来划分

4. 全局属性

  • class:为某个标签元素添加类名,它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素 contenteditable:添加后使内容可被用户编辑,若使style标签可见,可实现用户实时修改样式 hidden:隐藏元素
  • id:id 用来表示全局唯一的标签,但是id 的全局唯一性没有保障,就算有两个重复的 id,HTML 也不会提示写错了。且id不能使用与全局属性相同单词拼写的名称命名如parent、self、top等等。因此不到万不得已,不用id
  • style:规定元素的行内样式
  • tabindex:tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。tabindex 可以是正数,不必是连续的;tabindex 可以是 0,表示最后才被 tab 访问;tabindex 可以是 -1,表示不可被 tab 访问
  • title:包含了表示咨询信息文本,和它属于的元素相关。鼠标移动上去会显示

5. 常用的内容标签

  • <a>:链接,会添加下划线,需要填写href属性,另有targert属性,设置为"_blank",会在新窗口打开
  • <strong>:表示内容重要,本质上的重要
  • <em>:斜体,表示强调语气
  • <code>:呈现一段代码. 默认情况下, 它以浏览器的默认等宽字体显示
  • <pre>:被<pre>标签包裹的内容可以保留空格、回车、tab,用<pre>包裹住<code>可以较好的展示代码
  • <hr>:水平分割线
  • <br>:break,换行
  • <quote>:内联引用
  • <blockquote>:块级引用
  • <ol>+<li> :有序列表
  • <ul>+<li> :无序列表
  • <dl>+<dt>+<dd> :描述列表,dt写描述谁,dd写描述内容

6. 需要注意的

  • 若同时存在css样式和js修改样式,js优先 css 需要reset默认样式才能更好用,可以参考大厂的reset设置
  • &copy会显示版权标志