HTML基础

最新推荐文章于 2022-11-26 14:29:08 发布

腾阿腾

最新推荐文章于 2022-11-26 14:29:08 发布

阅读量170

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45138033/article/details/99708092

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML简介

HTML是英文HyperText Markup Language的缩写，意思是“超级文本标记语言”，用它编写出的文档的文件的扩展名是“.html”或“.htm”（微软的操作系统），它是可供浏览器解释浏览的文件格式。可以使用记事本、写字板或者专业的IDE等等编辑工具来编写HTML文件。

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（www）盛行的原因之一，其语言特点：

简易性
可扩展性
平台无关性
通用性

HTML文档结构

HTML的文档结构主要有三部分构成：

< html >< / html > ：
< html >标记用于html文件的最前面，用来表示html文件的开始。而的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。
< head >< / head >：
< head >和< /head >构成html文件的头部部分，在此标记对之间可以使用< title > < /title >和< script > < /script >等等标记对，这些标记都是描述html文档相关信息的标记对，< head > < /head >标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
< body >< / body >：
< body >和< /body >是html文档的主体部分，在此标记中可以包括“< p >”、“< /p >”、“< h1 >”、
“< br >”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。

举个例子，在显示器中显示“Hello Html！”：

<html>
      <head>
        <title>html的结构</title>
      </head>
      <body>
       	<h1>Hello Html！</h1>
      </body>
</html>

HTML标签

HTML标签两端有两个符号“<”和“>”,这两个符号称为角括号。html标签通常是成对出现的，比如“< html >”和“< / html >”，前一个是开始标记，后面的是结束标记，在开始和结束标记之间的的文本是元素内容。html标签是与大小写无关的，“< html >”和“< HTML >”所表示的意思的一样的。标签可以拥有自己的属性。属性他能够为页面上的HTML元素提供附加信息。

TITLE标签

在头部的< head >< / head >中，有另一组标签 < title >< / title > 。打在< title >< /title >这里面的文字会出现在浏览器视窗最上面标题框中，作为网页的主题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>这是网页的标题</title>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

文字分隔标签

有这样一个问题：我们已经在记事本里排版排的很漂亮，为何通过浏览器查看是就变了样子，那是因为浏览器不像word,他不认识Enter键或者空格键，所以当你按多少次空格，浏览器都会当作没看见一样。

常用的分隔标签：

强制断行标记：< br >
强制分段标记：< p >
空格：&nbsp；

字体标签

标题标记：< h1 >内容< / h1 >
设置字体标记
使用方法：< font size=“2” color=“red” face=“黑体”>内容< / font>
字体变化标记
使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
< b >< / b > 加粗 < i >< / i > 斜体 < u >< / u > 底线
< kbd >用粗体等宽字体显示文字< / kbd >
< var >用较小的固定宽度显示字体< / var >

超链接标签

超链接标签：< a >< / a >
标签属性：

href=“网址链接”
target（网页打开方式）
target="_blank"：新开一个窗口打开
target="_self " 在自身窗口打开

<body>
		<a href="http://www.baidu.com" target="_self">进入百度</a> <br>
		<a href="http://www.163.com">进入网易</a> <br>
		<a href="http://www.sina.com">进入新浪</a> <br>
	</body>

网页背景和背景图片

设置网页背景和背景图片通过定义body标签的bgcolor（背景颜色）和background属性：

例如设置网页背景为黄色：

<body bgcolor="yellow" >
</body>

将网页背景设为图片：

<body background="图片文件路径">
</body>

表格标签

表格的结构：

通过标签**< table >< / table >**在html页面创建表格
在表格标签中创建：
< th >< / th >（列名标签，一般放在第一行）
< tr >< / tr >（代表表格的一行）
< td >< / td >（代表表格的一列）

在默认情况下，表格是没有边框的，所以首先需要对border边框属性进行设置才能让表格可见。

表格标签属性：

属性	作用
bgcolor	规定表格的背景颜色
border	规定表格边框的宽度
cellpadding	规定单元边沿与其内容之间的空白
cellspacing	规定单元格之间的空白
height	规定表格的高度
width	规定表格的宽度

单元格合并

我们通过单元格标签（< th >< / th >和< td >< / td >）中的属性来实现合并单元格

属性	作用
colspan	规定此单元格可横跨的列数
rowspan	规定此单元格可横跨的行数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table border="2px" height=300px width=500px cellspacing="0" align="center">
        <tr>
            <td></td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
    </table>
</body>

</html>

在这里插入图片描述

图片标签

通过标签**< img />**在html页面创建图片，用标签的src属性定义图片路径，同样可以用过设置height和width属性来定义图片的宽高。

<body bgcolor="white">
		<img src="图片1路径" width="200px" height="200px" alt="图片1"/>
		<img src="图片2路径" width="300px" height="300px" border="1" title="图片2" />
</body>

表单标签

表单的结构：

form标签创建表单

<form></form>

input标签定义输入域，用户可在其中输入数据

<form>
	<input></input>
</form>

简单的注册页表单：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#" method="post">
			<!-- 文本框 -->
			用户名：<input type="text" id="" value="请输入用户名" name="username" /> <br>
			密码：<input type="password" name="username" id="" value="" /><br>
			性别：<input type="radio" id="" value="男" name="sex" />男<br>
			你有几个女朋友：<input type="number" name="points" min="1" max="10" value=""/><br>

			生日：<input type="date" name="birthday"/><br>
			<input type="radio" id="girl" value="女" name="sex" /><label for="girl">女</label>
			<input type="radio" id="boy" value="男" name="sex" /><label for="boy">男</label>
			<br>
			爱好：<input type="checkbox" name="hobby" id="c1" value="run"/><label for="c1">跑步 </label>
			<input type="checkbox" name="hobby" id="c2" value="sing"/><label for="c2">唱歌</label>
			<input type="checkbox" name="hobby" id="c3" value="game"/><label for="c3">玩游戏</label>
			<br>
			学历：<select name="xueli">
				<option value="">---请选择学历---</option>
				<option value="babySchool">幼儿园</option>
				<option value="litleSchool">小学</option>
				<option value="middleSchool">中学</option>
				<option value="largeSchool">大学</option>
			</select>
			<br>
			个人描述：<textarea rows="20" cols="30" name="desc">
				
			</textarea>
			<br>
			<br>
			<input type="submit" value="注册" />
			<input type="reset" value="重置" />
		</form>
	</body>
</html>