HTML笔记分享 : 概念+常用标签+html5新增标签

Bonnie努力学前端
231 阅读6分钟

一、关于HTML

Hyper Text Markup Language 超文本标记语言，用来编写网页“骨架”的语言

超文本的含义：

1.超出文字的范畴，除文字外还有图片、声音、视频等 2. 网页中包含超链接文本

标记的含义：标签

1.1 浏览器内核

也称渲染引擎，将前端代码以网页的形式展示出来

1.2 Web标准

  1. 为什么要制定Web标准：浏览器不同，显示页面或排版有差异
  2. 构成
  • 结构：用于对网页元素进行整理和分类，HTML
  • 表现：设置元素的版式、颜色、大小等外观样式，CSS
  • 行为：网页模型的定义及交互编写 JavaScript

二、HTML标签

2.1 骨架标签


<html>
    <head>
        <title> 网页标题 </title>
    </head>

    <body>

        网页内容

    </body>

</html>

2.2 开发工具

我用的是Visual Studio Code，界面是最好看的，相关实用的插件可参考

zhuanlan.zhihu.com/p/448978639

VS可以自动生成HTML骨架标签，输入“!”回车即可，显示如下

<html lang="en"> <!--language 当前网页的语言 en是英文，zh-CN中文-->

<head>

    <meta charset="UTF-8"> <!--字符集，存储各种各样的文字，UTF-8是万国码，基本包含了全世界所有国家需要用到的字符-->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title></title>

</head>

<body>

</body>

</html>

2.3 常用标签

1. 标题标签

<h1></h1>--<h6></h6>

例子：<h1>我是一级标题</h1>

2. 段落标签

<p> </p>

3. 换行标签

<br/>

4. 文本格式化标签

（1）加粗<strong></strong> 或<b></b>

(2) 倾斜<em></em>或<i></i>

(3) 删除线<del></del>或<s></s>

(4)下划线<ins></ins>或<u></u>

5. <div>和<span>

用来布局，他们相当于一个盒子用来装内容

<div>一行只能放一个，大盒子

<span>一行可以放多个，小盒子

6. 图像标签

<imag src="图像URL" />

属性：多个属性需用空格分开

（1）当图像显示不出来时： <imag src="图像URL" alt=“显示不出来时的文字”/>

（2）提示文本：鼠标放在图像上提示的文字 <imag src="图像URL" title=“提示文本”/>

（3）宽度： <imag src="图像URL" width=“500”/>

（4）高度：<imag src="图像URL" height=“300”/>

（5）边框：<imag src="图像URL" border=“15”/>

（6）路径

  • 相对路径：以引用文件所在的位置为参考基础，而建立出的目录路径，也就是说图片相对于HTML页面的位置

    同一级：src=“文件名”

    下一级：src=“图片文件夹/文件名”

    上一级：src=“../文件名” 上一级用..表示

  • 绝对路径：指文件在电脑中的哪个位置 如C:\User……

7. 超链接标签

（1）语法格式

<a href="跳转目标地址" target="目标窗口的弹出方式"> 点击后有超链接效果的文本或图像 </a>

target：_self为默认值，当前页面打开；_blank新窗口打开

（2）链接分类

  • 外部链接: web网址
  • 内部链接: 文件夹下的文件
  • 空链接：点击后不跳转,一般还没设定好跳转到哪里的时候,可以先用空连接代替 href="#"
  • 下载链接：href=“压缩包或应用程序”
  • 网页元素链接：如图片 <a href="http://baidu.com" > <imag src="图像URL" /> </a>
  • 锚点链接：在同一页面上跳转到指定位置 举个栗子:在一个视频播放网站中,点击第二集,会跳到当前页面第二集的介绍模块

第一步：在herf属性中，设置属性值为 #名字 的形式，如<a herf="#two">第二集</a>

第二步：找到目标位置标签，里面添加一个id属性=刚才的名字，如 <h3 id="two">第二集介绍</h3>

（3）默认样式

浏览器自动给链接了一个样式：蓝色 下划线

8. 注释标签

<!--注释文字--> 给代码添加一些注释,方便自己和别人看懂这块代码的意思,不会运行

9. 特殊字符

10.表格标签

（1）表格基本语法

例如一个3*3的表格

