一、HTML第一章

最新推荐文章于 2024-05-05 17:01:45 发布

GG.104

最新推荐文章于 2024-05-05 17:01:45 发布

阅读量55

点赞数 2

分类专栏： HTML css 文章标签： html5 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_63440099/article/details/128959431

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

1.1 HTML的基本结构

HTML的全称为超文本标记语言，你在网页看得到的内容基本上都是用html语言来编写的。它的基本结构如下：

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

html标签为根标签；html中的所有代码都包含在html标签中。

head标签为头部；head标签定义了文档的信息。

title标签为标题标签；网页的标题实在title标签中书写的。

body标签是文档的主体部分，在body中书写的内容基本上是呈现出来的内容。

1.2 标题标签

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>
    </body>
</html>

1.3段落标签

<p></p> 可以在p标签中编辑内容。

段落标签的特点：

1. 文本在一个段落中会根据浏览器窗口的大小自动换行。

2. 段落和段落之间保有空隙。

html中的标签大部分都是双标签；例如<p></p>标签，

但也有单标签，在书写段落的时候会需要用到换行标签，它就是一个单标签 <br>

分割线标签也是单标签，用来分割内容 <hr>

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1>这是一个标题<h1>
        <p>这里是第一段内容 </p>
        <p>这里是第二段内容，当你需要换行的时候只需要在你想要换行的位置加上一个<br>换行，达到换行的效果</p>
    </body>
</html>

<html>
    <head>
        <title></title>
    </head>
    <body>
        <p>
            这是第一行内容<br>
            这是第二行内容,在这里我们加一个分割线。<br><hr>
            这是第三行内容<br>
            这是第四行内容<br>
        </p>
    </body>
</html>

1.4 html属性

我们可以通过键值对的方式来给标签设置属性；

key：键

velue：值

<p k="v"></p>

1.5 图像标签

<img>

我们常见的图片后缀名有BMP 、JPG、 GIF、PNG这四种。

<!-- 插入图片 img src=“”  src是指图片的路径 高：height 宽：width 水平位置align 
左边left 右边right 中间center -->
<!-- src后边的 ..表示出来的意思 /表示进去 -->
<body>
<img src="../img/刘翔.png" height="230px"width="400px"  align="left" >
        中文名：刘翔<br>别名：翔飞人<br>
        运动项目：田径110跨栏运动员。<br>
        刘翔（liu xiang）是中国田径（110米跨栏）一级运动员。<br>
        2004年雅典奥运会上一12.91秒的成绩平了保持11年之久的世界记录；<br>
        东南亚运动会田径男子110米栏决赛中，成就“三冠王”。<br>
        2011年刘翔成为中国人民政治协商会议第十一届全国委员会委员。<br>
        2011年4月初，教练孙海平表示刘翔的起跑技术已经从原先的八步改为七步上栏，<br>
        刘翔首试七步上栏技术，以13秒07的成绩力压美国名将大卫·奥利弗获得冠军<br>
</body>

1.6 文本格式化标签

ol 有序标签

ul 无序标签

center 居中标签

pre预格式标签（在body中打出什么样的段落就会在网页中显示什么样的段落）

<body>
    
    <center><h3>HTML 文件(有序列表)</h3></center><hr/>
    <ol>    
        <li>有序</li>    
        <li>有序</li>    
        <li>有序</li>
    </ol>
    <center><h3>HTML(无序列表)</h3></center><hr/>
    <ul>    
        <li>无序</li>    
        <li>无序</li>    
        <li>无序</li>
    </ul>
    <pre>
            国破山河在，城春草木深。
            感时花溅泪，恨别鸟惊心。
            烽火连三月，家书抵万金    。
    </pre>
</body>

接下来我们介绍一些比较杂的标签：

        <strong>我是一个字体加粗标签</strong><br>
        <b>我也是一个字体加粗标签</b><br>
        <em>我是一个斜体标签</em><br>
        <i>我也是一个斜体标签</i><br>
        <del>删除线标签</del><br>
        <s>删除线</s><br>
        <ins>下划线标签</ins><br>
        <u>我也是下划线</u><br>
        <!-- 上标标签和下标标签 -->
        2<sup>n</sup>log <sub>10</sub>10

<body>
        <pre>
                      <b>春晓</b><sub>孟浩然</sub>
                      
            春眠不觉<ins>晓</ins><sub>①②</sub>,处处闻<u>啼鸟</u><sub>③</sub>。
            
            夜来风雨声，花落<ins>知多少</ins><sub>④</sub>。
            
            <strong>译文：</strong>
            
            春日里贪睡不知不觉已天破晓，搅乱我酣眠的是那啁啾的小鸟。
            昨天夜里风声雨声一直不断，那娇美的春花不知被吹落了多少？
            
            <b>注释：</b>
            ①晓： 天刚亮的时候，春晓： 春天的早晨。
            ②不觉晓： 不知不觉天就亮了。
            ③啼鸟： 鸟的啼叫声。
            ④知多少： 不知有多少。
            
        </pre>
</body>

1.7 字体标签

<font size="7" color="green">我是被font修饰的字体</font>