HTML标签1

作者: Dxes | 来源:发表于2019-12-02 21:09 被阅读0次

HTML标签类型
1,html标签
HTML标签1
HTML标签1
前端组件总结
网页设计：HTML常用的五种标签
HTML标签的权重
HTML基础知识
2022-01-18 html第一天
HTML 小结

1.web标准
web标准是万维网指定的网页开发标准，主要包含三类：
结构标准 - HTML（决定网页中农的内容）
表现标准 - css（决定网页中内容的布局）
行为标准 - JavaScript（决定网页内容动态变化的部分）

2.认识HTML
HTML又叫超文本标记语言（和Markdown一样）
一个网页本质就是一个HTML文件

3.html文件基本结构
一个HTML标签中有一个head标签和一个body标签

4.HTML基本语法
1）语法
双标签（常规标签)：<标签名属性名1=值1 属性2=值2 ……>标签内容</标签名>
单标签：<标签名属性名1=值1 属性2=值2 ……> 或者 <标签名属性名1=值1 属性2=值2 ……/>

2）说明
<>和/ - 都是固定写法
标签名 - 只能写HTML相应版本提供的标签名；什么标签是什么类型是确定的
注意：标签名前不能出现空格
属性 - 属性是以‘属性名=值’的形式出现，多个属性之间用空格隔开
属性的顺序不影响结果；不管是什么属性的值，值必须用双引号引起来
标签内容 - 任何内容都可以作为标签内容；例如：文字、标签、文字和标签的组合

注意：HTML中大小写不敏感
DOCTYPE说明html版本
html - html5

1.head的作用
head标签主要负责网页图标和标题的显示以及网页的基本设置

2.head标签中的标签
head中可以写的标签：meta、title、link、style、script、base
meat - 设置网页元数据（例如：网页的编码方式、网页的编码方式、网页的搜索关键字、网页介绍等
title - 设置网页标题
link - 导入文件（设置网页图标、导入外部样式表

<head>
设置文本编码方式
meta charset="UTF-8"
设置网页标题
<title>head标签</title>

设置网页图标
rel属性 - 设置被导入文件的作用;
stylesheet - 样式表
icon - 网页图标
type属性 - 设置文件类型：文件类型/文件后缀
text/css - 导入的文件是：后缀是.css的文本文件
image/png - 导入的文件是图片，图片后缀是.png
href属性 - 被导入的文件路径

文本标签

1.标题标签：h1 ~ h6
如果文字的内容是标题的时候才选择标题标签
-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>

<p>一个进程中默认有且只有一个线程，这个线程叫主线程，默认情况所有的代码都在主线程中执行进程中主线程以外的线程叫子线程.1.怎么让让进程拥有子线程
在进程中创建threading模块中的Thread类或Thread类的子对象。
2.程序（进程）结束
只有进程中的线程都结束了进程才会结束
线程怎么结束：线程中任务执行完成，线程才会被销毁
</p>
<p>一个进程中默认有且只有一个线程，这个线程叫主线程，默认情况所有的代码都在主线程中执行进程中主线程以外的线程叫子线程.1.怎么让让进程拥有子线程
在进程中创建threading模块中的Thread类或Thread类的子对象。
2.程序（进程）结束
只有进程中的线程都结束了进程才会结束
线程怎么结束：线程中任务执行完成，线程才会被销毁
</p>

<font>发布时间</font><br />
<font>文章作者</font>

<p>【CNMO新闻】近年来，<b><i>中国近代文学家、思想家</i></b>鲁迅先生已经逐渐接近一名网红，虽然这和他本人的所作所为所说也许并没有任何关系。
我们都喜欢在表达观点的时候，用<strong><em>“鲁迅曾说过”</em></strong>作为前半句，但并不在乎鲁迅到底有没有说过这句话，
这也从侧面反映了鲁迅在我们心中的特殊意义，<u>只要是他说的似乎就是可信的。</u>