<table>

 <!-- 用于定义表格的标签 -->

     <thead> <!--头部区域-->

         <tr> <!-- 用于定义表格中的行，必须嵌套在<table>中 -->

             <th>表头单元格文字</th> <!--表头单元格-->
             <th>表头单元格文字</th>
             <th>表头单元格文字</th>

         </tr>

     </thead>

     <tbody>

         <tr>

             <td> 单元格内的文字 </td>
             <td> 单元格内的文字 </td>
             <td> 单元格内的文字 </td>

             <!-- 用于定义表格中的单元格，必须嵌套在<tr>中 -->

         </tr>
         <tr>

             <td> 单元格内的文字 </td>
             <td> 单元格内的文字 </td>
             <td> 单元格内的文字 </td>

             <!-- 用于定义表格中的单元格，必须嵌套在<tr>中 -->

         </tr>

     </tbody>

 </table>

（2）表头单元格标签

会自动居中及加粗

<th>姓名</th> <th>性别</th> <th>年龄</th>

（3）表格结构标签

头部区域：<thead>表头</thead>

主体区域：<tbody></tbody>

（4）合并单元格

  • 合并方式

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

  • 目标单元格（写合并代码）

跨行：最上侧单元格为目标单元格

跨列：最左侧单元格为目标单元格

  • 合并单元格步骤

第一步：先确定跨行还是跨列

第二步：写合并方式，如<td colspan="2"></td>

第三步：删除多余单元格

11. 列表标签

（1）无序列表

  • 语法：
<ul>

<li>列表项1</li>

<li> 列表项2 </li>

<li> 列表项3 </li>

……

</ul>
  • 特点：没有顺序之分；<ul>里面只能嵌套<li>; <li>中可以放任何元素
  • 去掉小圆点的css代码
li{

list-style:none;

}

（2）有序列表

  • 语法：
<ol>

<li>列表项1</li>

<li> 列表项2 </li>

<li> 列表项3 </li>

……

</ol>
  • 特点：有顺序，列表排序以数字来显示

（3）自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

  • 语法：
<dl>

<dt>名词</dt>

<dd>名词1解释</dd>

<dd>名词2解释</dd>

</dl>
  • 特点：
    中只能嵌套

12. 表单标签

why？

收集用户信息

组成

  1. 表单域：整个表单

<form>会把它范围内的表单元素信息提交给服务器

语法：

<form action="后台url地址" method=“提交方式” name=“表单域名城”>

各种表单元素控件

</form>
  1. 表单控件：框框、按钮

(1) input:输入表单元素 <input type="属性值"/>

HTML5新增类型：

（2）属性：

HTML5新增属性：

  • 单选radio怎么实现多选一：单选按钮的name都一样
  • 输入框中的默认输入、按钮的值：value
  • value值单击时文字还在，placeholder单击输入框时文本还在，输入时文本消失
  • <label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将光标转到对应的表单元素上，用来增强用户体验： 两个名字要一样

<label for="男"> 我是男孩</label> <input type="radio" name="sex" id="男">

（3）select：下拉表单元素

  • 语法：
<select>

    <option> 下拉选项1 </option>

    <option> 下拉选项2 </option>

    <option> 下拉选项3 </option>

</select>
  • 注意：

至少包含一对<option>；

在<option>中定义 selected=“selected”时，当前项即为默认选中项

（4）textarea：文本域

用于多行文本输入

  • 语法：
<textarea >

</textarea>

13. 多媒体标签（HTML5新增）

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件

（1）音频标签

尽量使用.mp3格式

<audio scr="文件地址" ></video>

（2）视频标签

尽量使用.mp4格式的文件

<video scr="文件地址" autoplay="autoplay" muted="muted"></video>

14. 语义化标签（HTML5新增）

以前布局，基本用div来做，div对于搜索引擎来说是没有语义的

  • <header>：头部标签
  • <nav>：导航标签
  • <artical>：内容标签
  • <section>：定义文档某个区域
  • <aside>：侧边栏标签
  • <footer>：尾部标签

注意：

  • 这种语义标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • IE9中，需要把这些元素转换为块级元素
  • 其实，移动端更喜欢用这些标签

15. 如何查阅文档

大量标签记不住，www.w3school.com.cn

avatar
文章
阅读
粉丝