3.2 HTML中级 - 常用标签（上） | html5教程，html高频常用标签，html教程，html css，html5，html模板

发布于：2023-01-04 ⋅ 阅读:(189) ⋅ 点赞:(0)

3.2 HTML中级 - 常用标签（上）

目录

头部标签补充

转义字符 ( 字符实体 )

修饰标签 h b i em sub sup del br

a 链接

img 图片

Table 标签

三种列表 ul ol dl

video 视频

audio 音频

iframe 框架

头部标签补充

    单词表

计算机单词

全称

翻译

rel

relationship

关系

href

hypertext reference

超文本 参考

script

脚本

src

source

资源

直译的单词

name名称   keywords 关键词   content 内容   description 详细描述   stylesheet 样式表

 
<head>
        <meta charset="UTF-8"> 
        <meta name="keywords" content="关键词，逗号隔开">     建议100个字节内，即30个汉字内。
        <meta name="description" content="详细描述，逗号隔开">   200个字节内，即60个汉字内。
        <title>标题，逗号隔开</title>    60个字节内，即20个汉字内，一个最佳，最多不要超过3个。
        <link rel="stylesheet" href="css文档地址">   rel 定义文档关系，这表示引用的文件是样式表。
        <script src="js地址"></script>
        <script>
        	此处直接添加js代码，建议放尾部</body>前，因为有些js要等html元素加载完执行
        </script>
        <style>  
	此处直接添加css代码，如 p {color: red;}  
        </style>
</head>

         知识点：

        1、1个字节=一个英文字母、空格或符号，UTF-8编码中，1个汉字或标点符号占3-4个字节，所以计算长度是1个汉字≈3.5个字节。

        2、seo权重：title最高，其次是h1，keywords，description等

