HTML5 常用标签锚列表用法

2020-04-18 08:03 254人阅读评论(0)

寒假已经过去15天了，html、css、javascript、vue都已经匆匆过了一遍。再过两天就要过年了，趁过年前把这些刚刚学过的知识整理一下，然后试着做几个具体项目练练手。本文是第一篇——html。将不定期更新，把接触到的内容及时填补到本文中。

IDE推荐使用HBuilder X，其次是VScode。

HTML5 总结本文

CSS3 总结点击这里

首先HTML是超文本标记语言（简称：HTML）。是WEB前端必备的技能之一。其中ML是标记语言，是用一种文本标记描述结构化数据的形式语言。


  
   
    
     
    
    
     
      <!DOCTYPE html>
     
    
   
    
     
    
    
     
      <html>
     
    
   
    
     
    
    
     	
      <head>
     
    
   
    
     
    
    
     		
      <meta charset="utf-8" />
     
    
   
    
     
    
    
     		
      <title>
      </title>
     
    
   
    
     
    
    
     	
      </head>
     
    
   
    
     
    
    
     	
      <body>
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     	
      </body>
     
    
   
    
     
    
    
     
      </html>

其中<!DOCTYPE html> HTML5 对其进行了简化，只支持html这一种文档类型。
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

首先是html5新增的各种元素


  
   
    
     
    
    
     
      <header>111
      </header>
      <!-- 页头 -->
     
    
   
    
     
    
    
     
      <nav>222
      </nav>
      <!-- 导航 -->
     
    
   
    
     
    
    
     
      <section>
      <!-- 页面分块 -->
     
    
   
    
     
    
    
     	
      <article>333
      </article>
     
    
   
    
     
    
    
     
      </section>
     
    
   
    
     
    
    
     
      <aside>444
      </aside>
      <!-- 侧边栏 -->
     
    
   
    
     
    
    
     
      <footer>555
      </footer>
      <!-- 页尾 -->


  
   
    
     
    
    
     
      <mark>aaa
      </mark>
      <!-- 标黄 -->
     
    
   
    
     
    
    
     
      <meter max="100" min="0" value="91" οninput="90"> 
      </meter>
     
    
   
    
     
    
    
     
      <!-- 
     
    
   
    
     
    
    
     
      high:定义度量值位于哪个点，被认为是高的值
     
    
   
    
     
    
    
     
      low:定义度量值位于哪个点，被认为是低的值
     
    
   
    
     
    
    
     
      max:最大的度量值 默认1
     
    
   
    
     
    
    
     
      min:最小的度量值 默认0
     
    
   
    
     
    
    
     
      oninput:最佳的度量值
     
    
   
    
     
    
    
     
      value:当前所处的度量值 -->
     
    
   
    
     
    
    
     
      <progress max="100" value="85">
      </progress> 
      <!-- 进度条 -->
     
    
   
    
     
    
    
     
      <progress>
      </progress>
      <!-- 不加属性即为动态滑动的滚动条 -->
     
    
   
    
     
    
    
     
      <details>
      <!-- 手动展开栏 -->
     
    
   
    
     
    
    
     	
      <summary>标题
      </summary>
     
    
   
    
     
    
    
     
      	详细内容
     
    
   
    
     
    
    
     
      </details>
     
    
   
    
     
    
    
     
      <menu>
      <!-- 带事件的按钮 -->
     
    
   
    
     
    
    
     	
      <command οnclick="alert('hello world!')">按钮
      </command>
     
    
   
    
     
    
    
     
      </menu>
     
    
   
    
     
    
    
     
      <!-- contenteditable：是否可编辑内容 -->
     
    
   
    
     
    
    
     
      <!-- hidden:是否隐藏 -->
     
    
   
    
     
    
    
     
      <input type="text"contenteditable="true" hidden="false"/>
     
    
   
    
     
    
    
     
      <textarea rows="8" cols="8" spellcheck="true">
     
    
   
    
     
    
    
     	
      <!-- spellcheck属性是对其进行拼写检查 -->
     
    
   
    
     
    
    
     
      </textarea>

其次是基本所有的标签都可以使用的百搭属性，非常常用，值得背一下

1.class 用于绑定css属性


  
   
    
     
    
    
     
      <h2 class="red">文字
      </h2>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <style type="text/css">
      
     
    
   
    
     
    
    
     	
      .red{
     
    
   
    
     
    
    
     		
      color: red;
     
    
   
    
     
    
    
     
      	}
     
    
   
    
     
    
    
     
      </style>

2.id 用于区分组件

<h2 id="hid">文字</h2>

3.style 在标签内部绑定样式

<h2 style="color: red; width: 100px;">文字</h2>

4.title 鼠标长放提示的信息

<h2 title="提示文本">文字</h2>

5.align 对齐属性

<h2 align="center">文字</h2>

接着是各式各样常用的标签：

<h1>~<h6>

标题标签，标题、副标题、章、节……

<h2>文字</h2>

<p></p>

段落标签，上下都有空行

<p>文字</p>

<br>

换行标签

<br>

<hr>

水平线标签

size为水平线的粗细

color为水平线的颜色

width为水平线的宽度

<hr size="7" color="black" align="center" width="200px"/>

<link>

用于导入外部css样式

<pre></pre>

原样显示文字标签，保留空格和回车符

<pre>文本    文本续</pre>

<center></center>

居中

<center>文本</center>

<span></span>

行内文本容器，为了突出某些文字的特殊效果，不换行。

<h2>啦啦啦<span class="ar">呵呵呵</span>啦啦啦啦</h2>

<figure>

