HTML基础

最新推荐文章于 2023-10-31 22:09:55 发布

幸愉聊信奥

最新推荐文章于 2023-10-31 22:09:55 发布

阅读量300

点赞数

分类专栏： # HTML 文章标签： HTML 前端

本文链接：https://blog.csdn.net/Edviv/article/details/109238999

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

语义化标签
效果标签
列表标签
图片、链接、表格标签
表单标签、浏览者交互

语义化标签

语义化就是让你的网页更好的被搜索引擎理解，明白每个标签的用途，在什么情况下使用此标签合理。比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签，文章中内容的段落就得放在段落标签中等等。

语义化可以：
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。

段落标签：

<p>段落文本</p>

$c s s$ 在 $h e a d$ 里， $h t m l$ 内容在 $b o d y$ 里。
一个段落一个 < p > 标签，每个段落的段前段后由于< p > 的默认样式，都会有空白，可以利用 css 样式来删除或者改变它。

标签自定义文字样式

<span>文本</span>

这个标签是没有语义的，它的作用就是为了设置单独的样式用的。在 $h e a d$ 里面的 $s t y l e$ 里面设置，然后在 $b o d y$ 里面直接使用 $s p a n$
在这里插入图片描述
运行结果：

标题标签：

<hx>标题文本</hx> (x为1-6，分别表示1~6级标题)

在这里插入图片描述
运行结果：

$d i v$ 标签自定义块

<div>…</div>

$d i v$ 标签的作用就相当于一个容器，把页面上相互关联的一组元素放在一起。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>div标签</title>
</head>

<body>
<div>
    <h2>热门课程排行榜</h2>
    <ol>
        <li>前端开发面试心法 </li>
        <li>零基础学习html</li>
        <li>javascript全攻略</li>
    </ol>
</div>
<div>
    <h2>最新课程排行</h2>
    <ol>
        <li>版本管理工具介绍—Git篇 </li>
        <li>Canvas绘图详解</li>
        <li>QQ5.0侧滑菜单</li>
    </ol>
</div>
</body>

</html>

运行结果
在这里插入图片描述
定义头部区域标签：

<header></header>

定义底部区域标签：

<footer></footer>

定义一个区域的标签：

<section></section>

定义侧边栏的标签：

<aside></aside>

效果标签

换行标签：

xhtml1.0写法：<br/>  (推荐这种规范的写法)
html4.01写法：<br>

在 $h t m l$ 代码中输入回车、空格都是没有作用的。在 $h t m l$ 文本中想输入回车换行，就必须输入 < $b r /$ >。
实现空格标签：

&nbsp;

实现水平线标签：

xhtml1.0版本 <hr /> (推荐这种规范的写法)
html4.01版本 <hr>

1.<hr/>标签和<br/>标签一样也是一个空标签，所以只有一个开始标签，没有结束
标签。
2.<hr/>标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能会觉得这种样
式不美观，但是这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

列表标签

实现无序列表的标签：

<ul>
    <li>人生海海</li>
    <li>人生短短</li>
</ul>

在这里插入图片描述
实现有序列表的标签：

<ol>
   <li>人生海海</li>
   <li>人生短短</li>
</ol>

在这里插入图片描述

图片、链接、表格标签

插入图片：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

1、 $s r c$ ：标识图像的位置；位置有绝对路径和相对路径之分，绝对路径就是在某个网站上搜索的图片链接，如果作者删除，则链接会失效。相对路径是保存到文档中，./同级目录 ./…/上级目录，然后以此类推。
2、 $a l t$ ：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本。
3、 $t i t l e$ ：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)。
4、图像可以是 $G I F$ ， $P N G$ ， $J P E G$ 格式的图像文件

网页添加超链接：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

$t i t l e$ 属性的作用就是当鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。

在新建浏览器窗口中打开链接：

<body>
<a href = "https://www.sina.com.cn/" target = "_self">新浪</a><br/>
<a href = "https://www.qq.com/" target = "_blank">腾讯</a>
</body>

运行结果：
在这里插入图片描述
$a$ 标签有的 $t a r g e t$ 属性，代表打开网页的方式。可选值为 $s e l f$ 和 $b l a n k$ ，默认值为 $s e l f$ ，代表在当前页面打开链接， $b l a n k$ 代表在新窗口打开链接。

网页添加表格：

<body>
    <!--border属性可以为表格添加边框，属性值为数字-->
    <table border = "1">
        <!--caption定义表格的标题标签-->
        <caption>前端三剑客</caption>
        <!--tr代表一行-->
        <tr>
            <!--th代表一列 有字体加粗的效果 默认为粗体并且居中显示-->
            <!--th表格的头部的一个单元格，表格表头-->
            <th>知识点</th>
            <th>重要程度</th>
            <th>难度</th>
            <th>学习周期</th>
        </tr> 
        <tr>
            <!--td代表一列 字体为正常效果-->
            <td>html</td>
            <td>5星</td>
            <td>3星</td>
            <td>7天</td>
        </tr>
        <tr>
            <td>css</td>
            <td>5星</td>
            <td>4星</td>
            <td>10天</td>
        </tr>
        <tr>
            <td>js</td>
            <td>5星</td>
            <td>5星</td>
            <td>20天</td>
        </tr>
    </table>
</body>

运行结果图：
在这里插入图片描述
$t a b l e$ 标签用来定义整个表格，为双标签，必须有结束标签， $t a b l e$ 表格在没有添加 $b o r d e r$ 属性之前, 在浏览器中显示是没有表格线的。
$t h e a d$ 、 $t b o d y$ 、 $t f o o t$ 定义表格

