前端:HTML

本文详细介绍了HTML语言的基础知识,包括文档声明、标签的使用(如标题、段落、列表、超链接等)、标签属性、特殊符号转义,以及表格和表单组件的创建,如文本框、下拉框和多行文本域,以及提交按钮的使用。
摘要由CSDN通过智能技术生成

目录

一、HTML概述

二、HTML基本语法

2.1文档声名

2.2标签

2.2.1标签属性

2.2.2基本常用标签

2.2.3特殊符号转义

2.3表格

2.3.1表格的基本构成标签

2.3.2表格的属性

2.4表单

2.4.1 表单-文本

2.4.2 表单-其他表单

2.4.3下拉框

2.4.4多行文本域

2.4.5按钮


一、HTML概述

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

超文本:是指页面内可以包含图片、链接、声音,视频等内容
标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)
浏览器可以解析标签,浏览器根据不同的HTML标签,解析成我们看到的网页

二、HTML基本语法

2.1文档声名

html5的文档声明
<!DOCTYPE html>
如果不声明解析网页时会产生一些不可预期的行为,所以我们应该避免出现。
<Head>标签包含了所有头部标签
头部区域的标签标签为: <title>, <style>, <meta>, <link>, <script>
<title>标签可定义网页的标题
<meta> 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新
频度的描述和关键词。
<meta> 标签位于文档的头部  <meta charset="utf-8" />
标题处添加图标
<link rel="icon" href="ico地址">
html的基本结构:
<html>…</html>标签标记 HTML 文档的开始和结束
<body>…</body> 标签包含文本、图像和链接。
<head>…</head> 标签包括标题和其他说明信息。
具体实现如下:
<!-- 对html语言的版本进行声名
   当前为版本5
-->
<!DOCTYPE html>
<!-- 所有的标记语言必须有一个根标签
     所有的网页内容都必须写在html标签中
 -->
<html>
	<!-- 对网页整体进行一些设置 -->
	<head>
		<!-- 设置网页编码形式 -->
		<meta charset="utf-8">
		<!-- 设置网页的标题 -->
		<title>我的网页</title>
		<!-- 设置网页图标-->
		<Link rel="icon" href="img/baidu.ico"/>
	</head>
	<!-- 将网页的内容写在<body> </body>标签中 -->
	<body>
		我的网页
	</body>
</html>

2.2标签

HTML 中的标记指的就是标签。 HTML使用标签来描述网页。
结构:
< 标签名 > 标签内容 </ 标签名 > 闭合标签 ( 有标签内容 )
< 标签名 /> 自闭合标签 ( 无标签内容 )

2.2.1标签属性

标签可以拥有属性。属性进一步说明了该标签的显示或使用  如:<body text=”red”>
1. 属性的格式 :属性名 = “ 属性值
2. 属性的位置:
< 标签名 属性名 = “ 属性值 “ >xxx</ 标签名 >
3. 添加多个属性:
< 标签名 属性名 = “ 属性值 属性名 = “ 属性值 “ >xxx </ 标签名 >

2.2.2基本常用标签

标题标签    <h1></h1>…..<h6></h6>
段落标签   <p>   </p>
换行标签   <br/>
  列表
无序列表   <ul><li>    </li></ul>
有序列表    <ol><li>   </li></ol>
超链接   <a>  </a> 
HTML 使用超级链接与网络上的另一个文档相连,通俗的说就是
通过连接来访问其他网页资源。
<a href=“http://www.baiduc.om” target=“_blank”>百度</a>
<a href=“login.html” target =“_blank”>登录</a>
href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)
target 打开链接文档的位置
图像标签   <img/>
具体实现如下:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的网页</title>
	</head>
	<body>
		<!-- 标题标签 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		<!-- 段落标签 -->
		<p>段落一</p>
		<p>段落二</p>
		<!-- 列表标签 -->
		<!-- 无序列表标签 -->
		  <!-- type = disc circle square -->
		<ul type="square"> 
			<li>标签1</li>
			<li>标签2</li>
			<li>标签3</li>
		</ul>
		<!-- 有序列表标签 -->
		<ol>
			<li>标签1</li>
			<li>标签2</li>
			<li>标签3</li>
		</ol>
		<!-- 超链接标签  href="链接"  target = "打开方式"-->
		<a href="https://www.baidu.com/" target="_blank">百度</a>
		<!-- 图像标签  src="图片地址"-->
		<img src="img/baidu.ico"/>
	</body>
