HTML基础（一）

什么是HTMLHTML

Hypertext Markup Language：即超文本标记语言

HTML特点

1.HTML不需要编译,直接由浏览器执行

2.HTML文件是一个文本文件

3.HTML文件必须使用html或htm为文件名后缀

4.HTML大小写不敏感HTML与htm-样

HTML基本结构

第一个HTML页面

<html >
<head>
    <title>Title</title>
</head>
<body>
    <p>hello world !</p>
</body>
</html>

用浏览器打开，可以看到页面显示了hello world !

注释

注释是代码之母，所以写代码最好写上注释，方便你我他

我们给上面的代码加上注释

<html >
<head>
    <title>Title</title>
</head>
<body>
    <p>hello world !</p>  <!-- 这是p标签 -->
</body>
</html>

 乱码

我们在给上面html加段中文

复制代码
<html >
<head>
    <title>Title</title>
</head>
<body>
    <p>hello world !</p>  <!-- 这是p标签 -->
    <p>我是中文。。。</p>
</body>
</html>
View Code
复制代码

然后刷新浏览器看看效果

我们发现写的中文在浏览器上不显示，因为浏览器默认不支持中文，如果想让我们的代码正常的显示，那就要我们在head标签里加上下面的一句代码

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

上面的意思就是告诉浏览器以utf-8的编码格式打开

复制代码
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <p>hello world !</p>  <!-- 这是p标签 -->
    <p>我是中文。。。</p>
</body>
</html>
View Code
复制代码

然后刷新浏览器之后就能正常显示了

标题标签

标题标签是h系列，从h1-h6

复制代码
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <h5>我是h5</h5>
    <h6>我是h6</h6>
</body>
</html>
View Code
复制代码

 

 段落标签

段落标签是p标签，可以使大段的文字在一段显示

复制代码
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <p>也就是说，我们在遇到乱码问题的时候，是由于编码不一致导致的。
        这个是html网页的乱码情况的总结，我们举一反三，
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，
        我们也要通过三个因素来考虑解决问题。我总结的三个因素：
        网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候，
        请先从这三个方向去考虑解决问题，将事半功倍。
    </P>
    <p>也就是说，我们在遇到乱码问题的时候，是由于编码不一致导致的。
        这个是html网页的乱码情况的总结，我们举一反三，
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，
        我们也要通过三个因素来考虑解决问题。我总结的三个因素：
        网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候，
        请先从这三个方向去考虑解决问题，将事半功倍。
    </P>
    <p>也就是说，我们在遇到乱码问题的时候，是由于编码不一致导致的。
        这个是html网页的乱码情况的总结，我们举一反三，
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，
        我们也要通过三个因素来考虑解决问题。我总结的三个因素：
        网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候，
        请先从这三个方向去考虑解决问题，将事半功倍。
    </P>
</body>
</html>
View Code
复制代码

p标签的align对齐属性

left:     左对齐内容
right：   右对齐内容
center：  居中对齐内容
justify： 对行进行伸展，这样每行都可以有相等的长度

对上面的代码分别加上对齐方式

复制代码
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <p align="left">也就是说，我们在遇到乱码问题的时候，是由于编码不一致导致的。
        这个是html网页的乱码情况的总结，我们举一反三，
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，
        我们也要通过三个因素来考虑解决问题。我总结的三个因素：
        网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候，
        请先从这三个方向去考虑解决问题，将事半功倍。
    </P>
    <p align="right">也就是说，我们在遇到乱码问题的时候，是由于编码不一致导致的。
        这个是html网页的乱码情况的总结，我们举一反三，
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，
        我们也要通过三个因素来考虑解决问题。我总结的三个因素：
        网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候，
        请先从这三个方向去考虑解决问题，将事半功倍。
    </P>
    <p align="center">也就是说，我们在遇到乱码问题的时候，是由于编码不一致导致的。
        这个是html网页的乱码情况的总结，我们举一反三，
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，
        我们也要通过三个因素来考虑解决问题。我总结的三个因素：
        网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候，
        请先从这三个方向去考虑解决问题，将事半功倍。
    </P>
    <p align="justify">也就是说，我们在遇到乱码问题的时候，是由于编码不一致导致的。
        这个是html网页的乱码情况的总结，我们举一反三，
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，
        我们也要通过三个因素来考虑解决问题。我总结的三个因素：
        网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候，
        请先从这三个方向去考虑解决问题，将事半功倍。
    </P>
</body>
</html>
View Code
复制代码

查看效果

换行br

上面的p标签我们在编辑器里显示了六行，而在浏览器里只显示了三行，如果我们也要它按照浏览器的样式显示，那我们就要用br标签了

复制代码
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <p >也就是说，我们在遇到乱码问题的时候，是由于编码不一致导致的。<br />
        这个是html网页的乱码情况的总结，我们举一反三，<br />
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，<br />
        我们也要通过三个因素来考虑解决问题。我总结的三个因素：<br />

    </P>

</body>
</html>
复制代码

空格

空格是用的&nbsp;表示一个空格

复制代码
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <p >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;也就是说，
        我们在遇到乱码问题的时候，是由于编码不一致导致的。<br />
        这个是html网页的乱码情况的总结，我们举一反三，<br />
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，<br />
        我们也要通过三个因素来考虑解决问题。我总结的三个因素：<br />

    </P>

</body>
</html>
复制代码

pre格式化标签

按照编辑器的样式显示

复制代码
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <pre >          也就是说，
        我们在遇到乱码问题的时候，是由于编码不一致导致的。
        这个是html网页的乱码情况的总结，我们举一反三，
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，
        我们也要通过三个因素来考虑解决问题。我总结的三个因素：

    </pre>

</body>
</html>
View Code
复制代码

水平线hr

<hr />水平线，在页面上展示一条水平线，有如下属性

width:   设置水平线宽度，可以像素或百分比
color:   设置水平线颜色
align:   设置水平线居中对齐
noshade: 设置水平线无阴影
复制代码
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <p>          也就是说，
        我们在遇到乱码问题的时候，是由于编码不一致导致的。
        这个是html网页的乱码情况的总结，我们举一反三，
        我们在使用php虚拟主机建站的时候遇到乱码问题的时候，

    </p>
    <hr  width="80%" color="red" align="left" noshade="noshade"/>

</body>
</html>
View Code
复制代码
width="80%"  表示占页面宽度的80%
color="red"  表示线是红色的

align="left" 左对齐
noshade="noshade"  没有阴影

 修饰标签

常用的修饰标签有

文字斜体：<i></i>,  <em></em>
加粗：<b></b>,  <strong></strong>
下标：<sub></sub>
上标：<sup></sup>
下划线：<ins></ins>
删除线：<del></del>
复制代码
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>

        <p><i>我们</i>在遇到乱码问题的时候，是由于<em>编码</em>不一致导致的。</p>
        <p>这个是<b>html</b>网页的乱码情况的总结，我们<strong>举一反三</strong>，</p>
        <p>我们在使用php虚拟<sub>主机</sub>建站的时候遇到<sup>乱码</sup>问题的时候，</p>
        <p>在<ins>苍茫的大海上</ins>，海燕在<del>高傲的飞翔</del></p>


</body>
</html>
View Code
复制代码

效果

特殊符号

有些符号我们不能直接在页面上进行输入，比如我们想让页面显示<hr />，如果直接输入的话，会在页面显示一条线，这时候我们就要用到特殊符号了，常用的有

复制代码
&lt;    <
&gt;    >
&reg;   ®
&copy;  ©
&trade; ™ 
&nbsp; 空格
复制代码

 

 

posted @   邹邹很busy。  阅读(252)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示

目录导航