HTML学习

MING—li

已于 2023-02-20 14:45:16 修改

阅读量989

点赞数 3

文章标签： java html

于 2022-01-09 21:24:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62313265/article/details/122397107

版权

本文介绍了HTML的基础知识，包括书写规范、常用标签及其用法，如标题标签、超链接、列表及表格等，并展示了如何创建简单的网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML页面

1.书写规范

<!DOCTYPE html>            <!-- 约束，声明 -->
<html>                     <!-- html标签表示html的开始 -->
<head>                     <!--表示头信息，一般包含三部分内容，title标签，css样式，js代码 -->
    <meta charset="UTF-8"> <!--  表示当前页面使用UTF-8字符集 -->
    <title>标题</title>    <!--  表示标题 -->
</head>
<body>                     <!-- body标签包含html页面显示的主题内容 -->
    hello
</body>
</html>                    <!-- 表示html的结束 -->

html页面中注释：

2.标签介绍

1.格式：标签分为单标签和双标签：

单标签：< 标签名 />；

双标签：<标签名>封装的数据<标签名/>。

2.标签名大小写不敏感：如<body>...</BODY>

3.标签拥有基本属性和事件属性：

i.基本属性(可以修改样式效果)：如<body bgcolor="red">即可将页面中的背景颜色改为红色

ii.事件属性(可以设置事件响应后的代码)：如<body οnclick="alert('你好')">Hello</body>即在页面中出现的Hello可以点击，并在点击后出现警告框，其内容为你好。

<!-- bgcolor属性是背景颜色 -->
<!-- onclick表示单机(点击)事件 -->
<!-- alert()是JavaScript语言提供的一个警告框函数，可以接受任意参数，参数就是警告框的函数信息 -->
<!-- <br/>为换行   <hr/>为水平线 -->

3.标签语法

1.标签不能交叉嵌套：如<body><font></body></font>

2.标签必须正确关闭：如单标签无/；双标签无结束标签或/

3.属性必须有值，属性值必须加引号：如<font color>Hello</font>或<font color=red>Hello</font>

4.注释不能嵌套：如-->

以上均为错误演示，但1~3语法错误浏览器可以自动修复

4.font标签(字体标签)

<font>可以规定字体颜色(color)，文本的字体类型(face)，字体尺寸(size)尺寸仅(1~7)

如：<font color="red" face="宋体" size="3">font标签</font>

5.特殊字符

1.将<br>(换行标签)变为文本显示在页面上

错误:<br>标签

正确:<br>标签

2.空格：通常情况下，HTML会裁掉文档中的空格，仅保留一个，若使用 ，则可以增加多个空格。

字符实体名称实体编号

空格    

< < <

> > >

& & &

" " "

, '(IE不支持) '

6.标题标签(h1~h6)

<h1>...</h1> 标题标签h1~h6的文本有大到小
<h2>...</h2> h1最大，h6最小
<h3>...</h3> align属性是对齐
<h4 align="left">...</h4> left左对齐(默认)
<h5 align="center">...</h5> center居中
<h6 align="right">...</h6> right右对齐

7.超链接标签(点击后跳转)

标签<a>...</a>

<a href= "http://www.baidu.com">百度</a>
<a href= "http://www.baidu.com” target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- href属性设置连接的地址 -->
<!-- target属性设置哪个目标进行跳转 -->
<!-- _self表示当前页面跳转 -->
<!-- _blank表示打开新页面进行跳转 -->

8、无序列表

<ul type= "none"> ul标签是无序列表
        <li>赵</li> type属性可以份改列表项前面的符号
        <li>钱</li> li标签是列表项
        <li>孙</|i>
        <li>李</li>
</ul>

9.mg标签

ing标签是图片标签

在web中路经分为相时路径和绝对路经
        相对路经:
        . 表示当前文件所在的目录
..   表示当前文件所在的上级目录
         文件名表标当前文件所在目录的文件相当于./(./可省略)
<ing src="../imgs/1.jpg"width="200" height="260" border="1"/>
<ing src="../imgs/10000.jpg"width="200" height="260" border="1" alt="图片不存在"/>
src属性可以设置图片路径

width,height属性可以设置图片的宽高

border属性设置图片边框大小

alt属性设置当指定路径找不到图片时,用来代替显示的文本内容

10.table标签(建立表格)

<table align="center" border="1" width="300" height="300" cellspacing="0">
        <tr>
                <th>1.1<th> table标签是表格
<th>1.2<th> cellspacing设置单元格间距
<th>1.3<th> tr是行标签
        </tr> th是表头标签(有居中，加粗)

        <tr> td是单元格标签
                <td>2.1<td> b是加粗标签
<td>2.2<td>
<td>2.3<td>
        </tr>