2.HTML常用的基础语法

作者: 欣博客 | 来源:发表于2020-02-17 20:57 被阅读0次

1.解决HTML乱码问题 (设置统一编码 UTF-8 万国码)

将以下标签添加在head头中

<meta charset="utf-8" />

示例:

<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页正文
</body>
</html>

2.标题标签

在HTML中，一共有六级标题标签 h1 ~ h6,6级标题中，h1的最重要，表示一个网页中的主要内容，h2 ~ h6重要性依次降低。
对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1中的内容,h1标签非常重要，它会影响到页面在搜索引擎中的排名，页面只能写一个h1。
一般页面中标题标签只使用h1 h2 h3,h3以后的基本不使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>标题标签</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <h2>一级标题</h2>
        <h3>一级标题</h3>
        <h4>一级标题</h4>
        <h5>一级标题</h5>
        <h6>一级标题</h6>
    </body>
</html>

预览效果

image.png

3.段落标签

1.段落标签用于表示内容中的一个自然段,使用p标签来表示一个段落
2.p标签中的文字，默认会独占一行，并且段与段之间会有一个间距

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>段落标签</title>
    </head>
    <body>
        <p>我是一个p标签，我用来表示一个段落</p>
        <p>我是一个p标签，我用来表示一个段落</p>
        <p>我是一个p标签，我用来表示一个段落</p>
    </body>
</html>

预览效果

image.png

4.换行符

在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。
在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>换行符</title>
    </head>
    <body>
        我要换行<br />
        我要换行<br />
        我要换行<br />
        我要换行<br />
    </body>
</html>

预览效果:

image.png

4.水平线

hr标签也是一个自结束标签，可以在页面中生成一条水平线

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

预览效果:

image.png

5.实体

在HTML中，一些如< >这种特殊字符是不能直接使用，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
浏览器解析到实体时，会自动将实体转换为其对应的字符
实体的语法：&实体的名字;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>实体</title>
    </head>
    <body>
        小于:&lt;  <br />
        大于:&gt;  <br />
        版权:&copy;  <br />
        除:&divide;  <br />
        空格:&nbsp;&nbsp;&nbsp;空格  <br />
    </body>
</html>

预览效果:

image.png

6.图片标签

使用img标签来向网页中引入一个外部图片
img标签也是一个自结束标签
属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录

width： 可以用来修改图片的宽度,一般使用px作为单位
height： 可以用来修改图片的高度，一般使用px作为单位

宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小
如果两个值同时指定则按照你指定的值来设置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>图片标签</title>
    </head>
    <body>
        <img src="1.jpg" alt="这是一张图片" width="100px" height="500px"  />
    </body>
</html>

预览效果:

image.png

7.常用meta标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 
            使用meta标签还可以用来设置网页的关键字
        -->
        <meta name="keywords" content="HTML5,JavaScript,前端,Java" />
        
        <!-- 
            还可以用来指定网页的描述
            搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名
        -->
        <meta name="description" content="发布h5、js等前端相关的信息" />
        
        
        <!-- 
            使用meta可以用来做请求的重定向
            <meta http-equiv="refresh" content="秒数;url=目标路径" />
        -->
        <meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
        
    </head>
    <body>
    <!-- 我是一个注释
        <h1>这是一个标题</h1>
    -->
        <h1>5秒以后跳转页面</h1>
        
    </body>
</html>

8.iframe 内联框架

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iframe内联框架</title>
    </head>
    <body>      
        <iframe src="http://www.baidu.com" name="tom"></iframe>
    </body>
</html>

预览效果:

image.png

9.超链接 a标签

