HTML的标签内容

1.index

<!--声明文档的类型 标记该文档为HTML5的文件-->

<!DOCTYPE html>

<!-- 页面的根节点 -->

<!--

html中的标签都是闭合标签  闭合标签包含 双闭合和单闭合

双闭合：<html></html>

单闭合：<meta />

 -->

<html>

    <head>

        <!-- 声明头部的元信息  对我们文档 规定编码格式 -->

        <meta charset="utf-8">

        <!-- 包含头部的信息  是一个容器 包含 style title meta script link等 -->

    </head>

    <body>

        <!-- 包含浏览器显示的内容标签 div p a img input等等 -->

        这是我们的文档结构

    </body>

</html>

index

2.head标签相关内容

<!DOCTYPE html>

<html lang="en">

<head>

     <!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） -->

    <!--文档的标题-->

    <title>路飞学城</title>

    <!-- 常用两个属性

        http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

      -->

    <!-- 指定文档的内容类型和编码类型 -->

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- 5秒之后 重定向 到路飞学城的网站 -->

    <!--<meta http-equiv="refresh" content="5;URL=https://www.luffycity.com" />-->

    <!-- 告诉IE浏览器以最高级模式渲染当前网页-->

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <!-- 为了我们的SEO优化  工作的时候下面这两句要写-->

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

    <meta name="description" content="路飞学城">

     <!-- 定义我们的网站图标 -->

      <link rel="icon" href="fav.ico">

    <!-- 引入外部样式表 -->

    <link rel="stylesheet" type="text/css" href="./index.css">

    <!--定义内部样式表-->

    <style type="text/css">

    </style>

    <!--定义内部脚本文件-->

    <script type="text/javascript">

    </script>

    <script src="index.js"></script>

</head>

<body>

</body>

</html>

head标签

3.常用标签一

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>常用标签一</title>

</head>