</p>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
    </head>
    <body>
        <!--1.无序列表：ul-li
            ul标签    -   表示整个列表容器
            li标签    -   表示列表中的元素
        -->
        <ul type="circle">
            <li>python</li>
            <p>python是最有前途的学科</p>
            <li>Java</li>
            <li>H5</li>
            <li>测试</li>
            <li>Go语言</li>
            <li>物联网</li>
        </ul>
        <!--2.有序列表：ol-li
            ol标签    -   表示整个列表中的元素
            li标签    -   表示列表中的元素
        -->
        <ol>
            <li>将肉洗干净，然后加水煮到8分熟</li>
            <li>捞起来切片</li>
            <li>锅里放油，然后再放干海椒、花椒、生姜，砸香</li>
            <li>在将肉放进去炸</li>
            <li>起锅放油和白糖</li>
        </ol>
        <!--3.自定义标签：dl-dt-dd
            dl  -   表示怎个列表容器
            dt  -   表示一个分组
            dd  -   每个分组中的内容
        -->
        <dl>
            <dt>文科</dt>
            <dd>历史</dd>
            <dd>地理</dd>
            <dd>政治</dd>
            
            <dt>理科</dt>
            <dd>化学</dd>
            <dd>生物</dd>
            <dd>物理</dd>
        </dl>
        
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片和超链接</title>
    </head>
    <body>
            <hr id="top" />
        <!--1.图片标签：img
            1）src属性：图片地址
                    本地文件路径（绝对路径、相对路径）       
                    网络图片路径
            2）title属性：图片标题（鼠标悬停在图片上等一会儿才会出现）
            3）alt属性：图片加载失败的时候的提示信息
        -->
        <!--显示本地图片-->
        <img src="img/img/luffy.jpg/"><br />
        <!--显示网络图片-->
        <img src="https://www.baidu.com/img/bd_logo1.png"  />
        
        <img src="img/img/luffy2.png" title="路飞" alt="加载失败……" />
        
        <!--2.超链接：a
            <a href="跳转目的地">可见可点击的部分</a>
            1)href属性    - 跳转的目的地
                a.网页地址  - 跳转到指定网页
                b.本地HTML文件地址    - 在浏览器中直接打开指定html文件对应的网页
                c.选择器       -  将当前页面滚动到选择器所在的位置
                d. #        -   刷新页面
            2）target属性  -   页面打开方式
                a._self     -   默认值，在当前页面中渲染出新的页面
                b._blank    -   不动原页面，在新窗口中渲染新的页面
                
        -->
    
        <!--文字超链接-->
        <a href="https://www.baidu.com" target="_blank">百度</a><br />
        <!--图片超链接-->
        <a href="https://www.baidu.com"><img src="img/img/aaa.ico/>"</a>
        
        <a href="03.-列表标签.html">列表</a>
        <hr />
        <a href="#第一段">第一章</a>
        <a href="#第二段">第二章</a>
        <a href="#第三段">第三章</a>
        <a href="">刷新</a>
        <h1 id="第一段">第一章</h1>
        <p>“狂妄的丫头，真是该教训。”
            <br />
                “你们不要出手，让我来对付她。”
            <br />
                悦洋<br />的三只界灵之中，也有一名女界灵。
            
                这名女界灵，也是有着几分姿色，不过若与羽纱相比，便暗淡了不少。<br />
            <br />
                羽纱的出场，获得了全场的赞叹，但她却没有得到这样的待遇，同为来自修罗灵界的界灵，这让她本就不爽。
            <br />
                而羽纱又说出那样的话，她自然难以忍受。
            <br />
                “好，那这个丫头，可就交给你了。”
            <br />
                其他两名界灵纷纷说道。
            <br />
                可就在下一刻，羽纱动了，她如鬼魅一般，来到了那名女界灵面前。
            <br />
                只见身形一转，那笔直而纤细的长腿，如鞭子一般，向那名女界灵抽打而去。
            <br />
                一<br />切太快了，那名女界灵还未反映过来，已被羽纱击中。
            
                这一腿，正中腰部，她飞射而出，若不是有墙壁阻拦，想必飞的更远。
            <br />
                但落地之时，她不仅腰鼓碎裂，更是灵魂受损，已是无力起身。
            
                “这！！！”
                <h1 id="第二段">第二章</h1>
            
                一切来的太快，当人们反应过来之时，那名女界灵已是呆在墙角，身负重创。
            <br />
                但人们却知道发生了是什么，必然是羽纱出手，将那女界灵打成了重伤。
            <br />
                但最过震惊的，若是除了悦洋，便是另外两只界灵了。
            <br />
                毕竟先前的他们，就与那女界灵并肩而立，他们最能感受到，羽纱出手的气息。
            
                虽说羽纱，与他们一样，修为都在一品至尊境。
            <br />
                但羽纱刚刚的出手，其实力，绝对不止一品至尊境那么简单。
            
                然而，众人还未在震惊之中回国身来，羽纱已是再度出手。
            
            
                这一次，她连续出脚，又是两个鞭腿，分别向那两只男界灵甩了过去。
            <br />
                这两击连续命中，那两只男界灵，如那女界灵一样倒飞而去。
            <br />
                只不过，相比于那女界灵，这次羽纱的出脚，更为狠辣，瞄准的地方乃是面门。
            <br />          
                老实讲，那两只男界灵，修为都在一品至尊境，修为皆是不弱，就连其容貌也是相当的英俊。
            
                可羽纱这两个鞭腿落下，那两只男界灵，已不止是面目全非，而是半个脑袋都被踢碎了，相比于那还情形的女界灵，这两位落地之时，已是昏死状态。
            
                而在连续出手，眨眼之间，就击败了三个，同境界的界灵之后，羽纱则是将目光，投向了悦洋。
            
                看到羽纱的目光，悦洋吓的脸都绿了。
            
                他害怕，害怕羽纱对他出手。
                <br />
            
                事已至此，他能感受的到，羽纱虽是一品至尊，但却拥有逆天战力，并且羽纱的逆天战力，极为强横。
            <br />
                若是羽纱对他出手，连他也可能不是羽纱的对手。
            <br />
                不过羽纱却并未出手，而是问道：“还有吗？”
            <br />
                “没…没了。”
            <br />
                “姑娘，我认输。”
            <br />
                悦洋赶忙说道。
            <br />
                眼见着悦洋认输，羽纱也没有多说，而是直接转身，走进了界灵大门之中。
                “输了的，就出去吧。”
            <br />
            
                如意老人说话之间，手臂又是一挥，下一刻悦洋以及辰光的身影，便同时从这如意古堡之内消失。
            
                二人再度出现之时，已是在如意古堡之外。
            
                外面的人，对于如意古堡，并没有太多期待，当那些后辈踏入其中后，人们便都将目光，投向了远古灵域所在的方位。
            
                可当悦洋，和辰光出现之后，仍是引起了注意。
            
                “悦洋和辰光，他们怎么出来了？”
            
                “辰光的伤，这是怎么回事？
            
                有人发出惊叹之后，便立刻引起了其他人的注意。
            
                当人们发现，辰光身负重创，而悦洋的界灵伤势更重之后，人们也是倍感意外。
            
                “徒儿，这是怎么回事，是谁伤了你们？”
            
                此时，最首当其冲的，乃是悦洋与辰光的师尊。
            
                如意古堡，他们的弟子曾多次进入，对于如意古堡，他们是较为了解的。
            
                如意古堡内的如意镜，虽然想得到宝物，是需要破解阵法的，但里面的阵法，却不会将人重创。
            
                所以他们下意识的就觉得，他们弟子的伤，乃是人为所致。
            
                “师尊，弟子无能。”
                <h1 id="第三段">第三章</h1>
                悦洋和辰光同时说道。
            
                “无能？到底是怎么回事？”
            
                此时，莫说他们师尊好奇，就连其他人也都好奇。
            
                他们都很想知道，这究竟发生了什么。
            
                “进入如意古堡的通道中，有着一道隐藏之门。”
            
                “这是我们之前都不曾知道的事。”
            
                “但今日，却有一个家伙，发现了那道隐藏之门。”
            
                “而只要成功通过隐藏之门，就会得到额外奖励。”
            
                “我与辰光皆是不服，所以便对其发起挑战。”
            
                “而挑战失败的下场，就是从今以后，再也无法踏入如意古堡。”
            
                悦洋并未隐瞒，将事情的经过，一五一十的讲述起来。
            
                而听闻这件事后，人们也都颇感惊讶。
            
                人们都很好奇，那个能够连续击败辰光和悦洋的，究竟是何人。
            
                “是何人击败了你们？”
            
                然而，还不待悦洋与辰光的师尊询问，便有另外一道声音率先响起。
            
                顺声观望，所有人都是目光变化。
            
                那是一名青年，这名青年，身穿一袭白衣，头戴发冠，面容俊朗。
            
                尤其那双眼眸，格外有神，宛如蕴藏万千星辰。
            
                他是那种，一眼望去，宛如仙人一般男子。
            
                而在场之人，几乎没有人不知道他的身份。
            
                他便是，悟道圣尊的得意弟子。
        </p>
        
        <a href="#">刷新</a>
        <a href="#top">返回顶部</a>
    </body>