转义字符 ( 字符实体 )

        空格( ): &nbsp;       小于(<) &lt;      小于等于(≤) &le;      大于(>) &gt;      大于等于(≥) &ge;      

        和号(&) &amp;       双引号(") &quot;    元(¥) &yen;      版权(©) &copy;      注册商标(®) &reg;      

        乘号(×) &times;      除号(÷)&divide;    

修饰标签 h b i em sub sup del br

计算机单词

全称

翻译

h1~h6

heading

标题 标题 标题 标题 标题 标题

b

bold

粗体

i

italic

斜体

em

emphasize

强调并斜体

sub

subscript

下标

sup

superscript

上标

del

delete

删除线

br

break

打断

换行

直译的单词

strong 强调并加粗    small 小号   

                  

        HTML 修饰标签 示例

<body>
        <h1>h1 标题  一个页面只能有一个h1。</h1><h2>h2 标题</h2><h3>h3 标题</h3><h4>h4标题</h4><h5>h5标题</h5><h6>h6标题</h6> 
        <p> p常规字样
        	<b> b 加粗 </b><br />
        	<strong> strong 强调加粗 </strong><br />
        	<i> i HTML变斜 </i><br />
        	<em> em 强调加粗变斜 </em ><br />
        	<small> small 变小 </small><br />
        	<sub> sub 下标 </sub><br />
        	<sup> sup 上标 </sup><br />
        	<del> del 删除线 </del><br />
        </p>
</body>

        小知识：

        1、html中多个空格呈现在网页上的效果是一个空格，如果需要多个空格，请输入&nbsp;

        2、<br />是换行标签

a 链接

计算机单词

全称

翻译

  a

anchor

锚

直译的单词

target 目标

        <a href="url"  target="打开方式">链接文本</a>  

        (1) href="url" ： url：译为地址，填链接；

        (2) href="#某个name"， 锚链接。 href #号后面的值=锚点元素的name值，注意不是id值。还可以在#前面加网址，效果是变成跳转到某个页面后直接到指定的name相同的位置。

        (3) target的值，即打开方式主要有两种： _self或不写，会覆盖当前页面； _blank，会打开新页面。

        小知识：

        1、做QQ聊天链接功能：百度搜“QQ推广”-登录自己的账号-推广工具-写上提示语，复制链接即可。当然你的img 的src可以随便换。

        2、利用锚链接可以快速实现置顶、置底功能。

img 图片

缩写

全称

翻译

img

image

图片

alt

alter

改变

直译

loading 下载

        <img src="url" alt="Good luck!" title="悬停自定义文字"  loading="lazy" width="100px" height="100px">

        url:  资源地址

        alt:  图像显示不出来时的替代文本。

        loading： lazy（懒的），图像延迟加载，鼠标滚动到该图片所在位置显示。实测无效！       

        eager ( 迫不及待的），默认，图像立即加载。 width和height：规定图片宽高

        路径url在springboot中怎么写？

                springboot默认从resouces目录下找：

                有个简单的记忆方法是把resources看成 ../

                比如右图的keep.html，路径是 ../templates/keep.html

   

Table 标签

缩写

全称

翻译

thead

table head

表格 头部

tr

table row 

表格 行

th

table header

表格 标题

td

table data

表格 数据

rowspan

row span

行 跨度，跨行

colspan

column span

列 跨度，跨列

直译

caption 说明文字   

 
<table>
       <caption>表格说明</caption>
       <thead>
             <tr><th colspan="3">姓名表 表格标题
	       colspan="3"</th></tr>
       </thead>
       <tbody>
             <tr>
                     <td rowspan="">男生 rowspan="2"</td>  <td>小明</td>  <td>小天</td>
             </tr>
             <tr>
                     <td rowspan="">女生 rowspan="2"</td>  <td>妮妮</td>  <td>好好</td>
             </tr>
       </tbody>
       <tfoot>
             <tr><td colspan="3">明天你好</td></tr>
       </tfoot>
</table>

三种列表 ul ol dl

缩写

全称

翻译

ul

unordered list

无序的 列表

li

list item

列表的 项目

ol

ordered list

有序的 列表

dl

definition list

自定义 列表

dt

definition term

自定义 项

dd

definition description

自定义 描述

直译

caption 说明文字   

 
<ul>
        <li>无序列表 鸡蛋</li>
        <li>无序列表 牛奶</li>
</ul>
 
<ol type=”有四种值可选”>
        <li>有序列表 鸡蛋</li>
        <li>有序列表 牛奶</li>
</ol>
 
<dl>
        <dt>自定义列表 标题 水果</dt>
        <dd>会缩进 自定义列表 鸡蛋</dd>
        <dd>会缩进 自定义列表 牛奶</dd>
</dl>

  

video 视频

直译的单词

video 视频    controls 控制   muted 静音    auto play 自动播放    loop 循环播放    

preload 预加载   poster 海报    width 宽度    height 高度

 
<video  src="movie.mp4"  controls  muted  autoplay  loop  preload="auto"  poster="图片地址"  height="600">
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      <track default kind="subtitles" srclang="zh" label="中文字幕" src="后缀为.vtt的字幕文件" />
      <track kind="subtitles" srclang="en"  label="英文字幕" src="后缀为.vtt的字幕文件" />
</video>
  1. src尾部加#t=2，可以定位视频到第2秒。例如 src="movie.mp4#t=2"。
  2. video支持MP4, WebM, 和 Ogg格式，其中mp4格式对各浏览器更兼容。
  3. 写两个source的原因是：如果第一个视频播放不了，那就采用第二个，以此类推。
  4. 如果设置了 autoplay 属性，preload属性失效，因为没必要，注意：只有设置了muted，autoplay才会生效，这是为了防止用户打开多个视频，声音混乱播放。
  5. preload的值可以是auto、none、metadata。一般使用metadata，只加载视频的基本信息和第一帧影像。
  6. width和height的默认单位为像素，一般情况设置宽或者高，取其一，同时设置会导致有空白无画面区域。如果一定要占满屏幕，可以css设置object-fit: cover，但是如果是竖屏的视频，那就不太友好，大部分会遮住看不见。可参见css教程。
  7. track：译为轨道。字幕必须为.vtt格式。

属性值

类型

subtitles

字幕，最常用

captions

说明文字，视频对话的翻译（ 适合听障人士 ）

chapters

章节（ 适用于导航媒体资源 ）

descriptions          

视频的描述（ 适合视障人士 ）

metadata

脚本使用的内容。 对用户不可见

        default：设置默认轨道，若多个track，加了优先展示。

        srclang：资源 语言。它的值参考国际语言代码表。         如果 kind 属性值是 "subtitles"，则该属性是必需的。         国际语言代码 Language Code网站 :         http://www.lingoes.cn/zh/translator/langcode.htm

        label：标签。规定文本轨道的显示代称

        src：  资源地址

        kind:   轨道的类型，属性值如右图：

        案例 (放在video标签内)：        

        <track src="wordsCN.vtt" kind="subtitles" srclang="en" label="English"  default >

  

audio 音频

<audio controls autoplay>
        <source src="music.mp3" type="audio/mpeg">     
        <source src="music.wav" type="audio/wav">
        <source src="music.ogg" type="audio/ogg">           
        您的浏览器不支持 audio 元素。
</audio>
支持三种音频格式文件: MP3, Wav, 和 Ogg，mp3为佳。

iframe 框架

        <iframe src="http://www.sdaclass.com" width="100%" height="500" frameborder="0" name="myname"></iframe>

        iframe =inner Frame(内部 框架)。简而言之，就是一个页面嵌套另一个页面或元素。 src填html网页地址或视频链接地址，width和height设定宽高，单位为像素。frameborder为0可以去掉边框，默认值是1表示有边框。

        配合    

        <a href="http://www.sdaclass.com" target="myname">社大学堂</a>    

        <a href="http://www.taobao.com" target="myname">淘宝</a>

        把a的target写为iframe的name，就可以实现同一个页面访问多个页面的效果，即类似于Ajax的效果。

        案例：iframe引用外链，比如高德地图和百度地图 https://developer.amap.com/tools/creater         https://lbsyun.baidu.com/index.php?title=jspopularGL

        sandbox 安全限制

        sandbox是html5的新属性，主要是提高iframe安全系数。iFrames外链是存在安全问题的，这主要是因为iFrames常常被用于嵌入第三方内容，而执行某些恶意操作。sandbox可以有效防止iframe对父页面进行攻击（ 禁用插件，禁止其他浏览上下文的导航，禁止弹出窗口和模式对话框）。sandbox通过限制被嵌入内容所允许的操作而提升iFrames的安全性。

        allow-same-orign 允许将内容作为普通来源对待，否则会被设为来自一个独立的源

        allow-top-navigation 允许包含文档导航内容

        allow-forms 允许表单提交

        allow-scripts 允许脚本执行

        allow-modals 允许模态窗口

        allow-orientation-lock 允许锁定父窗口屏幕方向

        allow-pointer-lock 允许使用指针锁API

        allow-popups 允许弹出窗口

        allow-popups-to-escape-sandbox 允许弹出沙箱窗口

        allow-presentation 允许控制session

        "" 即为空，允许上述所有规则，默认 写多个空格即可，

        例如把 sandbox="allow-scripts allow-same-orign allow-top-navigation" 放入<iframe>标签内部

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布