<body>

    获得体面的工作      和生活!路飞学员通过学习Python

    <div class="p1">

    <p style="height:2000px" id="p1">顶部</p>

    </div>

    <div class="heading">

        <!--boby相关标签-->

        <!--heading: 标题h1-h6 没有h7 不要随意的通过 h 标签改变文字的大小 h 标签换行-->

        杨学伟<h2>啦啦啦啦啦啦</h2>

        路飞学诚

        <!--块级元素 : 1.独占一行 2.可以设置宽高-->

        <h1>路飞学诚</h1><h2>路飞学诚</h2>

        <h3>路飞学诚</h3>

        <h4>路飞学诚</h4>

        <h5>路飞学诚</h5>

        <h6>路飞学诚</h6>

        <!--<h7>路飞学城</h7>-->

    </div>

    <div class="p1">

        <!--段落标签  也是块级元素-->

        <p><b>路飞学城</b>立志帮助<u>有志向</u>的<sup>年轻人</sup>通过<strong>努力学习</strong>获得体面的工作<br>和生活!路飞学员通过学习Python ,金融分析,<span>人工智能</span>等互联网最前沿技术,开启职业生涯新可能</p>

        <p><i>路飞学城</i>立志帮助<a>有志向</a>的<sub>年轻人</sub>通过<em>努力学习</em>获得体面的工作<hr>和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>

    </div>

    <div class ="anchor">

        <!--a标签属于行内标签 : 在一行内显示 设置身高不显示-->

        <!--_self:默认值: 在当前网站打开新的资源

            _blank: 在新的网站打开资源-->

        <a href="https://www.luffycity.com" target="_blank" title="luffy">路飞学城</a>

        <a href="./a.zip">下载压缩包</a>

        <a href="mailto:zhaoxu@tedu.cn" style="wight: 1000px;height: 1000px">联系我们</a>

        <!--返回页面顶部的内容-->

        <a href="#">跳转到顶部</a>

        <!--返回每个id-->

        <a href="#p1">跳转到顶部的段落标签</a>

        <!--

            javascript:  是表示在触发<a>默认动作时，执行一段JavaScript代码

            javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。把a的默认动作取消了

        -->

        <a href="javascript:alert(1)">内容</a>

        <a href="javascript:">内容123</a>

        <!--1. `<b></b>`：加粗-->

        <!--2. `<i></i>`：斜体-->

        <!--3. `<u></u>`：下划线-->

        <!--4. `<s></s>`：删除线-->

        <!--5. `<sup></sup>`：上标-->

        <!--6. `<sub></sub>`：下标-->

        <!---->

        <!--现在如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。-->

    </div>

    <div class="list">

        <!--无序列表-->

        <ul type="none">

            <li>我的账户&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>

            <li>我的订单&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>

            <li>我的优惠券&nbsp;&nbsp;&nbsp;&gt;</li>

            <li>我的收藏&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>

            <li>退出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>

        </ul>

        <!--有序列表-->

        <ol style="list-style: none">

            <li>我的账户></li>

            <li>我的订单></li>

            <li>我的优惠券></li>

            <li>我的收藏></li>

            <li>退出></li>

        </ol>

        <!--

            ol标签的属性：

            type：列表标识的类型

                1：数字

                a：小写字母

                A：大写字母

                i：小写罗马字符

                I：大写罗马字符

            列表标识的起始编号

            默认为1

            ul标签的属性： type：列表标识的类型

                disc：实心圆(默认值)

                circle：空心圆

                square：实心矩形

                none：不显示标识

          -->

     </div>

    <div clas="image">

    <!--1.可设宽高 2.在一行内显示 他叫行内块标签-->

        <ul type="none">

            <li>

                <a href="javascript:"><img src="homesmall1.png" alt="python的图片" style="wight: 200px;height: 200px"></a>

            </li>

            <li>

                <a href="javascript:"><img src="homesmall2.png" alt="linux的图片" style="wight: 200px;height: 200px"></a>

            </li>

        </ul>

    </div>

    <!--

    总结：

        1.块级元素 特点：独占一行，可设宽高，如果不设宽度，则是浏览器的宽度 (div p h ul ol li )

        2.行内元素 特点：在一行内展示，不能设置宽高，它的宽高时根据内容去填充 (a span )

        3.行内块元素 特点：在一行内展示，可设宽高 （img）

    -->

    <!--

    小练习：

        展示两张图片独占一行，鼠标移上去显示小手的状态！

    -->

    <!--

    其他标签：

        <br> 换行

        <hr> 分割线

    特殊符号：

        浏览器显示时 会移除源代码中多余的空格和空行；所有连续的空格或空行都会被算作一个空格；

        注意：html代码中所有连续的空行（换行）空格 都会被显示为 一个空格

        空格：&nbsp;

        特殊符号对照表： http://tool.chinaz.com/Tools/HtmlChar.aspx

        eg:   <     &lt;

              >     &gt;

    -->

</body>

</html>

常用标签一

4.常用标签二---table

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格</title>

</head>

<body>

    <!--表格  给table 对象添加属性 cellspacing 单元格之间的距离-->

    <table border="1" cellspacing="0">

        <!--表格头-->

        <thead>

            <tr>

                <th></th>

                <th>星期一</th>

                <th>星期二</th>

                <th>星期三</th>

                <th>星期四</th>

                <th>星期五</th>

            </tr>

        </thead>

        <!--表格主体-->

        <tbody>

            <!--表格主体的每一行-->

            <tr>

                <td rowspan="3">上午</td>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>w物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td rowspan="2">下午</td>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="6" >课程表</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

常用标签二---table

5.常用标签二---form

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单空间</title>

</head>

