前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML基础标签

HTML基础标签

作者头像
奋飛
发布2019-08-15 16:09:02
3.8K0
发布2019-08-15 16:09:02
举报
文章被收录于专栏:Super 前端

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://ligang.blog.csdn.net/article/details/44040267

学习HTML标签,要从标签的用途、标签在浏览器中的默认样式入手,已经深刻了解其语义。 语义化:在什么情况下可以使用这个标签才合理 1. 更容易被搜索引擎收录。 2. 更容易让屏幕阅读器读出网页内容。

一、p标签

代码语言:javascript
复制
<p>段落文本</p>

<p>标签的默认样式,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。

二、hx标签

代码语言:javascript
复制
<hx>标题文本</hx>

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。一般<h1>标签被用在网站名称上。

三、强调标签

代码语言:javascript
复制
<em>需要强调的文本</em>  
<strong>需要强调的文本</strong>

<em> 默认用斜体表示,<strong> 用粗体表示。<strong>更强烈,较为通用。

四、使用<span>标签为文字设置单独样式

代码语言:javascript
复制
<span>文本</span>

五、文本引用

代码语言:javascript
复制
<pre name="code" class="html"><q>引用文本</q>		<!-- 短文本引用-->
<blockquote>引用文本</blockquote>	<!-- 长文本引用、缩进样式-->
代码语言:javascript
复制

引用标签的真正关键点不是它的默认样式双引号,而是它的语义:引用别人的话。

六、div

在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

七、table

<th>…</th>:表格的头部的一个单元格,表格表头。<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的2、表头,也就是th标签中的文本默认为粗体并且居中显示3、为表格添加标题和摘要

代码语言:javascript
复制
<caption>标题文本</caption>
<table summary="表格简介文本">

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

八、<a>标签

代码语言:javascript
复制
<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a>

title属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容 如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔

代码语言:javascript
复制
<a href="mailto:lg@qq.com?cc="381510688@qq.com&bcc=750@qq.com&subject=主题&body=邮件内容">发送</a>

注意:主题和body内容无需使用''进行隔离

九、<img>标签

代码语言:javascript
复制
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

十、<form>表单标签

代码语言:javascript
复制
<form method="传送方式" action="服务器文件">
<label for="控件id名称">

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

代码语言:javascript
复制
回车:<br />
空格: 
水平线:<hr />
地址信息:<address>地址信息</address>
单行代码:<cod>代码</code>
多行代码:<pre>代码段</pre>

无前后顺序:每项<li>前都自带一个圆点

代码语言:javascript
复制
<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

有前后顺序:每项<li>前都自带一个序号,序号默认从1开始

代码语言:javascript
复制
<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

下面这些标签可用在 head 部分:

代码语言:javascript
复制
<head>
    <title>...</title>	
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link>
    <style>...</style>
    <script>...</script>
</head>

<!-- 网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。-->

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015年03月03日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、p标签
  • 二、hx标签
  • 三、强调标签
  • 四、使用<span>标签为文字设置单独样式
  • 五、文本引用
  • 六、div
  • 七、table
  • 八、<a>标签
  • 九、<img>标签
  • 十、<form>表单标签
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档