HTML基础

最新推荐文章于 2022-12-06 22:52:21 发布

hygge999

最新推荐文章于 2022-12-06 22:52:21 发布

阅读量184

点赞数

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

本文链接：https://blog.csdn.net/z55947810/article/details/111726004

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

书写规范

<!DOCTYPE html><!-- 约束，声明-->
<html lang="en"><!-- html标签标示HTML的开始 lang="en"标示中文 -->
<head><!-- -->
    <meta charset="UTF-8"><!-- 使用UTF-8字符集 -->
    <title>标题</title><!-- 标题 -->
</head>
<body><!-- body标签是整个html页面显示的主体内容 -->
    主体内容
</body>
</html>

标签介绍

1、标签格式

<标签名>封装的数据</标签名>

2、标签名大小写不敏感

但不推荐大写

<body>...</body>
<BODY>...</BODY>

3、标签拥有自己的属性

分为两种：

基本属性(可修改简单的样式效果)：bgcolor=“red”

<body bgcolor="red"><!--设置背景颜色为红色-->
    主体内容
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0Ecfz6w-1608954470538)(C:\Users\User\AppData\Roaming\Typora\typora-user-images\image-20201226094843768.png)]$

事件属性(设置事件响应后的代码)：οnclick=“alert(‘我被点击了！’);”

<body onclick="alert('我被点击了！');"><!--点击后弹出警告框-->
    主体内容
</body>

在这里插入图片描述

4、单双标签

单标签格式：
```
<标签名 />
<br />
```

双标签格式：

<标签名> ........ </标签名>
<p> .... </p>

5、自己遇到的小问题

标签必须关闭 ( / )，无论单双标签。
注释不能嵌套。

常用标签介绍

font

<font> 规定文本的字体、字体尺寸、字体颜色。

即：face、size、color

<p><font size="5" face="宋体" color="red">尺寸为5，字体为宋体，颜色为红色</font></p>

在这里插入图片描述

特殊字符

列举几个：

显示结果	特殊字符
<	<
>	<
半个空白位	&ensp;
一个空白位	&emsp;
不断行的空白

h1-6标签

标题标签

使用前我们要注意：把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。

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

在这里插入图片描述

默认为左对齐，可设置为右对齐或者居中，并且会随页面的放缩而改变：

<h2 align="lift">左对齐</h2>
<h2 align="center">居中</h2>
<h2 align="right">右对齐</h2>

在这里插入图片描述

a标签

超链接标签

网页中点击后跳转网页均为超链接。

a标签是超链接标签

href属性设置跳转的地址

target属性表示跳转的方式(_self表示当前页面，_blank表示打开新页面)，默认为_blank。

<a href="https://www.baidu.com/"" target="_blank">跳转百度!</a>

在这里插入图片描述

ul、ol标签

列表标签

无序列表(使用 <ul> 标签)：

<ul>
<li>111</li>
<li>222</li>
</ul>

在这里插入图片描述

有序列表(使用 <ol> 标签):

<ol>
<li>111</li>
<li>222</li>
</ol>

在这里插入图片描述

自定义列表(不常用，不介绍)

其中ul与ol可以设置属性type为none来去掉列表前面的黑点或数字。但可能存在部分浏览器不兼容。

<ul type="none">
<li>111</li>
<li>222</li>
</ul>
<ol type="none">
<li>111</li>
<li>222</li>
</ol>

在这里插入图片描述

img标签

从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

<img> 标签必备属性：src。scr 属性是连接的图片地址。

<p>一个图像: <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1072929492,524567925&fm=26&gp=0.jpg" width="32" height="32"></p>

在这里插入图片描述

还可以通过在 <a> 标签中嵌套 <img> 标签，给图像添加一个超链接。

<a href="https://www.baidu.com/"">
	<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1072929492,524567925&fm=26&gp=0.jpg" width="32" height="32">
</a>

此时点击图片将会跳转到百度页面。

其他属性请自行探究。

table标签

表格标签

由 <table> 标签来定义。

<tr>行标签

<th>表头标签，会加粗

<td>单元格标签

单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <tr>
        <th>11</th>
        <th>12</th>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
    </tr>
</table>

在这里插入图片描述

建议加上border属性，否则将无边框。

跨行跨列表格

colspan 跨列

rowspan 跨行

<table border="1", cellspacing="0">
		<tr>
			<th colspan="3">三列</th>
		</tr>
		<tr>
			<td colspan="2" align="center">俩列</td>
			<td rowspan="2">俩行</td>
		</tr>
		<tr>
			<td>111</td>    
			<td>222</td>
		</tr>
		<tr>
			<td>333</td>    
			<td>444</td>
			<td>555</td>
		</tr>
	</table>

在这里插入图片描述

form表单

用于收集不同类型的用户输入。

使用<form> 来设置。

具体内容总结到：https://blog.csdn.net/z55947810/article/details/105584272

其他标签

<div> 默认独占一行。

<span> 他的长度就是封装数据长度，不换行。

<p> 默认上下空出一行切仅仅空出一行。

  <div>div标签1</div>
  <div>div标签2</div>
  <span>span标签1</span>
  <span>span标签2</span>
  <p>p段落标签1</p>
  <p>p段落标签2</p>

在这里插入图片描述

hygge999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

目录简介书写规范标签介绍1、标签格式2、标签名大小写不敏感3、标签拥有自己的属性4、单双标签5、自己遇到的小问题常用标签介绍font特殊字符标题标签超链接列表标签img标签表格标签跨行跨列表格表单其他标签其他标签简介超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。书写规范<!DOCTYPE html><html lang="en"><!-- html标签标
复制链接

扫一扫