HTML的讲解

最新推荐文章于 2022-08-01 16:42:56 发布

I'm sure ok!

最新推荐文章于 2022-08-01 16:42:56 发布

阅读量433

点赞数

分类专栏： HTML-CSS

本文链接：https://blog.csdn.net/lirui1212/article/details/103606879

版权

HTML-CSS 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

文章目录

`HTML的定义：`

超文本标记语言(HyperText Markup Language)，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

`HTML的作用：`

Markdown将文本转换为 HTML。
因此你可以直接在Markdown中写HTML代码。

网页的组成
标签的作用
浏览器打开后，页面怎么架子啊渲染的
优势
1.所有的知名浏览器厂商都支持
微软、Google、苹果、Mozilla firefox
2.市场的需求
3.跨平台(浏览器) B/S

`HTML的基本结构：`

所有的HTML 标签都以 <> 开始 </> 结尾
正常网页的所有的内容都需要放在标签中；
DOCTYPR 文档类型，默认声明，表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTML
Title 标签，就是网站的小标题名称
meta 描述信息，SEO ：网站搜索

    <!--网站关键字描述 content 内容-->
    <meta name="keywords" content="">
    <!--网站的描述-->
    <meta name="description" content="">
    <!--网页的标题-->
    <title>我的第一个网页</title>

`1.网站基本标签:`

1、标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2、换行标签

HTML 与 XHTML 之间的差异
在 HTML 中，<br> 标签没有结束标签。
在 XHTML 中，<br> 标签必须被正确地关闭，比如这样：<br />。

3、段落标签

<pr>Java</pr>
<br>
<pr>Java</pr>
<br>

<p>Java</p>
<p>Java</p>
<p>Java</p>

<pr>Java</pr>
<br>
<pr>Java</pr>

在这里插入图片描述
小结：
段落标签有两种<p></p>和<pr></pr>，通过代码测试发现前者不需要写换行符且自动换行并且每两个内容的间距是一行，后者需要换行符但是每两个内容没有间距。也就是块元素和行内元素，块元素：无论内容多少，都是独占一行行内元素：只根据内容的长度来扩展

4、水平线标签

<hr>或者<hr/>

5、字体样式标签

<em></em> 强调文本（斜体）
<em>你还好吗</em><br>

<strong></strong> 着重强调文本（加粗）
<strong>今天玩了一天</strong>

6、特殊符号标签
&加二十六个字母可以得到任何符号

&nbsp;代表的是空格
&copy;版权所有
&gt;大于
&lt;小于

`2.图片标签：`

常见的图片格式：.png .jpg .jpeg .bmp .gif等
png 会有浏览器兼容问题
一般使用 .jpg .gif 多一点

图片：静态资源单独放

static/images

相对路径 ../../
绝对路径 带有盘符的

<!--
src: 图片资源的路径
alt: 图片加载失败，表示图片的信息
title: 鼠标放在图片上的悬浮文字
width: 宽
height: 高
-->
<img src="../statics/images/tx.jpg" alt="图片加载失败" title="至尊宝紫霞仙子" width="1280" height=800>

`3.超链接`

<!--
超链接：表示从一个地方跳转到另外一个地方
href: 要跳转地址
target：目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
 _self: 在自己的窗口打开
 _blank: 在新窗口中打开
-->
<!--<a href="https://www.baidu.com/" target="_self">百度
</a>-->

<a href="https://www.baidu.com/" target="_blank">
    <img src="../statics/images/bd.png">
</a>

<!--一般标签的中间放的是一个似乎是按钮的东西你点击它才会显示你想要的东西
Tag name:a <a th:href="@{postdetails.do(cpid=${li.pid})}"> -->

`4.锚链接`

用于页面间指定位置跳转：快速定位目录
可以在同一页面中跳转
也可以在不同页面中跳转

锚点

<!--标记A-->
<a name="markerA">A</a>

跳转到锚点

<a href="#markerA">A</a> <br>

`5.功能性标签`

邮件链接

</a>
<!--邮箱登录-->
<a href="mailto:1102563860@qq.com">联系我们</a>

借助第三方平台

<!--<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1102563860&site=qq&menu=yes">-->
    <!--<img border="0" src="http://wpa.qq.com/pa?p=2:1102563860:53" alt="点击这里给我发消息" title="点击这里给我发消息" />-->
<!--</a>-->

`6.列表`

有序列表

1.苹果
2.香蕉
3.葡萄
4.柠檬

无序列表

苹果
香蕉
葡萄
柠檬

自定义列表

水果
        苹果
        香蕉
        葡萄
蔬菜
        菜心
        油菜
        菜花

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>柠檬</li>
</ul>
<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>柠檬</li>
</ol>
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
    <li>蔬菜</li> <!--在自定义列表中<li>...</li>与<dt></dt>的效果的一样-->
    <dd>菜心</dd>
    <ol>油菜</ol>
    <ul>菜花</ul> <!--通过测试发现<ol></ol><ul></ul>与<dd></dd>效果一样-->
</dl>

除上述列表标签以外还可以嵌套使用标签
比如说淘宝中食品一栏中有巧克力、豆干等
巧克力又分为德芙、费列罗榛果、魔吻黑
豆干有 麻辣味、香辣味、五香味
下面通过代码实现以下需求 :

出来的效果是:
在这里插入图片描述

<ul>
    <li>食品
           <ul>
            <li>巧克力
                <ul>
                    <li>德芙</li>
                    <li>费列罗榛果</li>
                    <li>魔力黑</li>
                </ul>
            </li>
            <li>
                豆干
                <ul>
                    <li>麻辣味</li>
                    <li>香辣味</li>
                    <li>五香味</li>
                </ul>
            </li>
           </ul>
    </li>
</ul>

小结：根据列表标签的语法我们可以进行一些嵌套的列表，来满足需求。

`7.表格标签：`

HTML 表单中有两种类型的单元格：
表头单元格 - 包含表头信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本

<body>
<!--border是可变参数 数字代表边框的粗细 bgcolor是表格的背景颜色-->
<table border="1px" bgcolor="aqua">
    <!--tr表示row(行)td表示col(列)-->
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>英语</th>
    <tr>
        <td>小明</td>
        <td>80</td>
        <td>60</td>
        <td>65</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>62</td>
        <td>56</td>
        <td>85</td>
    </tr>
    <tr>
        <td>小李</td>
        <td>75</td>
        <td>56</td>
        <td>54</td>
    </tr>
</table>
</body>

在这里插入图片描述

`跨行与跨列：`

<!--跨行-->
<table border="1">
    <tr>
        <th>姓名</th>
        <td>xxx</td>
    </tr>
    <tr>
        <th rowspan="2">电话</th>
        <td>123456</td>
    </tr>
    <tr>
        <td>654321</td>
    </tr>
</table>

<!--跨列-->
<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>
    </tr>
    <tr>
        <td>xxx</td>
        <td>123456</td>
        <td>123456</td>
    </tr>
</table>