HTML认识、标签

最新推荐文章于 2022-07-26 17:07:39 发布

铭铭铭铭天

最新推荐文章于 2022-07-26 17:07:39 发布

阅读量179

点赞数 1

文章标签： HTML入门常用标签

本文链接：https://blog.csdn.net/weixin_45542045/article/details/102468597

版权

文章目录

HTML简介

超文本标记语言
由标签组成

HTML基本结构

# 声明文件类型，告诉浏览器文件类型
<!DOCTYPE html>
# 最大的标签，所有内容都写在这里
<html lang="en">
	# head主要写这个页面的配置信息
	<head>
		# 声明编码类型，告诉浏览器编码类型
		<meta charset="utf-8">
		# 文件标题
		<title>文件标题</title>
		# 设置样式
		<style></style>
		# 引入js
		<script></script>
	</head>
	# body写这个页面主要显示的内容
	<body>
	</body>
</html>

br	强制换行
hr	水平线，块标签
h1-h6	标题标签，双标签，块标签
p	段落标签，双标签，块标签
i	单纯的斜体，双标签
em	具有强调意义的斜体，双标签
b	单纯的加粗，双标签
strong	为了标明重点加粗，双标签
u	下划线，双标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
</head>
<body>
<!--1. 标题标签， h1-h6，加粗加大-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    方鸿渐在欧洲游学期间，不理学业。为了给家人一个交待，方于毕业前购买了虚构的“克莱登大学”的博士学位证书，并随海外学成的学生回国。
    在船上与留学生鲍小姐相识并热恋，但被鲍小姐欺骗感情。同时也遇见了大学同学苏文纨。
</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    到达上海后，在已故未婚妻父亲周先生开办的银行任职。此时，方获得了同学苏文纨的青睐，又与苏的表妹唐晓芙一见钟情，整日周旋于苏、唐二人之间，期间并结识了追求苏文纨的赵辛楣。
    方最终与苏、唐二人感情终结，苏嫁与诗人曹元朗，而赵也明白方并非其情敌，从此与方惺惺相惜。方鸿渐逐渐与周家不和。
</p>
<!--水平线-->
<hr>
<!--强制换行-->
<br>
<!--&nbsp 空格-->
&nbsp;
<!--大于号-->
&gt;
<!--小于号-->
&lt;
<!--版权标志-->
&copy;
<br>
<!-- i b em strong u标签-->
<!--字体倾斜，单纯的字体倾斜-->
<i>碧玉妆成一树高</i>  <br>
<!--具有强调意义的斜体，方便搜索引擎搜索-->
<em>万条垂下绿丝条</em>  <br>
<!--加粗，为了加粗而加粗-->
<b>不知细叶谁裁出</b>  <br>
<!--加粗，为了标明重点加粗，方便搜索引擎搜索-->
<strong>二月春风似剪刀</strong>  <br>
<!--下划线-->
<u><b>咏柳</b></u>
</body>
</html>

图片标签

<!--属性 图片路径；可以是网络路径，也可以是本地路径-->
<!--title属性，鼠标进入图片区域，显示标题文字-->
<img src="路径" title="解释文字" alt="">

无序列表-有序列表-自定义列表

无序列表的type类型：
square 方形
circle 空心圆点
disc 默认实心圆点
有序列表：
type：数字123… 字母（大小写都有）abc… 阿拉伯字符I II III…
start：type开始的值

<!--1. 无序列表-->
<ul type="disc">
	<li>三阶</li>
	<li>异形</li>
	<li>镜面</li>
</ul>
<!--2. 有序列表-->
<ol type="a" start="5">
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ol>
<!--3. 自定义列表-->
<dl>
    <!--dt 标签 标题-->
    <dt>围城</dt>
    <!--dd 列表项 存放内容-->
    <dd>
        围城故事发生于1920到1940年代。
        主角方鸿渐是个从中国南方乡绅家庭走出的青年人，迫于家庭压力与同乡周家女子订亲。
        但在其上大学期间，周氏患病早亡。准岳父周先生被方所写的唁电感动，资助他出国求学。
        方鸿渐在欧洲游学期间，不理学业。
    </dd>
    <dd>
        为了给家人一个交待，方于毕业前购买了虚构的“克莱登大学”的博士学位证书，并随海外学成的学生回国。
        在船上与留学生鲍小姐相识并热恋，但被鲍小姐欺骗感情。同时也遇见了大学同学苏文纨。
    </dd>
