Web前端-HTML

DZAXX

已于 2024-04-17 19:59:33 修改

阅读量751

点赞数 10

文章标签：前端 java html

于 2024-03-19 21:12:03 首次发布

本文链接：https://blog.csdn.net/fdvvg/article/details/136834581

版权

HTML 负责页面的结构（页面的元素和内容）

HTML由标签组成，标签都是预定义好的。例如<a>展示超链接，使用<img>展示图片，<vedio>展示视频。

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

编写 HTML 代码

创建一个文件，后缀名改成 html 就可以了。运行 html，有浏览器就行了。创建的时候一定要勾选文件扩展名：

创建文件，修改文件后缀为 .html
编写HTML结构标签
head是文件的头，title定义了页面标题，body是页面展示的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>

</body>
</html>

HTML常见标签

注释

通过  来完成注释

<body>
    hello world!
    <!--这里是注释-->
</body>

标题标签

标题标签一共有6个 h1 至 h6。
数字越小，里面的内容就越粗越大。
数字越大，里面的内容就越细越小。

段落标签

p 就是段落标签，可以对内容分段。通过 lorem 就可以自动生成段落。

<body>
    <p>第一个段落 </p>
    <p>第二个段落 </p>
    <p>第三个段落 </p>
</body>

换行标签

br 就是换行标签，如果没有换行标签的话，HTML 是不会自动换行的。<br> 是一个单标签，加入到长段落当中就可以了。

<body>
    <p>第一个段落 hello every
        <br> my name is lihua.
</body>

转义字符

HTML 会把相邻的空格，合并成一个空格。如果需要多个空格，就需要使用转义字符，除了空格之外，像 < > & 等这些特殊符号，也需要使用转义字符。最常见的就是这些：

格式化标签

格式化标签，其实是针对文本进行一些样式上的调整。

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

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

图片标签

使用 img 标签来表示图片。img 也是一个单标签，里面可以有好多属性，其中最重要的就是 src 属性。通过 src 来描述图片所在的位置。我们把图片放在项目的目录当中，然后在代码当中使用就好了

<body>
    <img src="测试.png" alt="">
</body>

这里的 src，可以是相对路径，也可以是绝对路径，也可以是网络路径。

通过 width 和 height 来设置长宽

width：就是宽。height：就是高。设置尺寸的时候，单位：px，就是像素的意思。宽度和高度可以一起设置，也可以只设置一个，只设置一个的话，就不会导致图片形变。

超链接

通过 a 标签就可以实现超链接，跳转到其他的页面。

<body>
    <a href="URL">超链接</a>
</body>

属性：

href:指定资源访问的url

target:指定在何处打开资源链接：_self:默认值，在当前页面打开 _blank:在新建页面打开。

用图片做超链接

代码如下：

<body>
    <a href="https:URL"><img src="picture.png" ></a>
</body>

表格标签

表格标签是一组标签：

table 就是表格
tr: 表示表格的一行
td: 表示一列
th: 表示表头中的一列

<html>
		<head>
				<title>HTML 邓子</title>
		</head>
		<body>	
    <style>
        td {
            text-align: center;
        }
    </style>
    <table border="2px" width="300" height="150" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>邓子</td>
<td>19</td>
</tr>
<tr>
<td>诩子</td>
<td>18</td>
</tr>
				</table>
		</body>
</html>

列表标签

无序列表：ul
有序列表：li
自定义列表：dt dd

<body>
    <h3>无序列表</h3>
    <ul>
        <li>啦啦啦</li>
        <li>哈哈哈</li>
        <li>也一样</li>
    </ul>

    <h3>有序列表</h3>
    <ol>
        <li>啦啦啦</li>
        <li>哈哈哈</li>
        <li>也一样</li>
    </ol>

    <h3>自定义列表</h3>
    <dl>
        <dt>强强强强</dt>
        <dd>啦啦啦</dd>
        <dd>哈哈哈</dd>
        <dd>也一样</dd>
    </dl>
</body>

运行结果如下：

表单标签

表单标签是用户和页面之间交互的重要手段，用来采集用户输入数据，能够把用户输入的数据据提交到服务器上。例如：注册登入功能

标签：<form>

如下图这个整体就是一个表单，里面的每一项称为表单项

属性：

action:规定提交表单时向何处发送表单数据，url
method:规定用于发送表单数据的方式。GET(在url后面拼接表单数据，url长度有限制),POST(在请求体中传递)

表单项标签

1. input 标签

input 就是输入标签，通过type属性控制输入形式

<label><input type="redio" name="gender" value="1">男 </label>
<!-- 使用lable可以点击汉字也能选中，name用来分组互斥,value是选中后向服务器提交的数据-->

2.select标签

定义下拉标签，<option>定义下拉列表项

<body>
    <form>
        <select>
            <option>-- 请选择年份 --</option>
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
        </select>
    </form>
</body>

3. textarea标签

textarea 来实现多行编辑

<body>
    <form>
        <textarea cols="30" rows="10"></textarea>
    </form>
</body>

无语义标签

无语义就是没有明确的角色：div 和 span 这两个无语义标签。这两个无语义标签可以代替上面的绝大部分有语义标签的功能（但是 form 这一系列不能替换）。div 默认是一个块级元素（独占一行），span 默认是一个行内元素。