常见的HTML标签

作者: LouisJ | 来源:发表于2017-12-05 16:38 被阅读0次

CSS课程1
HTML标签的权重
## HTML基础-常见标签
HTML常见标签
HTML常见标签
HTML常见标签
Html 常见标签
HTML常见标签
HTML常见标签
html常见标签

1.h1~h6 标题

h1代表一级标题
h2~h6依次递减

2. p 段落

表示大段文字，用标签p包括

3. a 链接，链接到一个地址（包含各种属性）

image.png
href属性：必备属性，表示链接的地址。href="#"锚点,页面不跳转，也不刷新；href="#about"当前页面定位到id=about的位置；href="/getcourse"中/代表根路径
target属性：_blank 表示在新窗口打开
title属性：表示鼠标指到此位置出现的文字

举例

image.png

4.图片（只闭合标签，最后不需要加 /）
<img src="a.png" alt="头像">: a.png部分可以是图片链接，alt部分可理解为备注（图裂时的图片字样）

5.div：语义为“一大块”，用于给页面划分区块，让结构更清晰

<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>

为了便于对某个版块进行样式等的操作，需设置标签来找到对应的部分，有两种：id和class
id属性：给某个元素起一个独一无二的名字，直接注明这个板块是做什么的
class属性：表示一类，不同的东西可以都标上class，那么操作时是对这一类的class标记的目标做改变

6.ul li

ul: unsort list 无序列表
用于表示并列的内容
ul的直接子元素是li（ul的下面不可以是段落p或其他！）
可以嵌套

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li>
    <a href="#">更多</a>
    <ul>
      <li>联系</li>
      <li>地址</li>
    </ul>
  </li>
</ul>

举例：一个网页的导航栏，含有首页、关于、更多的标签，这些都是并列的；联系、地址作为更多的二级菜单，可嵌套

7.ol li:ol: order list 有序序列表用于表示带步骤或者编号的并列内容 ol的直接子元素只能是li 可以嵌套
举例:

<h2>把大象关到冰箱的步骤</h2>
<ol>
  <li>把大象变小</li>
  <li>打开冰箱</li>
  <li>把大象塞进去</li>
</ol>

image.png

图中的aaa、bbb、ccc之间无明显顺序，倾向于使用无序列表，而后面的装大象存在明显步骤，倾向于使用有序

8.dl dt dd：用于展示一系列 “标题:内容... ”的场景

<dl>
  <dt>商品名称:</dt>
  <dd>青花瓷</dd>
  <dt>特征:</dt>
  <dd>白色</dd>
  <dd>圆口</dd>
  <dt>商品介绍</dt>
  <dd>这是一个年代久远的瓷器，很贵，易碎</dd>
</dl>

image.png
dl：表单
dt：title 标题
dd：discription 描述

9.button：按钮
<button>点我</button>

image.png

10.strong em span(重要性存在区别)

em 需要强调一下
strong 很重要、强调性更强

<p>优惠 <strong>100</strong> 元</p>
<p>小谷 <em>2</em> 岁了</p>

举例

image.png
图中的span标签可后期直接被css操作，改变样式，而不需对段落进行操作

11.iframe：用于嵌入一个页面注意跨域操作问题
举例

<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPage">W3Cschool.cc</a></p>

image.png
点击链接后的效果

image.png
注：

跨域问题，若iframe中链接与当前页面的域名不同，只能对iframe中的链接作展示，无法使用js进行操作。
iframe的作用，举例，一个网页上有个表单，可通过js获取到这个iframe，进行引用，操作。

12.table：用于展示表格，不要用来做布局 thead tbody tfoot可省略，浏览器会自动添加 border-collapse: collapse;用于合并边框

举例

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年纪</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>姓名</th>
      <th>年纪</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>18</td>
    </tr>
    <tr>
      <td>小花</td>
      <td>20</td>
    </tr>  
  </tbody>
  <tfoot></tfoot>
</table>

image.png
tr：一行，table roll
td：一列
th：标题

<html></html>:网页的所有内容都在这个标签内
<html lang="zh">:说明当前页面的语言类型，zh为中文，包含简体和繁体。有时打开网页提示：“当前页面为英文，是否翻译为中文”，浏览器能识别出当前页面语言内容，就是依靠这个标签
<head></head>:这其中的内容与页面内容无关

meta标签

<meta charset="utf-8">：charset说明当前网页编码方式，如果不说明，浏览器自动猜测编码方式，如果没猜对，会出现乱码。页面保存的是什么编码方式，charset就指明对应的编码方式，以免出现乱码。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">:对于双核浏览器，如果是IE，用最新的版本渲染，如果是chrome，就用极速内核渲染
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">让页面在移动端展示比较合理
使用此代码
image.png
未使用此代码
image.png