</html>

表格标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>
    <body>
        <!--表格标签：table-tr-td
            1）table标签   -   代表整个表格
            border属性    -   设置表格框线的宽度
            cellspacing属性 - 设置单元格与单元格以及单元格与表格之间的间隙，默认1
            bordercolor属性   -   设置边框颜色；颜色单词；或者是#6位的16进制颜色值
            bgcolor属性   -   设置整个表格的背景颜色
            width属性 -   设置整个表格的宽度、
            height属性    -   设置整个表格的高度
            align属性 -   设置整个表格在网页中的对齐方式：center，left（默认）,right
            cellpadding属性   -   设置整个表中所有单元格中的内容到边框的距离
            
            2）tr标签      -   一个tr代表一行
            bgcolor属性   -   设置整行的背景颜色
            height属性    -   设置指定行的高度
            align属性 -   设置指定行中的所有单元格中的内容在单元格中的对齐方式
            cellpadding属性   -   设置整行中所有单元格中的内容到边框的距离
            
            3）td标签      -   一个td代表一个单元格
            bgcolor属性   -   设置单元格的背景颜色
            width属性 -   设置指定单元格所在列的宽度
            align属性 -   设置指定单元格中的内容在单元格中的对齐方式
            cellpadding属性   -   设置指定单元格中的内容到边框的距离
            colspan属性   -   设置单元格的列合并
            rowspan属性   -   设置单元格的行合并
            
        -->
        <table width="600" height="400"border="2" cellspacing="0" bordercolor="#fdb353" bgcolor="yellowgreen" align="center" cellpadding="10">
            <tr bgcolor="aqua" align="center">
                <td bgcolor="darkorchid">1行1列 </td>
                <td>1行2列</td>
                <td>1行3列</td>
            </tr>
            <tr>
                <td width="150">2行1列</td>
                <td align="center">1</td>
                <td>2</td>
            </tr>
            <tr> 
                <td>3</td>
                <td>5</td>
                <td>8</td>
            </tr>
            <tr>
                <td>8</td>
                <td>8</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>9</td>
                <td>9</td>
            </tr>
        </table>
        <br />
        <!--练习：写一个3*3的细线表格-->
        <table border="0" bgcolor="black" cellspacing="1" width="500" height="500">
            <tr bgcolor="white">
                <td >1</td>
                <td >2</td>
                <td >3</td>
            </tr>
            <tr bgcolor="white">
                <td >4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr bgcolor="white">
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>
    </body>
</html>

复杂表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格的单元格合并</title>
    </head>
    <body>
        <!--
            colspan属性   -   列合并
            rowspan属性   -   行合并
        -->
        <table border="1" cellspacing="0" width="400" height="400">
            <tr>
                <td></td>
                <td></td>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2" rowspan="2"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td rowspan="3" colspan="2"></td>
                <td rowspan="3"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
        <br />
        <br />
        <table width="400" height="400" border="1"  cellspacing="0" align="center">
            <tr>
                <td ></td>
                <td colspan="2"></td>
                <td rowspan="3" colspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td rowspan="2"></td>
                <td rowspan="2" colspan="2"></td>
                
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td rowspan="2"></td>
                <td colspan="2"></td>
                <td></td>
                <td></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2" width="80"></td>
            </tr>
        </table>
    </body>
</html>