HTML基础知识——常用标签详解

scorpion喵喵

于 2019-01-05 16:53:24 发布

阅读量477

点赞数 1

分类专栏： HTML 文章标签： html基础标签 img标签 a标签

本文链接：https://blog.csdn.net/weixin_40133326/article/details/85854483

版权

HTML 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1 定义

html：超文本标记语言。

2 基础语法

文档的基本结构：头部信息( <head>标签包含的内容分)+网页内容( <body>标签包含的内容)=html文件。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
</body>
</htlm>

3 常用标签

<!DOCTYPE html> 声明文档类型；
<meta> 常用charset="utf-8"来规定文档的编码类型，utf-8和gb2321均为常用的编码类型；
<h1>--------<h6> 标题；
<p> 段落，默认的段前段后均有空白，可以设置css样式实现自己所需样式，常用属性 align=" "，规定段落中文本的对齐方式
align属性的具体值
left 向左对齐
right 向右对齐
center 中心对齐
justify 对行进行伸展，每行内容长度相同（如报纸、杂志等）
  空格，因html编译器只识别一个空格，若要使用多个空格，需使用&nbsp；标签实现，分号是必不可少的；
<code> 预格式化，插入代码语言，只能插入一行；
<pre> 预格式化，插入代码语言，可以插入多行，大段代码，编译器中输入的是什么格式，浏览器中显示的就是什么格式；
<q> 引用名言，诗句，歌词等，无需加双引号，会自动补全，仅仅可以实现短文本的引用；
<blockquote> 引用，实现长文本的引用，无需加双引号，有一定的缩进形式；
<span> 无语义，用以设置单独的样式；
<br /> 单标签，实现换行；
<hr /> 单标签，实现——，默认粗体灰色样式，属性width;color;align；
<em> 强调，斜体；
<strong> 强调，粗体，更加强烈的强调，较为常用；
修饰标签
修饰标签
斜体 i,em
粗体 b,strong
上标 sup
下标 sub
下划线 ins
删除线 del
特殊符号

align属性的具体值
left	向左对齐
right	向右对齐
center	中心对齐
justify	对行进行伸展，每行内容长度相同（如报纸、杂志等）

修饰标签
斜体	i,em
粗体	b,strong
上标	sup
下标	sub
下划线	ins
删除线	del

特殊符号
&lt	<,左括号
&gt	>,右括号
&reg	注册商标符号
&copy	版权符号
&trade	商标符号

<address> 为网页加入地址信息（email,签名，作者信息等），斜体显示；
<div> 将一些独立的逻辑部分（页面上相互关联的一组元素）划出来，相当于一个容器，id=" "，提供一个唯一识别的名称。

4 列表标签

无序列表 ul（Unordered list）
```
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>
```
type属性：disc(圆点)，suqare(正方形)，circle(空心圆)

有序列表 ol （ordered list）

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ol>

type属性：1,a,A,i,I......

自定义列表 dl

<dl>
    <dt>列表1</dt>
    <dd>列表内容具体描述</dd>
    
    <dt>列表2</dt>
    <dd>列表内容具体描述</dd>

    <dt>列表3</dt>
    <dd>列表内容具体描述</dd>

    <dt>列表4</dt>
    <dd>列表内容具体描述</dd>
</dl>

<dt> 和<dd> 两个为同级标签，以上三个同时使用才可以定义自己的列表。

列表标签使用场景

导航；新闻列表；购物网站；书籍畅销榜等。

5 图像

<img src="图片路径" alt="图片不能正常显示时，作为替换内容显示" title="鼠标火锅到图片时显示的文字" target="目标窗口" name="图片名称" width="宽度" height="高度">

图片路径：

<1> 相对路径：相对当前文件的路径

<2> 绝对路径：相对盘符的路径

6 连接

<a href="">连接的内容</a>

属性
属性
href=" " 连接的地址，站内站外连接均可
target=" " 目标窗口
name=" " 命名
title=" " 提示文字
给谁添加连接，就将谁放在<a></a>标签中
空链接： <a href="#">

属性
href=" "	连接的地址，站内站外连接均可
target=" "	目标窗口
name=" "	命名
title=" "	提示文字

<a href="#" title="你真的很皮，而且很难搞。" name="bt"><img src="images/4.jpg" alt="bootstrap简介"></a>

锚：点击跳转到相应位置

<1>站内跳转

<!--注意锚名和跳转位置-->
<a href="#名称">sbrykqgofwq</a>
<a href=" " name="名称">s qkwugu</a>

<a href="#css">css</a>
<a href="#js">javascript</a>
<a href="#bt">bootstrap</a>

<a href="demo2.html" target="_self" name="css"><img src="images/2.jpg" alt="css简介"></a>
<a href="https://www.w3cschool.cn/" target="_blank" name="js"><img src="images/3.jpg" alt="javascript简介"></a>
<a href="#" title="你真的很皮，而且很难搞。" name="bt"><img src="images/4.jpg" alt="bootstrap简介"></a>

<2>站外跳转

<!--注意锚名和跳转位置-->

<a href="demo2.html#名称">asnuli lqw</a>
<a href=" " name="名称">auq wpgw ywyk yuwq</a>

<!--设置外部锚的名称和位置-->
	<a href="demo2.html#html"></a><img src="images/1.jpg" alt="html简介">

扩展功能

邮件
```

<a href="mailto:xiaonifan@163.com">链接到我的邮箱</a>
```
mailto:自己的邮箱？参数1&参数2&subject=主题&body=,代码编写正确后，会自动补全收件人等信息。

文件下载

<!--设置文件下载地址-->
<a href="images.zip">链接到我的文件</a>

href中若是地址，会直接打开相应的连接；

href中若是文件、压缩包，会直接进行下载。

scorpion喵喵

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识——常用标签详解

1 定义 html：超文本标记语言。2 基础语法文档的基本结构：头部信息( &lt;head&gt;标签包含的内容分)+网页内容( &lt;body&gt;标签包含的内容)=html文件。 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF
复制链接

扫一扫

专栏目录