JavaWeb_02_HTML标签

最新推荐文章于 2024-11-08 10:30:00 发布

柳絮，曾轻语

最新推荐文章于 2024-11-08 10:30:00 发布

阅读量31

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_42788897/article/details/131209104

版权

《HTML标签》

一、HTML简介

超文本标记语言

HTML（HyperText Markup Language）全称为超文本标记语言，是一种用于创建网页的标准标记语言。HTML运行在浏览器上，由浏览器来解析，文档的后缀名为.html（最常用）或.htm。

HTML文档结构

<!DOCTYPE html>
<html>
    
<!-- head标签存放网页元数据，比如页面编码、标题、外部样式、外部js、关键字、描述、作者等内容 -->
<head>
    <meta charset="UTF-8">
    <title>我的首页</title>
</head>

<!-- body标签存放页面内容 -->
<body>
    Hello Wrold！
</body>

</html>

二、块元素

主要特点

独占一行；
默认宽度100%；
可设置宽高、背景色、边框。

常用标签

hr（水平线）

<!-- 水平线 -->
<hr>

h1~h6（标题）

<!-- 标题 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

div（无色透明框）

<div style="width: 500px;height: 100px;background-color: lightgreen;">这是一个div</div>

p（段落）

<p style="background-color: lightcoral;">这是一个段落</p>

ul、ol、dl（无序列表、有序列表、自定义列表）

<h4>无序列表</h4>
<ul>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
</ul>

<h4>有序列表</h4>
<ol>
    <li>开始</li>
    <li>过程</li>
    <li>结束</li>
</ol>

<h4>自定义列表</h4>
<dl>
    <dt>苹果</dt>
    <dd>一种能吃的水果</dd>
    <dt>白菜</dt>
    <dd>一种能吃的蔬菜</dd>
</dl>

三、行内块

主要特点

可与其他行元素同行；
默认宽度为元素宽度；
可设置宽高、背景色、边框。

常用标签

img（图片）

<!-- img[src="图片路径" width="图片宽度" height="图片高度" alt="当图片不能正常显示时的提示文字"] -->
<img src="./study.png" alt="学习吸收率金字塔" width="300px" height="300px">
<img src="./study.png" alt="学习吸收率金字塔" width="300px" height="300px">

input（表单输入框）

<!-- form表单是块元素，input是行内块，br是换行 -->
<form action="#" style="background-color: lightgray;">
    文本：<input type="text">
    密码：<input type="password"><br>
    日期：<input type="date">
    文本域：<textarea cols="20" rows="3"></textarea>
</form>

四、行元素

主要特点

能够与其他行内元素并排；
不能设置宽高，大小由内容填充。

常用标签

a（超链接）

<a href="http://www.baidu.com">超链接</a>

span（组合行内元素）

<span>行内元素</span>

strong（加粗）

<strong>加粗</strong>

em（倾斜）

<em>倾斜</em>

sub（上标）

<sup>上标</sup>

sup（下标）

<sub>下标</sub>

五、元素类型转换

HTML中提供了一个重要属性：display，对其指定不同值可进行元素类型转换。

div {
    display: block;         —— 转化为块
    display: inline-block;  —— 转化为行内块
    display: inline;        —— 转化为行内元素
    display: none;          —— 隐藏元素
}