<body>
    <!--h3 标题标签-->
    <h3>成绩表</h3>  
    <!--hr 水平线标签-->
    <hr>
    <!--border 边界属性-->
    <table border = "2">
        <!--thead：标签包裹的表头-->
        <thead>
            <!--tr 代表一行-->
            <tr>
                <!-- th 代表一列 字体加粗-->
                <th>科目</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <!--tbody 定义表格的内容-->
            <tr>
                <td>语文</td>
                <td>99</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>60</td>
            </tr>
        </tbody>
        <tfoot>
            <!--tfoot 定义表格底部-->
            <tr>
                <td>总分</td>
                <td>159</td>
            </tr>
        </tfoot>
    </table>
</body>

运行结果图：
在这里插入图片描述

1、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完
后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表
格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。
（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
3、<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建
某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个
总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长
的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

表单标签、浏览者交互

使用表单标签，与用户交互 - 使用 $f o r m$ 创建表单
服务器端程序处理表单传过来的数据是利用表单可以把浏览者输入的数据传送到服务器端。

<form   method="传送方式"   action="服务器文件">

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。所有表单
控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form>标
签之间，否则用户输入的信息可提交不到服务器上。
2.action ：浏览者输入的数据被传送到的地方
3.method ： 数据传送的方式（get/post）。

填用户名和密码 - 文本输入框、密码输入框

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

1. $t y p e$ ：
当 $t y p e$ = " $t e x t$ "时，输入框为文本输入框;
当 $t y p e$ = " $p a s s w o r d$ "时, 输入框为密码输入框。
2. $n a m e$ ：
为文本框命名，以备后台程序 $A S P$ 、 $P H P$ 使用。
3. $v a l u e$ ：
为文本输入框设置默认值。

<input type = "text" placeholder = "请输入用户名">

$p l a c e h o l d e r$ 属性的使用
1、 $p l a c e h o l d e r$ 属性为输入框占位符,里面可以放提示的输入信息。
2、 $p l a c e h o l d e r$ 属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。
3、占位符内容不是输入框真正的内容。

数字输入框：

<input type="number">

1、 $i n p u t$ 的 $t y p e$ 属性设置为 $n u m b e r$ ,则表示该输入框的类型为数字。
2、数字框只能输入数字，输入其他字符无效。
3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。

网址输入框：

<input type="url">

1、 $i n p u t$ 的 $t y p e$ 属性设置为 $u r l$ ,则表示该输入框的类型为网址。
2、数字框的值需以 $h t t p : / /$ 或者 $h t t p s : / /$ 开头,且后面必须有内容,否则表单提交的时候会报错误提示。

邮箱输入框：

<input type="email">

1、 $I n p u t$ 的 $t y p e$ 属性设置为 $e m a i l$ ,则表示该输入框的类型为邮箱。
2、数字框的值必须包含 $@$ 。
3、数字框的值 $@$ 之后必须有内容,否则会报错误提示。

创建文本域：

<textarea  rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。

使用 $l a b e l$ 为 $i n p u t$ 标签穿上衣服

<label for="控件id名称"></label>

作用是为鼠标用户改进了可用性。如果你在 $l a b e l$ 标签内点击文本，就会触发此控件。就是说，当用户单击选中该 $l a b e l$ 标签时，浏览器就会自动将焦点转到和标签相关的表单控件上就自动选中和该 $l a b e l$ 标签相关连的表单控件上。

单选框、复选框，让用户选择：

<input   type="radio/checkbox"   value="值"    name="名称"
   checked="checked"/>

1、 $t y p e$ :
当 $t y p e$ =" $r a d i o$ " 时，控件为单选框
当 $t y p e$ =" $c h e c k b o x$ " 时，控件为复选框
2、 $v a l u e$ ：提交数据到服务器的值（后台程序 $P H P$ 使用）
3、 $n a m e$ ：为控件命名，以备后台程序 $A S P$ 、 $P H P$ 使用
4、 $c h e c k e d$ ：当设置 $c h e c k e d$ =" $c h e c k e d$ " 时，该选项被默认选中
同一组的单选按钮， $n a m e$ 取值一定要一致

使用 $s e l e c t$ 、 $o p t i o n$ 标签创建下拉菜单
1、 $s e l e c t$ 和 $o p t i o n$ 标签都是双标签，它总是成对出现的，需要首标签和尾标签。
2、 $s e l e c t$ 标签里面只能放 $o p t i o n$ 标签，表示下拉列表的选项。
3、 $o p t i o n$ 标签放选项内容，不放置其他标签。
4、 $v a l u e$ ：
在这里插入图片描述
5、 $s e l e c t e d$ =" $s e l e c t e d$ "：
设置selected="selected"属性，则该选项就被默认选中。
在浏览器中显示的结果：

提交按钮：

<input   type="submit"   value="提交">

$t y p e$ ：只有当 $t y p e$ 值设置为 $s u b m i t$ 时，按钮才有提交作用， $v a l u e$ ：按钮上显示的文字

使用重置按钮，重置表单信息：

<input type="reset" value="重置">

$t y p e$ ：只有当 $t y p e$ 值设置为 $r e s e t$ 时，按钮才有重置作用
$v a l u e$ ：按钮上显示的文字。

幸愉聊信奥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML基础

文章目录语义化标签效果标签列表标签图片、链接、表格标签表单标签、浏览者交互语义化标签语义化就是让你的网页更好的被搜索引擎理解，明白每个标签的用途，在什么情况下使用此标签合理。比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签，文章中内容的段落就得放在段落标签中等等。语义化可以：1. 更容易被搜索引擎收录。2. 更容易让屏幕阅读器读出网页内容。段落标签：<p>段落文本</p>csscsscss 在 headheadhead 里，ht
复制链接

扫一扫