a 超链接不能嵌套a

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>超链接</title>
    </head>
    <body>
        <!--
            使用超链接可以让我们从一个页面跳转到另一个页面
            使用a标签来创建一个超链接 href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址
        -->
        <a href="http://www.baidu.com">我是一个超链接</a> <br /><br />

        <!--
            a标签中的target属性可以用来指定打开链接的位置 可选值：
                _self，表示在当前窗口中打开（默认值）
                _blank，在新的窗口中打开链接
                 可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
        -->
        <a href="http://www.baidu.com" target="tom">我是一个超链接</a>
        <br /> <br />
        <iframe src="http://www.qq.com" name="tom"></iframe>

        <center>
            <!--
                跳转到id为bottom的元素所在的位置
                直接在href中写 #id属性值
            -->
            <a href="#bottom">去底部</a>
            <a href="#hello">去指定位置</a>
            <h1>这是我的个人博客</h1>
            <hr />
            <h2>东风破</h2>
            <!-- 创建超链接时，如果地址不确定可以直接写一个#作为占位符 -->
            <a href="#">周杰伦</a>
            <p id="hello">
                悲来乎，悲来乎。<br />
                主人有酒且莫斟，听我一曲悲来吟。<br />
                悲来不吟还不笑，天下无人知我心。<br />
                君有数斗酒，我有三尺琴。<br />
                琴鸣酒乐两相得，一杯不啻千钧金。<br />
                悲来乎，悲来乎。<br />
                天虽长，地虽久，金玉满堂应不守。<br />
                富贵百年能几何，死生一度人皆有。<br />
                孤猿坐啼坟上月，且须一尽杯中酒。<br />
                悲来乎，悲来乎。<br />
                凤凰不至河无图，微子去之箕子奴。<br />
                汉帝不忆李将军，楚王放却屈大夫。<br />
                悲来乎，悲来乎。<br />
                秦家李斯早追悔，虚名拨向身之外。<br />
                范子何曾爱五湖，功成名遂身自退。<br />
                剑是一夫用，书能知姓名。<br />
                惠施不肯干万乘，卜式未必穷一经。<br />
                还须黑头取方伯，莫谩白首为儒生。<br />
            </p>
            <hr />
            友情链接:<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br /><br />
            <!--
                如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
                html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
                这个属性就是id，id属性在同一个页面中只能有一个不能重复
            -->
                <a id="bottom" href="#">回到顶部</a> |
                <!--
                    发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
                    href="mailto:邮件地址"
                    当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址
                -->
                <a href="mailto:454642483@qq.com">联系我们</a>
        </center>

    </body>
</html>

10.块元素 DIV

div就是一个块元素，所谓的块元素就是会独占一行的的元素,无论他的内容有多少,他都会独占一整行。
div这个标签没有任何语义，就是一个纯粹的块元素并且不会为它里边的元素设置任何的默认样式,div元素主要用来对页面进行布局的
p元素不可以包含任何块元素

<div>我是div</div>

11.内联元素 span是一个内联元素（行内元素）

所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：a img iframe span
span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式

<span>我是span</span>

11. em和strong

这两个标签都表示一个强调的内容
em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
      
        <p>
            今天天气<em>真不错</em>！
        </p>

        <p>
            <strong>
                注意：好好学习天天向上！
            </strong>
        </p>


    </body>
</html>

预览效果:

image.png

12.i和b

i标签中的内容会以斜体显示
b标签中的内容会以加粗显示
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体，就可以使用b和i标签

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

     <p>
            <i>我是i标签中的内容</i>
            <b>我是b标签中的内容</b>
        </p>

    </body>
</html>

预览效果:

image.png

13.small标签

small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放到small

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

        <p>
            我是p标签中的内容<small>我是small标签中的内容</small>
        </p>
    </body>
</html>

预览效果:

image.png

14.cite标签

网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，比如：书名歌名话剧名电影名。。。

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

        <p>
            <cite>《论语》</cite>是最喜欢的一般的书
        </p>
    </body>
</html>

image.png

15.q标签

表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>
            子曰:<q>学而时习之不亦说乎！</q>
        </p>
    </body>
</html>

预览效果:

image.png

16. blockquote 标签

