HTML学习

最新推荐文章于 2024-09-23 17:12:42 发布

来个人打球

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量546

点赞数

分类专栏： Web前端文章标签： html 标签

本文链接：https://blog.csdn.net/ligerendaqiu123/article/details/54319190

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML-标签（HTML官网）

心血来潮的第三天学习标签，希望能坚持到把HTML学完，目标就是能看能改就好：）

一个HTML文档可能就是我们所看到的一个甚至几个网页。

常用的标签

标签（基础）	说明	理解
`<!-- -->`	注释	写点人生哲理什么的
`<!DOTYPE>`	文档类型	给文档发身份证证明身份
`<HTML>`	HTML文档	这是一个HTML的文档
`<head>`	文档头	文档呈现时必须或者通用的一些标签的容器
`<title>`	文档标题	head容器中必须标签，用来显示网页name
`<meta>`	元信息	head容器中通用标签，设置关键词，分类，显示方式等等，它帮助浏览器，网络爬虫，其他计算机理解这个文档
`<link>`	链接	用来描述本文档和外部资源的关系，大多数用来定义外部关联的css样式表

标签	说明
`<button>`	按钮
`<canvas>`	图形
`<form>`	表单
`<textarea>`	多行文本输入
`<select>`	下拉列表
`<datalist>`	可输入下拉列表
`<input>`	输入空间
`<audio>`	音频
`<video>`	视频
`<image>`	图像
`<dialog>`	对话框/窗口
`<table>`	表格

标签(格式)	说明
`<body>`	文档主体
`<h1> to <h6>`	文档标题
`<div>`	节(标记不同行)
`<span>`	行（标记同一行）
`<p>`	段落
`<footer>`	页脚
`<header>`	页眉
`<hr>`	水平线
`<br>`	换行

使用上述功能完成一个简单的登陆界面

把一个txt后缀改为.html，之后写入如下代码，保存用浏览器打开即可看到效果。

<!DOCTYPE html>
<html>
<head>
<title>
我的登陆界面
</title>
<style>

div{

color: red;

background-color: yellow;

width: 350px;

height: 80px;

}

input{

width: 100px;

height: 20px;

}

</style>

</head>
<body>

<form action="action_page.php">
用户登录界面<hr>
     First name:<br>
     <input type="text" name="firstname" value="Mickey">
    <br>
     Last name:<br>
     <input type="text" name="lastname" value="Mouse">
     <br><br>
<input type="submit" value="Submit"><br><br>
</form> 

<div>
我在div标签内，字体颜色统一设置<br>
我也在标签内，字体颜色也是统一设置<br>
<p>我是段落</p>
</div>
我没在div标签内<br>
</body>
</html>

测试结果

几个需要深入学习的标签

head
标签用于定义文档的头部，它是所有头部元素的容器中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

看到一个比较好的介绍head结构的文章HTML head结构基本描述了head能描述的文档的各种属性。

提示：应该把标签放在文档的开始处，紧跟在后面，并处于标签或标签之前。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <base href="http://www.w3school.com.cn/i/" />
        <base target="_blank" />
        <!-- 
            标签为页面上的所有链接规定默认地址或默认目标。
            通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
            使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 
            来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

            在 HTML 中，<base> 标签没有结束标签；在 XHTML 中，<base> 标签必须被正确地关闭。
            <base> 标签必须位于 head 元素内部。

            target可选的属性
            _blank
            _parent
            _self
            _top
            framename
         -->
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <!--设置网页的文件编码-->
        <meta http-equiv="expires" content="2005/05/05 18:00:00">
        <!--脱机浏览的过期时间-->
        <meta http-equiv="pragma" content="no-cache">
        <!--禁止网页从缓存中读取-->
        <meta http-equiv="Refresh" content="5;http://users7.nofeehost.com/luan123/">
        <!--网页重新定向-->
        <meta http-equiv="set-cookie" content="2005/05/05 18:00:00">
        <!--设置网页的cookie过期时间-->
        <meta http-equiv="Window-target" content="_top">
        <!--设置网页中链接的目标窗口-->
        <meta http-equiv="Page-Enter" content="revealTrans(duration=1000000,transition=50000000)">
        <!--设置网页的打开效果-->
        <meta http-equiv="Page-Exit" content="revealTrans(duration=1000000,transition=50000000)">
        <!--设置网页的关闭效果-->
        <meta name="keywords" content="overmind,zerg,protoss">
        <!--设置网页的关键字，搜索的时候优先！！！重要！！！ 该数据被搜索引擎编入索引-->
        <meta name="description" content="哈哈哈哈哈">
        <!--插入描述 搜索时被搜索引擎编入索引-->
        <title>无标题文档</title>
        <!-- <title> 标签是 <head> 标签中唯一要求包含的东西。 -->
        <link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
        <!-- 
            在 HTML 中，<link> 标签没有结束标签。
            在 XHTML 中，<link> 标签必须被正确地关闭。
            <link> 标签定义文档与外部资源的关系。
            <link> 标签最常见的用途是链接样式表
            link 元素是空元素，它仅包含属性。
            此元素只能存在于 head 部分，不过它可出现任何次数。
            标准属性
            id, class, title, style, dir, lang, xml:lang
         -->
        <style type="text/css">
            h1 {color:red}
            p {color:blue}
        </style>
        <!-- 
            <style> 标签用于为 HTML 文档定义样式信息。
            在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
            type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
            style 元素位于 head 部分中。

            所有主流浏览器都支持 <style> 标签。
         -->

         <script type="text/javascript">
            document.write("Hello World!")
         </script>
         <!-- 
             <script> 标签用于定义客户端脚本，比如 JavaScript。
             script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
             必需的 type 属性规定脚本的 MIME 类型。
             JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

             假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行。<frameset> 标签之后的脚本会被忽略。
             请参阅 noscript 元素；对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说，该元素非常有用。
          -->   

          <noscript>Your browser does not support JavaScript!</noscript>
          <!-- 
            noscript 元素用来定义在脚本未被执行时的替代内容（文本）。
            此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。
            注释：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。
            注释：无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！
           -->
    </head>
    <body>
        aaa
    </body>
</html>

使用小结

一个HTML就是一个页面，个人给标签分类如下
一类元素标签，即页面的构成比如这里的字符串、文本框、按钮、表格、对话框等。
一类布局标签，即控制元素标签在页面呈现方式比如如段落、节、标题、块等。
一类属性标签，即控制元素标签的一些属性，如大小、颜色、粗体、斜体等。
这三类标签互相组合就可以让我们的页面呈现出来了，当然这是简单的页面，复杂的还需后续学习补充。