HTML入门笔记1

蓝笔头
304 阅读3分钟

HTML入门笔记1

1. HTML概述

HTML全名是“超文本标记语言”(Hyper Text Markup Language)，上世纪90年代由欧洲核子研究中心物理学家Tim Berners-Lee(蒂姆-伯纳斯-李)发明。HTML已由当时的18个标签演变成现在110个标签。(\color{gray}{哈哈，有没有被吓到}）

2. HTML起手式

英文状态下的!+Tab 键可以快速生成如下图所示的HTML起手：

HTML起手式

  • 简单解析一下上图序号处的意思：

    ① 原点表示文件处于未保存状态；

    ② 指明文档类型，告诉浏览器如何解析网页；

    ③ 此处可以将lang改成\color{red}{zh-CN}状态；

    ④ 文件的字符编码，该设置如果不正确，浏览器可能无法正确解码，就会出现乱码；

    ⑤ 禁用缩放兼容手机；

    ⑥ ie=edge是告诉IE使用最新内核；

    ⑦ 书写标题；

    注：只有③和⑦可以更改，其它的语句最好不要动；

3.常用的章节标签：

表示文章/书的层级:

  • <h1>~<h6> 标题
  • <section> 章节
  • <article> 文章
  • <p> 文章段落(paragraph)
  • <header> 头部
  • <footer> 脚部
  • <main> 主要内容
  • <aside> 旁支内容
  • <div> 一个区块(division)

部分标签效果图：

4.全局属性

所有标签都有的属性:

  • class 用来对网页元素进行分类，不同class属性值相同代表它们是一类；元素也可以具有多个class，它们之间可用空格分隔

    效果图如下：

    注:上面的效果图针对元素具有多个class的情况，代码写起来会比较繁琐，所以可以换用CSS简单的语法，效果同上图：

    .middle{
    blackground: black;
    color: white;
}
.bordered{
    border: 4px solid red;
}

  • contenteditable 允许用户编辑内容

    contenteditable的花样用法：实现用户在界面上编辑自己想要的结果

  • hidden 网页中不会看到的内容

    注:CSS的可见性设置高于hidden属性，即如果CSS设置某元素可见，那么hidden属性将无效

  • id 虽然是全局唯一标识符，但是创建两个id时，并不能给予提醒，所以少用

  • style 用来指定当前元素的CSS样式

  • tabindex Tab的顺序(index)，实现不用鼠标就可以遍历网页的元素 其属性是一个整数：

    • 正整数：顺序访问；
    • 0： 最后一个访问；
    • 负整数： 不会被访问到

  • title 为元素添加附加说明，当鼠标悬浮在上面会将完整的内容显示出来

5.常用的内容标签

  • <ol> 有序列表容器(ordered list)，会在列表项前面产生数字编号

    效果图如下所示：

  • <ul> 无序列表容器(unordered list)，会在内部列表前面产生实心小圆点

    效果图如下所示：

  • <dl>,<dt>,<dd>

    <dl>表示一术语的列表(description list)，术语名(description term)由<dt>标签定义，术语解释(description detail)由<dd>标签定义

    效果图展示：

  • <pre> 意思是保留原来的格式(preformatted)，浏览器会保留改标签内部原始的换行和空格，且以等宽字体显示标签内容

  • <code> 表示标签内容就是代码 如果想表示多行代码，code标签必须放在pre内部

    <pre>标签+<code>标签的搭配使用效果图：

  • <hr> 水平线，单独使用，无闭合标签

  • <br> 换行，单独使用，无闭合标签

  • <a> 设置链接

    效果图

    注：其中target="_blank"代表链接在新标签中打开

  • <em> 表示强调(emphasize)，以斜体显示

  • <strong> 强调内容的重要性，以加粗的字体显示

  • <quote> 表示引用，不会产生换行

  • <blockquote> 同<quote>一样也表示引用，会产生换行

备注：以上笔记有查阅网道

avatar
文章
阅读
粉丝