表示一个长引用（块级引用）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            子曰:
            <blockquote>
                有朋自远方来，乐呵乐呵！
            </blockquote>
        </div>
    </body>
</html>

image.png

17.sup标签

设置一个上标

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>2<sup>2</sup></p>
        <p>周杰伦<sup><a href="#">[1]</a></sup></p>
    </body>
</html>

预览效果:

image.png

18.sub标签

sub标签用来表示一个下标

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>H<sub>2</sub>O</p>
    </body>
</html>

预览效果:

image.png

19.del标签

使用del标签来表示一个删除的内容
del标签中的内容，会自动添加删除线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>
            <del>17.75</del> <br />
            15.54 <br />
        </p>
    </body>
</html>

预览效果:

image.png

20.ins标签

ins表示一个插入的内容
ins中的的内容，会自动添加下划线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>
            这个标签<ins>好啊</ins>！
        </p>
    </body>
</html>

预览效果:

image.png

21.pre和code标签

需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <pre>
            <code>
                window.onload = function(){
                    alert("Hello World");
                };
            </code>
        </pre>
    </body>
</html>

预览效果:

image.png

22.无序列表和有序列表

列表就相当于去超市购物时的那个购物清单，
在HTML也可以创建列表，在网页中一共有三种列表：

无序列表
有序列表
定义列表

无序列表

-使用ul标签来创建一个无序列表
-使用li在ul中创建一个一个的列表项，一个li就是一个列表项
通过type属性可以修改无序列表的项目符号

可选值：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
注意：默认的项目符号我们一般都不使用！！
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置ul和li都是块元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>无序列表</title>
    </head>
    <body>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>
    </body>
</html>

预览效果:

image.png

有序列表

有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号

type属性，可以指定序号的类型
可选值：
1，默认值，使用阿拉伯数字
a/A 采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号

ol也是块元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>有序列表</title>
    </head>
    <body>
    <ol type="I">
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>
    </body>
</html>

预览效果:

image.png

列表之间都是可以互相嵌套，可以在无序列表中放个有序列表
也可以在有序列表中放一个无序列表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>有序列表</title>
    </head>
    <body>
        <p>菜谱</p>
        <ul>
            <li>
                鱼香肉丝
                <ol>
                    <li>鱼</li>
                    <li>香</li>
                    <li>肉丝</li>
                </ol>
            </li>
            <li>
                宫保鸡丁
                <ul>
                    <li>宫保</li>
                    <li>鸡丁</li>
                </ul>
            </li>
            <li>青椒肉丝</li>
        </ul>
    </body>
</html>

预览效果:

image.png

定义列表

定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
dl中有两个子标签
dt: 被定义的内容
dd: 对定义内容的描述
同样dl和ul和ol之间都可以互相嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定义列表</title>
    </head>
    <body>
        <dl>
            <dt>武松</dt>
            <dd>景阳冈打虎英雄，战斗力9</dd>
            <dd>后打死西门庆，投奔梁山</dd>
            <dt>武大</dt>
            <dd>著名餐饮企业家，战斗力0</dd>
        </dl>
    </body>
</html>

image.png

2.HTML常用的基础语法

1.解决HTML乱码问题 (设置统一编码 UTF-8 万国码)

示例:

2.标题标签

预览效果

3.段落标签

预览效果

4.换行符

预览效果:

4.水平线

预览效果:

5.实体

预览效果:

6.图片标签

预览效果:

7.常用meta标签

8.iframe 内联框架

9.超链接 a标签

10.块元素 DIV

11.内联元素 span是一个内联元素（行内元素）

11. em和strong

预览效果:

12.i和b

预览效果:

13.small标签

预览效果:

14.cite标签

15.q标签

预览效果:

16. blockquote 标签

17.sup标签

预览效果:

18.sub标签

19.del标签

预览效果:

20.ins标签

预览效果:

21.pre和code标签

预览效果:

22.无序列表和有序列表

无序列表

预览效果:

有序列表

预览效果:

定义列表

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读