<body>

    <div class="form">

        <!--form标签是一个块级元素 被提交-->

        <form action="https://www.baidu.com" method="get">

            显示相关信息

            <p>

                <!--lable是行内元素 input是行内块元素-->

                <label for="user">用户名:</label>

                <input type="text" name="username" id="user" placeholder="请输入用户名">

            </p>

            <p>

                <label for="password">密码:</label>

                <input type="password" name="password" id="password" placeholder="请输入密码">

            </p>

            <!--单选框 checked会被默认选中,产生互斥的效果name值要相同-->

            <p>

                用户性别

                <input type="radio" name="sex" value="男" checked="">男

                <input type="radio" name="sex" value="男">女

            </p>

            <!--复选框-->

            <p>

                用户的爱好

                <input type="checkbox" name="checkfav" value="吃" checked="checked">吃

                <input type="checkbox" name="checkfav" value="喝">喝

                <input type="checkbox" name="checkfav" value="玩">玩

                <input type="checkbox" name="checkfav" value="乐">乐

            </p>

            <p>

                <!--文件上传-->

                <input type="file" name="textFile">

            </p>

            <p>

                <!--文本域-->

                自我介绍

                <textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea>

            </p>

            <p>

                <!--下拉列表-->

                <select name="sel" size="3" multiple="">

                    <option value="深圳" selected="">深圳</option>

                    <option value="北京">北京</option>

                    <option value="沙河">沙河</option>

                    <option value="山东">山东</option>

                </select>

            </p>

            <p>

                <!--显示普通按钮-->

                <input type="button" name="btn" value="提交" disabled="">

                <!--重置按钮-->

                <input type="reset" name="">

                <!--提交from表单使用type=submit按钮-->

                <input type="submit" name="bn" value="submit">

            </p>

        </form>

         <button type="button">按钮</button>  <!--类似 普通的按钮-->

    <!--

    总结：

        按钮： button  reset  submit

        文本： label text password radio checkbox file textarea

        下拉框： select option

    -->

    <!--

    总结：

        html标签：

            head 标签：

                title 标签，显示网站的标题

                meta  标签，提供有关页面的原信息

                style 标签，定义内部样式表

                link  标签，链接css资源文件、网站图标

                script 标签，链接脚本js文件

           body 标签：

                h1 - h6 标题标签

                p       段落标签

                ul      无序列表标签

                ol      有序列表标签

                div     盒子标签

                table   表格标签

                    th 定义表头

                    tr 定义表行

                    td 定义表单元格数据

               form     表单标签

                    ...

                    action

                    method

                    enctype

                    表单控件分类：

                        textarea

                        select option

                        input

                        label

                    ...

               img      标签

               br       换行标签

               hr       分割线标签

               &nbsp;   空格字符

               a        超链接标签

               span     标签

               button   按钮

        -->

    </div>

</body>

</html>

常用标签二---from

6.标签分类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标签分类</title>

</head>

<body>

    <!--

    1.标签属性 注意事项：

        1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。

        2.属性值要用引号包裹起来，通常使用双引号也可以单引号。

        3.属性和属性值不区分大小写，但是推荐使用小写。

    2.标签分类：

        HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

        常用的块状元素：

            <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

        常用的行内元素

            <a> <span> <br> <i> <em> <strong> <label>

        常用的行内块状元素：

            <img> <input>

        块级元素特点：display:block;

            1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

            2、元素的高度、宽度、行高以及顶和底边距都可设置。

            3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

        行内元素特点：display:inline;

            1、和其他元素都在一行上；

            2、元素的高度、宽度及顶部和底部边距不可设置；

            3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

        行内块状元素的特点：display:inline-block;

            1、和其他元素都在一行上；

            2、元素的高度、宽度、行高以及顶和底边距都可设置

        注意

            我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。

    3.标签嵌套规则：

        块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：

            <div><div></div><h1></h1><p><p></div> ✔️

            <a href=”#”><span></span></a> ✔️  a 可以包含 img

            <span><div></div></span> ❌

        某些块级元素不能放在p标签里面，比如

            <p><ol><li></li></ol></p> ✔️

            <p><div></div></p> ❌ 个别例外，大家注意

        有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

            h1、h2、h3、h4、h5、h6、p

        li元素可以嵌入ul，ol，div等标签

            <ul>

                <li>

                    <ul>

                        <li>

                            <div>

                            </div>

                        </li>

                        <li>

                            <ol>

                                <li></li>

                                <li></li>

                                <li></li>

                                <li></li>

                            </ol>

                        </li>

                    </ul>

                </li>

            </ul>

    -->

    <div class="wrapper">

        <!--块级元素 :div p h1--h6 ol ul table from li

            1.独占一行

            2.可以设置宽度和高度，如果设置了宽度和高度，则就是当前的宽高，

            如果宽度和高度没有设置，宽度是父盒子的宽度，高度根据内容填充

        -->

        <div class="left">

            这是路飞学诚的网站

            <div>这是我的段落

                <div style="width:500px;height: 100px">这是我的爱好</div>

                <ul>

                    <li>

                        <h2>抽烟</h2>

                    </li>

                    <li>

                        <ol>

                            <li>喝酒</li>

                            <li>烫头</li>

                        </ol>

                    </li>

                </ul>

            </div>

        </div>

        <div class="right">

            <!--a span br i em strong lable

                行内元素:在一行内显示，不能设置身高和宽度，宽度和高度根据内容填充

            -->

            <a href="#" style="width:500px;height: 100px">百度</a>

            <a href="#">路飞</a>

            <span style="width:500px;height: 100px"></span>

            <span>一些文本</span>

        </div>

        <div class="lnline-block">

            <!--行内快

                1.在一行内显示

                2.可设置宽高

            -->

            <img src="homesmall1.png" alt="一张图片">

            <input type="text" name="username" style="width:100px;height: 50px">

        </div>

    </div>

