JavaWeb - HTML

zhanglf6699

于 2022-05-10 16:14:49 发布

阅读量347

点赞数

分类专栏： JavaEE初阶文章标签： html 前端

本文链接：https://blog.csdn.net/qq_46120393/article/details/124684141

版权

JavaEE初阶专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML结构

认识HTML标签

HTML文件基本结构

自动生成代码框架

HTML中的常见标签

注释标签

标题标签

段落标签

换行标签

格式化标签

图片标签

超链接标签

表格标签

列表标签

表单标签

无语义标签

HTML结构

认识HTML标签

HTML代码是由标签构成的, 形如:

<body>hello world!</body>

" <> "内存放标签名, HTML中大部分标签都由开始标签和结束标签构成, 例如上面的<body>标签, <body>为开始标签, </body>为结束标签, 开始标签和结束标签中间的部分即为显示出来的内容(hello world!).

开始标签中可能会带有"属性", 例如: 任意一个开始标签中都可以有id属性, id属性可以为这个标签设置唯一标识符(类似于身份证号码)

<body id="hello">hello world!</body>

注意:HTML中的标签的嵌套仅能以<a><b></b></a>这样的形式出现, 像<a><b></a></b>这样的写法是错误的.

HTML文件基本结构

一个完整的HTML文件, 至少要包含以下标签:

<html>
	<head>
		<title>HTML文件标题</title>
	</head>
	<body>
		HTML文件的正文
	</body>
</html>

<html>标签是整个html文件的最顶层标签, 所有其他的标签都必须包含在<html>标签中.

<head>标签包含整个文件的头部内容.

<title>标签必须写在<head>标签内部, <title>标签内部存放文件标题.

<body>标签内存放文件的正文

将上面的代码写在记事本或VS code或IDEA中, 将文件后缀名修改为html, 并使用浏览器打开该文件, 我们就能得到第一个自己实现的网页:
请添加图片描述

自动生成代码框架

在VS code中, 先输入一个感叹号 “!”, 再按下"Tab"键, 就可以自动生成HTML的代码框架:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

生成代码框架后, 即可在<title>标签中写入页面标题(Document), 在<head>标签中写入正文.

HTML中的常见标签

注释标签

注释不会显示在界面上, 注释存在的意义是方便程序员阅读代码, 提高代码的可读性.

HTML中采用的标签方式是

<!-- 我是一个注释 -->

在VS code中可以通过Ctrl + / 来快速创建注释或者取消注释

注意:HTML中不存在 "//“或者”/* */"这样的注释方式

标题标签

标题标签是为页面中某一部分内容设置标题, 标题标签共有六个, 分别为<h1>到<h6>, 数字越大, 标题的字体越小.

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

请添加图片描述

段落标签

使用<p>标签来表示一个段落:

<p>5月10日是第六个中国品牌日，由每日经济新闻主办的“每经品牌100（指数）上线仪式暨2022中国上市公司品牌价值榜发布会”以线上和线下相结合的方式隆重举行。</p>
<p>这是每日经济新闻第六年联合清华大学中国企业研究中心，推出中国上市公司品牌价值榜。在过去的五年里，中国上市公司品牌价值榜以其权威性和公正性，取得了良好的社会反响，不少企业将该榜的品牌价值数据列入公司的年报或企业社会责任报告，榜单已经成为了激励企业品牌建设、助力投资者投资决策的“风向标”。</p>

请添加图片描述
需要注意的是, <p>标签并不能为段落开头空出两个位置, 需要通过CSS来为段落设置缩进.

换行标签

通过<br/>标签来实现换行:

123<br/>456<br/>789

结果:
请添加图片描述
与上面其他的标签不同, <br/>标签是一个单标签, 不需要有结束标签.

格式化标签

加粗:strong标签和b标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

请添加图片描述

图片标签

使用<img>标签来插入图片, <img>标签中必须带有src属性, src中的内容为图片的路径, 还可以有alt属性, 当图片无法正常显示时, 就会显示alt中的内容.

<img src="图片.jpg" alt="图片无法正常显示">

图片显示正常时:

请添加图片描述

图片无法显示时(例如当前路径下找不到该图片):
请添加图片描述

<img>标签中除了上面的两个属性外, 还可以有其他的属性, 例如:

title属性可以为图片添加提示文本, 当鼠标移动到图片上时, 就会显示title中的内容.

