HTML

最新推荐文章于 2024-08-26 21:48:51 发布

Richard_lca

最新推荐文章于 2024-08-26 21:48:51 发布

阅读量208

点赞数 1

分类专栏： JavaWeb 文章标签： html

本文链接：https://blog.csdn.net/Richard606/article/details/111030149

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、HTML

1.1 HTML简介

概念：超文本标记语言，通过标签实现，可以包含图片，音频，视频等。
书写规范：
标签以尖括号包围
标签通常是成对出现的
标签的多个属性之间以空格隔开
标签不区分大小写

1.2 HTML基本结构

<html>
	<head>
		<title></title>
	</head>
	<body></body>
</html>

html:根标签，在网页最外层，只有一个
head:头标签，一般有子标签用于设置字符集和网页标题
body:网页正文内容，有以下常用属性：
text="#f00":用于设置正文中文本的颜色
bgcolor="#00f":用于设置网页的背景颜色
background=“1.png”:用于设置背景图片

1.3 HTML基本标签

注释标签：
换行标签：<br>
段落标签：<p>这是段落</p>
段与段之间有空行
align:对齐方式（left,center,right）

水平线标签：<hr/>
* width:水平线的长度
* size:水平线的粗细
* color:水平线的颜色
* align:水平线的对齐方式
块标签：
* <div>行级块标签，独占一行</div>
* <span>行内块标签，在同一行</span>
基本文字标签：<font>处理文字的显示方式</font>
* size:设置字体大小，1-7
* color:设置字体的颜色
* face:设置字体的样式，宋体等
文本格式化标签：
* <b>加粗</b>
* <strong>强调加粗</strong>
* <i>斜体</i>
* <em>强调斜体</em>
* <small>小号字体</small>
* <big>大号字体</big>
* <sub>下标标签</sub>
* <sup>上标标签</sup>
* <del>删除线</del>
标题标签：
* <h1>一级标题</h1>
* <h2>二级标题</h2>
* <h3>三级标题</h3>
* <h4>四级标题</h4>
* <h5>五级标题</h5>
* <h6>六级标题</h6>
列表标签：
* 无序列表：circle:空心圆 disc:实心圆（默认） square:实心方块

		<ul type="circle">
			<li>一</li>
			<li>二</li>
			<li>三</li>
		</ul>

* 有序标签：

	<ol type="1" start="1">
		<li>一</li>
		<li>二</li>
		<li>三</li>
	</ol>

	* start:起始位置
	* type="1"，数字类型
	* type="A"，大写字母类型
	* type="a"，小写字母类型
	* type="I"，大写古罗马
	* type="i"，小写古罗马

图形标签：<img />
* src:图片的地址
* width:图片的宽度
* height:图片的高度
* border:图片的边框
* align:与图片的对齐方式
* alt:图片无法显示时的提示信息
* hspace:图片左右设置空白
* vspace:图片上下设置空白
链接标签：
* 跳转页面：<a href="">跳转页面</a>
* target="_blank":在新窗口中跳转
* target="_self":在当前窗口中跳转
* 跳转到指定锚点：
* 定义锚点：<a name="锚点">锚点位置</a>
* 指向锚点：<a href="#锚点">跳转到锚点</a>
表格标签：
* table:标识表格的开始与结束
* border:设置表格边框
* cellspacing:设置单元格外边距
* cellpadding:设置单元格内边距
* tr:表格行标签
* rowspan:行合并属性，在同一列跨多行合并
* td:表格列标签
* colspan:列合并属性，在一行中合并多个列
* th:表头标签，内容有加粗和居中效果

	<table border="1px" cellspacing="0px" cellpadding="10px">
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
		</tr>
		<tr>
			<td rowspan="2">列1</td>
			<td colspan="2">列2</td>
		</tr><tr>
			<td>列2</td>
			<td>列3</td>
		</tr>
	</table>

1.4 HTML表单标签

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

    <!--form表单常用控件-->
   <form>
   	文本框：<input type="text" /><br />
   	密码框：<input type="password" /><br />
   	单选框：<input type="radio" /><br />
   	复选框：<input type="checkbox" /><br />
   	日期框：<input type="date" /><br />
   	电子邮件框：<input type="email" /><br />
   	数值输入框：<input type="number" /><br />
   	文件上传：<input type="file" /><br />
   	隐藏域：<input type="hidden" /><br />
   	取值范围：<input type="range" /><br />
   	取色按钮：<input type="color" /><br />
   	文本域：<textarea cols="10" rows="5"></textarea><br />
   	<!-- 单下拉框
   		默认选中：selected="selected"
   	-->
   	单下拉框
   	<select>
   		<option value ="1">1</option>
   		<option value ="2" selected="selected">2</option>
   		<option value ="3">3</option>
   		<option value ="4">4</option>
   	</select><br />
   	<!-- 多下拉框 -->
   	多下拉框
   	<select multiple="multiple">
   		<option value ="1">1</option>
   		<option value ="2">2</option>
   		<option value ="3">3</option>
   		<option value ="4">4</option>
   		<option value ="5">5</option>
   		<option value ="6">6</option>
   	</select><br />
   	<input type="submit" value="提交按钮" /><br />
   	<input type="button" value="普通按钮" /><br />
   	<input type="reset" value="重置按钮" /><br />
   	<input type="image" src="#" value="图片提交按钮" /><br />
   </form>

1.5 HTML框架集frameset

用于定义分隔窗口
每个frameset定义一系列行或列
* <frameset rows="*,*">< /frameset>
* <frameset cols="*,*">< /frameset>
frameset与body不能共存
使用noresize="noresize"设置窗口不可拖动

<!-- 使用frameset框架集 -->
   <!-- frameset与body不能共存-->
   <frameset rows="20%,*">
   	<frame src="head.html" />
   	<frameset cols="15%,*">
   		<frame src="left_menu.html" />
   		<frame src="right_content.html" name="content" />
   	</frameset>
   </frameset>

1.6 其他标签及特殊字符

其他标签：

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<!--该网页的描述-->
	<meta http-equiv="description" content="this is my page">
	<!--该网页的编码-->
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<!-- href：引入css文件的地址-->
	<link rel="stylesheet" type="text/css" href="./styles.css">
	<!--src：js的文件地址-->
	<script type="text/javascript" src=""></script>

特殊字符：
占位符：空格 -  

Richard_lca

关注

1
点赞
踩
0

收藏

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

一、HTML1.1 HTML简介概念：超文本标记语言，通过标签实现，可以包含图片，音频，视频等。书写规范：标签以尖括号包围标签通常是成对出现的标签的多个属性之间以空格隔开标签不区分大小写1.2 HTML基本结构<html> <head> <title></title> </head> <body></body></html>html:根标签，在网页最外层，只有一
复制链接

扫一扫

专栏目录