HTML基础

最新推荐文章于 2024-09-10 14:15:01 发布

小小深

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量769

点赞数 26

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

本文链接：https://blog.csdn.net/2302_78527593/article/details/141094639

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.什么是HTML

HTML 指的是超文本标记语言 (HyperText Markup Language)

超文本:是指页面内可以包含图片、链接、声音,视频等内容

标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

二.实例

<!-- 
    声明html的版本信息为html5版本，告诉浏览器以html5标准解释运行
 -->
<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" /><!--网页字符集-->
		<meta name="keywords" content=""/><!--设置网页关键字，搜索引擎-->
		<title>我的第一张网页</title><!-- 网页标题 -->
		<link href="img/baidu.ico" rel="icon" /><!-- 更换网页标题前面的小图标 -->
	</head>
	<body>
		内容
	</body>
</html>

其中:

<!DOCTYPE html>:声明html的版本信息为html5版本，告诉浏览器以html5标准解释运行(如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现)

<html>:是HTML的根元素,标记 HTML 文档的开始和结束

<head>:包含了所有的头部标签标签

头部区域的标签标签为: <title>, <style>, <meta>, <link>, <script>

● <title> 标签可定义网页的标题

●<meta> 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新

频度的描述和关键词

● <meta charset="utf-8" /> 定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8 ）

●<link rel="icon" href="ico地址">标题处添加图标

<body>:包含了可见的页面内容

三.HTML基本语法

1.标签

HTML 中的标记指的就是标签。

HTML 使用标记标签来描述网页。

结构：

< 标签名 > 标签内容 </ 标签名 > 闭合标签 ( 有标签内容 )

< 标签名 /> 自闭合标签 ( 无标签内容 )

2.标签属性

标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。

如：<body text=”red”>

1. 属性的格式：属性名 = “ 属性值 “

2. 属性的位置：

< 标签名属性名 = “ 属性值 “ >xxx</ 标签名 >

3. 添加多个属性：

< 标签名属性名 = “ 属性值 “ 属性名 = “ 属性值 “ >xxx </ 标签名 >

四.常用标签

1.标题标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>标题一</h1>
		<h2>标题二</h2>
		<h3>标题三</h3>
		<h4>标题四</h4>
		<h5>标题五</h5>
		<h6>标题六</h6>
	</body>
</html>

2.段落标签

<p></p>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>第33届夏季奥林匹克运动会（Games of the XXXIII Olympiad），简称“2024年巴黎奥运会”</p>
		<p>是在法国巴黎举办的国际性奥林匹克赛事，于当地时间2024年7月26日开幕，8月11日闭幕，
		部分项目的比赛于7月24日率先开赛，共设有32个大项，329个小项，共有206个国家和地区参赛。</p>
	</body>
</html>

3.换行标签

<br/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>第33届夏季奥林匹克运动会（Games of the XXXIII Olympiad），简称“2024年巴黎奥运会”</p>
		<p>是在法国巴黎举办的国际性奥林匹克赛事，于当地时间2024年7月26日开幕，8月11日闭幕，<br />
		部分项目的比赛于7月24日率先开赛，共设有32个大项，329个小项，共有206个国家和地区参赛。</p>
	</body>
</html>

4.列表

无序列表 <ul><li></li></ul>

有序列表<ol type=""><li></li></ol>(type可以选择类型:1,a,A,i)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul >
			<li>a</li>
			<li>b</li>
			<li>c</li>
			<li>d</li>
		</ul>
		<ol type="A">
			<li>a</li>
			<li>b</li>
			<li>c</li>
			<li>d</li>
		</ol>
	</body>
</html>

5.超链接

a标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接来访问其他网页资源。

href:定义链接地址 target:打开链接文档的地址(target:默认值为_self)

href (Hypertext Reference超文本引用):规定链接指向的页面的URL(页面地址)

URL(Uniform Resource Locator):统一资源定位符

6.图像标签

src:图片的地址路径

width,height:图片的宽高

border:图像的边框

7.表格

表格的基本构成标签

table 标签：表格标签

tr 标签：表格中的行

th 标签 : 表格的表头(表头比普通单元格字体要粗且居中)

td 标签：表格单元格

表格属性

width:规定表格宽度

height:规定表格高度

cellspacing:规定表格边框与边框之间的空白

cellpadding:规定表格边框与内容的空白

align:规定表格相对周围元素的对齐方式

valign:选择属性值的对齐方式

cospan:横合并单元格的个数

rowspan:竖合并单元格的个数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="500" cellspacing="0" cellpadding="0">
			<tr>
				<th>姓名</th>
				<th>Java</th>
				<th>Pathon</th>
			</tr>
			<tr>
				<td>ss</td>
				<td>55</td>
				<td>60</td>
			</tr>
		</table>
	</body>
</html>

8.表单

form 标签：表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器.

……weo

</form>

action:指定表单提交后,处理跳转地址

method:指定向服务器提交的方法,一般为post或get方法,post方法比较安全

<input type=""/>(type不同框类型不同)

文本框:<input type=“text name=“username” value=“张三” readonly=“readonly”placeholder=“请输入” disabled=“disabled”/>

value:设置文本框默认值 readonly:设置文本框为只读 placeholder:提示信息 disabled:文本框置灰禁用

密码框:<input type=“password ” value=“ 123456 ” />

输入值为****

单选框:<input type="radio" value=" 男 " checked="checked“ />

含有checked被设置为默认勾选

复选框:<input type=“checkbox” name="cb2“ value="talk“ />

注意：单选框通过 name 属性来分组， name 相同是一组才可实现单选。

单选和复选不能输入内容，所以必须指定 value 的值

下拉框:<select name="province">
                   <option value="请选择">请选择</option>
                   <option value="陕西">陕西</option>
                   <option value="上海">上海</option>
                   <option value="北京">北京</option>
             </select>

下拉框的 name,id, 事件等需要在 select 中定义，而 value 需要在 option 中定义。

多行文本域: <textarea name= "textarea" cols= "40" rows= "6">文本域中的内容 </ textarea >

设置6行40个字符宽度的多行文本框,拥有下拉框

按钮:

<input type=“reset” value=“ 重填 ”> 重置表单内容

<input type=“submit” value=“提交”> 提交表单内容到服务器

<input type=“button” value=“按钮”> 普通按钮没有功能，只能被点击触发事件用

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="表格2.html" method="get">
			账号：<input type="text" name="account" value="" placeholder="请输入账号" /><br />
			密码：<input type="password" name="password" placeholder="请输入密码"/><br />
			<input type="radio" name="gender" value="男" checked/>男
			<input type="radio" name="gender" value="女"/>女<br />
			课程：<input type="checkbox" name="course"  value="Java" checked/>Java
			    <input type="checkbox" name="course"  value="C"/>C
		        <input type="checkbox" name="course" value="Pathon" />Pathon <br />
			省份：<select name="province">
					<option value="请选择">请选择</option>
					<option value="陕西">陕西</option>
					<option value="上海">上海</option>
					<option value="北京">北京</option>
				</select><br />
			<input type="submit" />
		</form>
	</body>
</html>