用于定义独立的流内容。


  
   
    
     
    
    
     
      <figure>
     
    
   
    
     
    
    
     	
      <figcaption>图片
      </figcaption>
     
    
   
    
     
    
    
     	
      <p>图片说明
      </p>
     
    
   
    
     
    
    
     	
      <img src="img/tupian1.jpg" />
     
    
   
    
     
    
    
     
      </figure>

<a><a>

超链接标签

target为打开链接的方式

_blank为在新窗口打开该链接

_self 在同页面覆盖打开链接

其中图片超链接指的是在<a>标签中加<img>标签

<a href="http://www.baidu.com" target="_blank">文字</a>

锚链接

指的是因为一个页面过长导致拖动滚动条不方便浏览的时候，有一种方法，点击某个超链接立即跳转到该部分。

具体方法是：在超链接href属性前置#，属性为需要链接的id属性，可以是<h2>、<p>等其他。


  
   
    
     
    
    
     
      <a href="#one">段落1
      </a>
      <br>
     
    
   
    
     
    
    
     
      <a href="#two">段落2
      </a>
      <br>
     
    
   
    
     
    
    
     
      <a href="#three">段落3
      </a>
      <br>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <hr >
     
    
   
    
     
    
    
     
      <p id="one">段落1
      </p>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <p id="two">段落2
      </p>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <p id="three">段落3
      </p>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>

字体物理类型标签：


  
   
    
     
    
    
     
      <b>aaa
      </b>
      <!-- 加粗 -->
     
    
   
    
     
    
    
     
      <i>aaa
      </i>
      <!-- 倾斜 -->
     
    
   
    
     
    
    
     
      <tt>aaa
      </tt>
      <!-- 打印机字体 -->
     
    
   
    
     
    
    
     
      <u>aaa
      </u>
      <!-- 加下划线 -->
     
    
   
    
     
    
    
     
      <strike>aaa
      </strike>
      <!-- 加删除线 -->
     
    
   
    
     
    
    
     
      <sub>aaa
      </sub>
      <!-- 下标显示 -->
     
    
   
    
     
    
    
     
      <sup>aaa
      </sup>
      <!-- 上标显示 -->
     
    
   
    
     
    
    
     
      <big>aaa
      </big>
      <!-- 较大字体显示 -->
     
    
   
    
     
    
    
     
      <small>aaa
      </small>
      <!-- 较小字体显示 -->

特殊符号：


  
   
    
     
    
    
     
      &nbsp; 空格
     
    
   
    
     
    
    
     
      &lt; 
      <
     
    
   
    
     
    
    
     
      &gt; >
     
    
   
    
     
    
    
     
      &amp; &
     
    
   
    
     
    
    
     
      &quot; "
     
    
   
    
     
    
    
     
      &copy; ©
     
    
   
    
     
    
    
     
      &reg;  ®
     
    
   
    
     
    
    
     
      <!-- 注释 -->

列表类：

ul-li：无序列表

type为前面的标识。square为正方形，circle为圆圈，disc(默认)为点。


  
   
    
     
    
    
     
      <ul type="square">
     
    
   
    
     
    
    
     	
      <li>
     
    
   
    
     
    
    
     
      		1
     
    
   
    
     
    
    
     	
      </li>
     
    
   
    
     
    
    
     
      </ul>

ol-li：有序列表

type为类型，可以是1、 A、a、i等。

start为起始。


  
   
    
     
    
    
     
      <ol type="1" start="2">
     
    
   
    
     
    
    
     	
      <li>
     
    
   
    
     
    
    
     
      		aaa
     
    
   
    
     
    
    
     	
      </li>
     
    
   
    
     
    
    
     
      </ol>

dl-dt定义性列表省略......

<img />图片标签

src：图片URL地址

border：图片的边框宽度

hspace、vspace：图片左右、上下间距

alt：图片替代掉的文本

<img src="img/tupian1.jpg" border="2px"/>

注：最后修改时间：2020年1月23日

转载：https://blog.csdn.net/qq_41464123/article/details/104071934

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

HTML5 常用标签锚列表用法

IDE推荐使用HBuilder X，其次是VScode。

HTML5 总结本文

CSS3 总结点击这里

首先HTML是超文本标记语言（简称：HTML）。是WEB前端必备的技能之一。其中ML是标记语言，是用一种文本标记描述结构化数据的形式语言。

首先是html5新增的各种元素

其次是基本所有的标签都可以使用的百搭属性，非常常用，值得背一下

接着是各式各样常用的标签：

<h1>~<h6>

<p></p>

<br>

<hr>

<link>

<pre></pre>

<center></center>

<span></span>

<figure>

<a><a>

锚链接

字体物理类型标签：

特殊符号：

列表类：

ul-li：无序列表

ol-li：有序列表

<img />图片标签

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

HTML5 常用 标签 锚 列表 用法

IDE推荐使用HBuilder X，其次是VScode。

HTML5 总结 本文

CSS3 总结 点击这里

首先HTML是超文本标记语言（简称：HTML）。是WEB前端必备的技能之一。其中ML是标记语言，是用一种文本标记描述结构化数据的形式语言。

首先是html5新增的各种元素

其次是基本所有的标签都可以使用的百搭属性，非常常用，值得背一下

接着是各式各样常用的标签：

<h1>~<h6>

<p></p>

<br>

<hr>

<link>

<pre></pre>

<center></center>

<span></span>

<figure>

<a><a>

锚链接

字体物理类型标签：

特殊符号：

列表类：

ul-li：无序列表

ol-li：有序列表

<img />图片标签

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场

HTML5 常用标签锚列表用法

HTML5 总结本文

CSS3 总结点击这里