</dl>

a标签超链接

# 在当前页面跳转
<a href="http//www.baidu.com">百度一下</a>
# 打开新窗口，并跳转到对应的页面
<a href="http//www.baidu.com" target="_blank">百度一下</a>

# 锚点，定位作用
<a href="#红色">跳到红色</a>
<a href="#绿色">跳到绿色</a>
<a href="#蓝色">跳到蓝色</a>
<a href="#黄色">跳到黄色</a>
<a href="#粉色">跳到粉色</a>
# id对应href
<p id="红色" style="height: 500px; background: red"></p>
<p id="绿色" style="height: 500px; background: green"></p>
<p id="蓝色" style="height: 500px; background: blue"></p>
<p id="黄色" style="height: 500px; background: yellow"></p>
<p id="粉色" style="height: 500px; background: pink"></p>
# 跳到某个页面下的某个指定位置
<a href="某个页面标题#指定位置（href）">跳到05页面 中p05的位置</a>

table表格标签

border属性添加边框
cellspacing属性单元框之间的间距
cellpadding属性内容和单元格的间距
align属性设置水平位置，默认靠左 center / left / right
valign属性设置竖直位置，默认居中 top / bottom
rowspan=“2” 合并行，数字是要合并的行数
colspan=“2” 合并列，数字是要合并的列数

<!--1. table 声明一张表格-->
<table border="1px" cellspacing="1px" cellpadding="0px" style="width: 800px;height: 400px" align="center">
    <!--tr标签 是一行-->
    <tr>
        <!--th标签 列标题-->
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>成绩</th>
    </tr>
    <!--2.1 align属性  设置水平位置：center居中  left靠左（默认） right靠右-->
    <tr align="right">
        <!--td标签 一个单元格-->
        <td>1001</td>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
        <td>88</td>
    </tr>
    <!--2.2 valign属性  设置竖直位置：默认居中，top靠上，bottom靠近底部-->
    <tr valign="bottom">
        <td>1002</td>
        <td>李四</td>
        <!--2.3 rowspan合并行-->
        <td rowspan="2">19</td>
        <td>男</td>
        <td>89</td>
    </tr>
    <tr>
        <td>1003</td>
        <td>王五</td>
        <!--colspan合并列-->
        <td colspan="2">男</td>
    </tr>
</table>

form表单

form表单一般用来，从前端页面输入数据，提交到后端
action属性数据提交的位置，不设置则提交到当前函数/页面
method属性：
get方法（默认）
post方法

<form action="" method="post">
    <!--2. input标签 输入框-->
    <!--name属性必须有，后端需要根据name来获取提交的数据-->
    用户名： <input type="text" name="username"> <br>
    密码： <input type="password" name="password"> <br>

    性别：
    <!--3.radio单选框：name相同，必须又value值-->
    <input type="radio" name="gender" value="1"> 男
    <input type="radio" name="gender" value="2"> 女
    <input type="radio" name="gender" value="3" checked> 保密 
    
    <br>

    爱好：
    <!--4.checkbox多选框，name相同，必须有value值-->
    <!--checked属性，设置中单选框和多选框的默认选中状态-->
    <input type="checkbox" name="hobby" value="1">游泳
    <input type="checkbox" name="hobby" value="2" checked>学习
    <input type="checkbox" name="hobby" value="3">美食
    <input type="checkbox" name="hobby" value="4">健身

    <br>

    <!--hidden 需要下个后端提交goods_id=109,这个值不需要前端输入-->
    <input type="text" name="goods_id" value="109" hidden>
    <!--<input type="hidden" name="goods_id" value="109">-->

    <!--6. 下拉选框-->
    <br>
    籍贯：
    <!--selected 设置下拉选框的默认选中状态，给option设置-->
    <select name="hometown" id="">
        <option value="1" selected>北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
    </select>

    <!--7.testarea标签，可以输入多行文字-->
    <br>
    简介：
    <textarea name="description" cols="30" rows="5"></textarea>
    
    <br>
    
    <!--8. submit 提交按钮-->
    <input type="submit" value="注册">

    <!--9. 单纯的按钮，需要配合js使用，两种写法，效果一样-->
    <button>单纯按钮</button>
    <input type="button" value="单纯按钮">

</form>