HTML入门

最新推荐文章于 2024-07-08 14:13:57 发布

折戟沉沙灬

最新推荐文章于 2024-07-08 14:13:57 发布

阅读量205

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41963640/article/details/82391850

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、超文本标记语言

HTML:Hyper Text Markup Language 超文本标记语言

1.1、基本标签

标签	描述
<!doctype html>	网页文档中的第一行内容：标记当前文档是一个网页文档
<html></html>	网页内容的标记，网页中所有的内容都要包含在这一对标记中
<head></head>	网页属性的标记，如网页标题、编码等等
<meta>	网页编码设置，如：<meta charset=’utf-8’>
<title></title>	网页标题标签，展示在浏览器标题栏
<body></body>	网页展示内容的标签，网页上要展示的内容都包含在这对标签中

基本样式：
这里写图片描述

1.2、常见标签

标签	描述
<h1>	一级标题标签，选中的内容变大变粗，一共有6种，<h6>最小
<p>	段落标签，标记一段文本内容为一个段落，不同的段落之间空一行
<hr>	分割线，很少使用
<br>	换行
<b>	加粗等价于<strong>
<i>	斜体等价于<em>
<u>	下划线
<del>	删除线
<span>	局部内容选择标签
<a>	超链接标签 href指向网址;也可以指向锚链接，下锚点<a name=”miao_name”>锚链接<a href=”#miao_name”>
<img>	设置展示图片的标签，src指向的是要展示的图片[相对路径]；alt图片损坏时展示的文字
<audio>	音频标签
<video>	视频标签,仅支持几种常见的视频格式（MP4、WebM、Ogg）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兰亭集序</title>
    <style>
        .p_suojin{
            text-indent: 2em;
        }
        #div_p{
            top:130px;
            left:380px;
            position:absolute;
            width: 600px;
            height: 400px;
        }
        #div_biaoqian{
            top: 130px;
            left:20px;
            position:absolute;
            width:350px;
            height:400px;
            border-right: 1px solid black;
        }
        body{
            background-color: azure;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">兰亭集序</h1>
<hr>
<p style="text-align: center">作者：<em>王羲之</em></p>
<div id="div_p">

<p class="p_suojin"><strong>永和九年</strong>，<b><small>岁在癸丑，暮春之初，</small></b>会于会稽山阴之兰亭，修禊事也。
群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水,
    列坐其次。<span style="background-color: antiquewhite;color: indigo">虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。</span></p>

<p class="p_suojin">是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，
足以极视听之娱，信可乐也。</p>

<p class="p_suojin"><i>夫人之相与，俯仰一世。</i>或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。
虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，不知老之将至；及其所之既倦，情随事迁，
感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀，况修短随化，终期于尽！
<u>古人云：“死生亦大矣。”岂不痛哉！</u></p>

<p class="p_suojin">每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。<del>固知一死生为虚诞，
齐彭殇为妄作。</del>后之视今，亦犹今之视昔，悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。
后之览者，亦将有感于斯文。 </p>
</div>
<div id="div_biaoqian">
<p>h1-h6:一级标题至六级标题。</p>
<p>em和i:斜体</p>
<p>b和strong：加粗字体</p>
<p>del:标记删除文本</p>
<p>u:下划线</p>
<p>p:段落标签，不同段落之间空一行。</p>
<p>span:局部内容选择标签</p>
 <p>a:<a href="https://hanyu.baidu.com/shici/detail?pid=c6d897031c11413f91da19888607a53f&from=kg0">兰亭集序</a></p>
</div>
</body>
</html>

这里写图片描述

1.3、表格标签

标签	描述
<table></table>	表格标签
<thead>	标题栏
<tbody>	表格主体
<tfoot>	表格注脚
<tr>	行标签
<th>	标题栏列标签
<td>	表格主体列标签

一般只使用<table></table> <tr> <td>
rowspan=”行数”：表示当前单元格跨几行；
colspan=”列数”：表示当前单元格跨几列；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px" style="width: 400px;height: 100px">
        <tr>
            <td rowspan="3">内容</td> #跨行
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td colspan="2">内容1</td> #跨列
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
</body>
</html>

这里写图片描述

1.4、列表标签

标签	描述
<ul><li>	无序列表
<ol><li>	有序列表
<dl><dt><dd>	dl:定义一个定义列表;dt:定义列表中的一个术语；dd:对术语进行解释和说明;一般用于图文混排

<!--1、disc,实心圆(默认值)-->
<!--2、circle,空心圆-->
<!--3、square,实心矩形-->
<!--4、none,不显示标识-->
<ul type="square">
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>
<!--1、1 ：数字(默认值)-->
<!--2、a ：小写字母-->
<!--3、A ：大写字母-->
<!--4、i ：小写罗马字符-->
<!--5、I ：大写罗马字符-->
<ol type="I">
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<dl>
    <dt>
        图片
    </dt>
    <dd>描述</dd>
    <dt>
        图片
    </dt>
    <dd>描述</dd>
</dl>

1.5、表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<p>表单标签&lt;from&gt;标签</p>
<p>提交表单使用action属性，提交对应的地方</p>
<p>提交方式，通过method设置属性，一般使用[get/post]</p>
<h4>用户注册</h4>
<from action="#" method="post">
    <!--label标签：定义说明信息，for属性表示这个信息给哪个标签说明-->
    <label for="username">用户名：</label>
    <input type="text" id="username" placeholder="请输入用户名"/>
    <br>
    <!-- 密码框-->
    <label for="password">密码：</label>
    <input for="password" id="password" placeholder="请输入密码"/>
    <br>
    <label for="confirm_password">确认密码:</label>
    <input type="password" id="confirm_password" placeholder="请确认密码"/>
    <br>
    <label for="gender">性别</label>
    <!-- 单选按钮-->
    <input type="radio" name="gender" id="gender" checked/>男&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="gender" id="gender1"/>女
    <br>
    <label for="fav">爱好</label>
    <!-- 复选按钮-->
    <input type="checkbox" name="fav" id="fav" value="lol" checked />英雄联盟
    <input type="checkbox" name="fav" id="fav1" value="pubg"/>绝地求生
    <input type="checkbox" name="fav" id="fav2" value="ow"/>守望先锋
    <input type="checkbox" name="fav" id="fav3" value="killer"/>刺客信条
    <br>
    <label for="hometown">家乡</label>
    省区
    <!-- 下拉菜单-->
    <select id="hometown" name="provice">
        <option value="--">--请选择--</option>
        <option value="HN">河南</option>
        <option value="HB">湖北</option>
        <option value="AH">安徽</option>
        <option value="JS">江苏</option>
    </select>
    市区
    <select id="city" name="city">
        <option value="--">--请选择--</option>
        <option value="LY">洛阳</option>
        <option value="KF">开封</option>
        <option value="XY">信阳</option>
        <option value="ZZ">郑州</option>
    </select>
    <br>
    <label for="header_img">头像</label>
    <!-- 图像选择-->
    <input type="file" name="header_img" id="header_img">
    <br>
    <label for="intro">个人介绍</label>
    <!-- 文本编辑框-->
    <textarea name="intro" id="intro" cols="30" rows="5"></textarea>
    <br>
    <!-- 提交按钮-->
    <input type="submit" value="提交"/>
    <!-- 重置按钮-->
    <input type="reset" value="重置"/>
</from>
</body>
</html>