HTMl标签；知识回忆；笔记分享；

攻城狮幼崽

于 2024-08-25 21:00:00 发布

阅读量724

点赞数 10

分类专栏：笔记分享 Java笔记分享 HTML 文章标签： html 前端笔记

本文链接：https://blog.csdn.net/weixin_72637723/article/details/141500596

版权

Java笔记分享同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

笔记分享

4 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

HTML标签是用于定义和组织网页内容的基础构建块。每个标签都有特定的作用。

一，标准结构标签：

HTML文档标准结构：

<html>
        <head>
        </head>
        <body>
                this is my second html... 
        </body>
</html>

【1】html标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

【2】head标签---》里面放的是页面的配置信息

head标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

【3】body标签---》里面放的就是页面上展示出来的内容

body 元素是定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，标签是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容！

二，常用标签详解

1，head中常用标签：

<html>
        <!-- 这是一个注释，注释的快捷键是ctrl+shift+/-->
        <!--
                head标签中：放入：页面的配置信息
                head标签中可以加入：
                <title>、<meta>、<link>、<style>、 <script>、 <base>。
        -->
        <head>
                <!--页面标题-->
                <title>百度一下，你就知道</title>
                <!--设置页面的编码，防止乱码现象
                        利用meta标签，
                        charset="utf-8" 这是属性，以键值对的形式给出  k=v a=b 
                        告诉浏览器用utf-8来解析这个html文档
                -->
                <meta charset="utf-8" /><!--简写-->
                <!--繁写形式：（了解）-->
                <!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />-->
                <!--页面刷新效果-->
                <!--<meta http-equiv="refresh" content="3;https://www.baidu.com" />-->
                <!--页面作者-->
                <meta name="author" content="msb;213412@qq.com" />
                <!--设置页面搜索的关键字-->
                <meta name="keywords" content="架构师课程" />
                <!--页面描述-->
                <meta name="description" content="架构师页" />
                <!--link标签引入外部资源-->
                <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
        </head>
       
        <body>
              
        </body>
</html>

2，body中常用标签：

（1）body中的图片标签：

<img /> ：没有结尾关闭为单标签是行级标签（自动和其它标签在一行如果没有换行标签）
src ：图片地址：uri地址
height：高
width：宽
alt：在图片因意外未加载成功时，该属性值占据图片位置进行显示的信息。
title：图片鼠标悬浮在图片上方的提升信息
<br/> ：换行标签

（2）超链接标签：

····<a></a>中可以为图片也可以为汉字等。
··· 属性：
href：写跳转后的目标地址加对应服务器的变量名点击后直接转入搜索值的结果页面。
title：图片鼠标悬浮在链接上方的提升信息

（3）表单标签：

<form></form>：表单标签包裹所有的表单元素。

属性：
action：表单添加action属性用于按钮提交表单内容的目的地址

method：
表单数据提交的方式

target：表单数据响应的信息显示的位置（开新页面还是在本页面）

常用表单元素：

文本框：

<input></input>默认type是文本输入框

输入框，宽和高用style选择。

属性：name ：用来保存用户输入的信息内容

maxlength：限制文本框输入的最大长度

placeholder：文本框在未输入值前的提示信息

readonly：只读（在使用时因为只有一个选择且和其属性名相同，所以在使用时可以不赋值。）

value：为文本框赋值（用户输入的值就是value值，可以用其设置默认值：在文本框默认有）

disable：禁用也可以简写disable，不赋值。禁用和只读区别是禁用的值在提交表单时不会被提交。

type=“text”：设置input标签为文本框

输入框中的属性name ，在输入框中输入的内容都会赋值d。然后用提交按钮提交给表单。

密码框：

input的type=“password” ，属性和文本框一致

单选按钮：

input的type=“radio” 属性和文本框一致，但是name还有区分是否为同一组单选按钮的作用，且有value属性值才会提交按钮内容

注：type选择类型时不能有空格，否则赋值失败
disabled：让该单选按钮禁用
checked：默认，开始时有其属性的按钮默认选择

复选框：

除了 input 的type=“checkbox” 其余和单选按钮一致。

隐藏域：

input 的type=“hidden ” 不会显示在页面中，但里面内容会提交

按钮：

时间控件：

邮箱控件：

下拉列表：

（4）表格标签：

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--表格：4行4列
                        table:表格
                        tr:行
                        td:单元格
                        th:特殊单元格：表头效果：加粗，居中
                        默认情况下表格是没有边框的，通过属性来增加表框：
                        border:设置边框大小
                        cellspacing：设置单元格和边框之间的空隙
                        align="center"  设置居中
                        background 设置背景图片 background="img/ss.jpg"
                        bgcolor :设置背景颜色
                        rowspan:行合并
                        colspan：列合并
                -->
                <table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" >
                        <tr bgcolor="bisque">
                                <th>学号</th>
                                <th>姓名</th>
                                <th>年纪</th>
                                <th>成绩</th>
                        </tr>
                        <tr>
                                <td align="center">1001</td>
                                <td>丽丽</td>
                                <td>19</td>
                                <td rowspan="3">90.5</td>
                        </tr>
                        <tr>
                                <td colspan="2" align="center">2006</td>
                                <td>30</td>
                        </tr>
                        <tr>
                                <td>3007</td>
                                <td>小明</td>
                                <td>18</td>
                        </tr>
                </table>
        </body>
</html>