</body>

</html>

标签分类

前端开发---HTML---标签的更多相关文章

  1. 前端开发-3-HTML-body标签

    body标签 h.p.a.ul.ol.div.img. 想要在网页上展示出来的内容一定要放在body标签中. 把我们之前海燕那一段HTML代码贴过来,保存到一个HTML格式的文件中. <!DOC ...

  2. 前端开发-2-HTML-head标签

    browser英 /'braʊzə/ 美 /'braʊzɚ/ 浏览器 explorer英 /ek'splɔːrə(r)/ 美 /ɪk'splɔrɚ/ 探险者,资源管理器 1.index 2.head标 ...

  3. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  4. Web前端开发最佳实践（5）：正确闭合HTML标签，停止使用不标准的标签和属性

    正确闭合HTML标签 HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性.元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元 ...

  5. python 之 前端开发（HTTP协议、head标签、img标签、a标签、列表标签）

    第十一章前端开发 11.1 HTTP 1.1引入了许多关键性能优化:keepalive连接,请求流水线,chunked编码传输,字节范围请求等 1.keepalive连接: 1.长连接允许HTTP设备 ...

  6. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  7. 前端开发必备！Emmet使用手册

    介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片 ...

  8. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

  9. 移动web页面前端开发总结

    移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...

  10. 6. web前端开发分享-css,js移动篇

    随着移动市场的逐步扩大及相关技术的日趋完善,对前端开发提出了新的岗位要求,在继承前人成果的基础上需要在新的历史条件下有新的创新.移动端的开发,虽然没有IE6众多问题的折磨,但是多平台,多设备的兼容,也 ...

随机推荐

  1. ef 某些字段更新 某些字段不更新

    不更新 _pocDbContext.Entry<UploadFileActiveTask>(activeTask).Property("id").IsModified ...

  2. java导出json格式文件

    生成json文件代码: import java.io.File; import java.io.FileWriter; import java.io.Writer; public class Crea ...

  3. Excel如何实现两个工作表数据的对比

    https://jingyan.baidu.com/article/63f236281f17650208ab3d97.html Sub 数据对比() Dim i As Integer Dim j As ...

  4. mybatis与hibernate区别与应用场景

    hibernate:是一个标准化的ORM框架.入门的门槛较高,不需要程序写sql,语句就自动生成了.对sql进行优化.修改比较困难. 应用场景:适用于中小企业需求变化不多的项目,比如后台管理系统,er ...

  5. Django之Web框架本质及第一个Django实例

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...

  6. A - ACM Rank Table

    ACM contests, like the one you are participating in, are hosted by the special software. That softwa ...

  7. Page Visibility API 页面是否获取焦点 Event: visibilitychange

    W3C 文档 https://www.w3.org/TR/page-visibility/ MDN 文档 https://www.w3.org/TR/page-visibility/ // Docum ...

  8. Maven知识点积累二

    ①maven常用命令: mvn clean:清除target下编译生成的class文件 mvn compile:编译 mvn package:打包放到target下 mvn install:打包并放到 ...

  9. SQL Server 2016 共享功能目录 不可修改

    x 个人电脑上没有安装MSSQL,以前需要链接数据库写SQL,都是在{VS ->>视图->>SQL Server对象资源管理器}直接链接数据库进行访问操作的... 但是确实有些 ...

  10. Java的各种打包方式

    JAR (Java Archive file) 包含内容:class.properties文件,是文件封装的最小单元:包含Java类的普通库.资源(resources).辅助文件(auxiliary ...