</html>

2.2.3特殊符号转义

在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。
比如 < 和 >,我们不能直接在页面中使用< 和 >号,因为浏览器会将它解析为html标签。
例如:<b> 会被解析为b标签;  空格  再多的空格都会当一个空格处理。
为了可以使用这些预留字符,我们必须在html中使用字符转义
小于号<   &lt       大于号>     &gt      空格    &nbsp
版权(C)&copy   商标(TM) &trade   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!-- 特殊符号转义符 -->
		你&nbsp;&nbsp;好   <!-- 空格 -->
		<!-- 版权 -->
		&copy; 
		<!-- 注册商标 -->
		&reg;
		<!-- 左右括号 -->
		&lt;b&gt;标签的作用是加粗文本;
	</body>
</html>

运行结果:

2.3表格

2.3.1表格的基本构成标签

table标签:表格标签     tr标签:表格中的行    th标签:表格的表头 td标签:表格单元格

表格的基本结构
<table>定义表格
        <tr>定义表行
             <th>定义表头</th>
        </tr>
        <tr>
              <td>定义单元格</td>
        </tr>
</table>

2.3.2表格的属性

width     设置表格的宽
height    设置表格的高
cellspacing     设置表格中单元格与单元格之间的距离
cellpadding     设置表格中单元格的内边距
align                设置单元格中内容的水平位置
valign              设置单元格中内容的垂直位置
cospan            用于合并某一行的单元格
rowspan          用于合并某一列的单元格
具体实现如下:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!-- 表格标签  border="像素" cellspacing="设置单元格与单元格之间的距离" cellpadding="设置内边距"-->
		<table border="3" cellspacing="0" cellpadding="0"  height="100" width="300">
			<tr>
				<th >编号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
			</tr>
			<tr align="center" valign="top">
				<td>2</td>
				<td>李四</td>
				<td>男</td>
			</tr>
			<tr>
				<!-- 该单元格跨列合并3个单元格 -->
				<th colspan="3">跨列合并</th>
			</tr>
			<tr>
				<!-- 该单元格跨行合并2个单元格  -->
				<th rowspan="2">跨行合并</th>
				<th></th>
				<th></th>
			</tr>
			<tr>
				<th></th>
				<th></th>
			</tr>
		</table>
	</body>
</html>

运行结果:

2.4表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器.
<form>标签 :表单  属性:action 指定提交后,由服务器上哪个程序处理 
                                           method  指定向服务器提交的方法

2.4.1 表单-文本

2.4.2 表单-其他表单

2.4.3下拉框

2.4.4多行文本域

2.4.5按钮

具体实现如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单 action ="提交后端的地址" method="提交到后端的方式 "-->
		<form action="" method="get">
			<!-- 单行文本框 -->
			用户名:<input type="text" name="user" placeholder="请输入用户名!" value="123" readonly="readonly"  /><br/>
			<!-- 密码框 -->
			密码:<input type="password" name="password" placeholder="请输入密码!" /><br/>
			<!-- 单选框 圆圈 -->
			性别:男 <input type="radio" name="gender" value="男" /> 
			     女<input type="radio" name="gender" value="女"/><br/>
			<!-- 多选框 方块 -->
			选课:语文 <input type="checkbox" name="course" value="语文"/>
			     数学 <input type="checkbox" name="course" value="数学"/>
				 英语 <input type="checkbox" name="course" value="英语"/>
				 物理 <input type="checkbox" name="course" value="物理"/><br/>
			<!-- 下拉框 -->
			年级:<select name="grade">
				<option value="一年级" >一年级</option>
				<option value="二年级">二年级</option>
				<option value="三年级">三年级</option>
				</select><br/>
			附件:<input type="file" /><br/>
			<!-- 多行文本框 -->
			地址:<textarea cols="30" row="5">你好</textarea>
			<!-- 提交按钮  点击后可以将表单内容提交到后端 -->
			<input type="submit" value="提交"/>
			<!-- 普通按钮  可以添加监听-->
			<input type="button" value="普通按钮"/>
			<!-- 重置按钮 点击后可以将表单初始化 -->
			<input type="reset" value="重置"/>
		</form>
	</body>
</html>

运行结果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值