width/height:为图片设置宽度/高度, 单位为px(像素), 例如50px, 100px. 设置宽度和高度时建议只设置其中的一个, 另一个会自动根据图片比例调整, 如果同时设置宽度和高度, 可能会导致图片比例失衡.

注意:一个标签可以有多个属性, 属性与属性之间通过空格分开, 属性之间不存在先后顺序, 但属性不可以写在标签名称的前面, 例如<src=“图片.jpg” img>, 这样的写法是错误的.

超链接标签

使用<a>标签来添加超链接, <a>标签中必须带有href 属性, href中的内容为超链接的路径, 例如:

<a href="https://www.baidu.com">百度</a>

请添加图片描述
点击"百度"之后, 即会跳转到百度首页.

当我们不能确定需要跳转的路径时, 可以暂时将路径设置为 # 号, 此时, 当我们点击"百度"字样时, 不会出现任何效果.

表格标签

使用<table>标签来表示整个表格, <tr>标签表示一行, <td>标签表示一列, <th>表示一个表格的表头.

使用border属性来表示表格边框, 值为1代表有边框, 数字越大边框越粗.

width/height属性表示表格大小, 用法与上面图片标签中一致.

<table border="1" width="500px" height="100px">
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>男</td>
		<td>21</td>
	</tr>
	<td>李四</td>
	<td>女</td>
	<td>15</td>
</table>

请添加图片描述

列表标签

列表标签分为有序列表和无序列表, <ul>标签表示无序列表, <ol>标签表示有序列表, <li>表示列表中的一行元素:

<h2>有序列表</h2>
<ol>
	<li>张三</li>
	<li>李四</li>
	<li>王五</li>
</ol>

<h2>无序列表</h2>
<ul>
	<li>张三</li>
	<li>李四</li>
	<li>王五</li>
</ul>

请添加图片描述

表单标签

<form>标签可以让用户输入信息, 并提交到服务器上, 在<form>标签内部可以存放一些和用户交互的组件.

<form>标签中可以写入<input>标签, <input>标签中必须存在type属性, 对type属性取不同的值:

type="text"是一个单行的文本框, 表示用户输入的数据是单行的文本.
type="password"表示用户输入的是密码, 输入时不可见:

<form>
	<input type="text">
	<br/>
	<input type="password">
</form>

结果:
请添加图片描述
向文本框中随机输入内容:

type="radio"是一个单选框, 对多个单选框取相同的名字, 就可以实现仅能选一个的效果, checked属性表示默认值, 在单选框中加上label, 就可以让用户通过点击lable中间的汉字就能进行选中, for属性中填的是input中的id:

<form>
	<input type="radio" name="gander" checked="checked" id="male">
        <label for="male">男</label>
         <input type="radio" name="gander" id="famale">
         <label for="famale">女</label>
	</form>

请添加图片描述

type=“checkbox是一个复选框”:

<form>
		爱好:<input type="checkbox">吃饭
        <input type="checkbox">睡觉
        <input type="checkbox">上厕所
        <input type="checkbox">学习
</form>

请添加图片描述

type="button"是一个按钮, 要在按钮中写入的字可以写在value属性中:

<form>
	<input type="button" value="按下按钮">
</form>

请添加图片描述

select表示下拉菜单, 这里开始不再使用input.

<form>
		<select name="" id="">
            <option value="">--请选择年份--</option>
            <!--selected设置默认选项-->
            <option value="" selected="selected">1998</option>
            <option value="">1999</option>
            <option value="">2000</option>
            <option value="">2001</option>
            <option value="">2002</option>
        </select>
	</form>

请添加图片描述

textarea表示一个多行编辑框, cols和rows表示可输入的最大行数和列数

<form>
		请写下你的意见或建议:
		<br/>
		<textarea name="" id="" cols="30" rows="10"></textarea>
</form>

请添加图片描述

无语义标签

无语义标签共有两种, div和span, div是一个块级元素, span是一个行内元素, 不能自动换行的标签称为行内元素, 可以自动换行的元素称为块级元素.

通俗地讲, div和span就是两个盒子, 它们没有自己的语义, 仅仅用于网页布局.

div 独占一行, 是一个大盒子.
span 不独占一行, 是一个小盒子.

<div>
        <span>张三</span>
        <span>19</span>
        <span>175</span>
    </div>
    <div>
        <span>李四</span>
        <span>20</span>
        <span>170</span>
    </div>
    <div>
        <span>王五</span>
        <span>16</span>
        <span>160</span>
    </div>