【4】WEB安全学习----HTML

最新推荐文章于 2024-05-08 13:10:48 发布

miss枫

最新推荐文章于 2024-05-08 13:10:48 发布

阅读量679

点赞数

分类专栏： WEB安全学习笔记

本文链接：https://blog.csdn.net/a15803617402/article/details/81508872

版权

WEB安全学习笔记专栏收录该内容

70 篇文章 26 订阅

订阅专栏

1、HTML页面主体常用设置

定义网页背景颜色：<body bgcolor="背景颜色">

设置背景图片：<body background="图片地址">

设置文字颜色：<body text="文字颜色">

设置链接文字属性：<body link="颜色">

设置页面边距：<body topmargin="距离">

<html>
    <head><title>定义背景颜色</title></head>
        <body bgcolor="green" background='1.jpg' text="red" link="#993300" topmargin="80" leftmargin="80">
            <p>hello world</p>
			<a href="#">heloo</a>
        </body>
</html>

2、页面头部元素

页面标题元素：<title>页面标题</title>

设置页面关键词：<meta name="keywords" content="关键词">

设置页面主要内容：<meta name="description content="页面描述">

定义页面的搜索方式：<meta name="robots" content="index">

定义页面作者信息：<meta name="author" content="作者名">

定义网页文字及语言：<meta http-equiv="content-type" content="text/html;charset="utf-8">

定义页面的跳转：<meta http-equiv="refresh" content="10:url=index.html">

3、文字字体设置

设置字号：<font size="文字字号">......</font>

设置字体：<font face="字体样式">......</font>

设置字体颜色：<font color="字体颜色">......</font>

设置粗体：<b>加粗字体</b> <strong>加粗字体</strong>

设置斜体：<i>斜体</i> <em>斜体</em> <cite>斜体</cite>

设置上标和小标：<sup>上标内容</sup> <sub>下标内容</sub>

标题样式：<h1>~<h6>

设置段落：<p>段落</p>

段落的对齐方式：<p align="center">段落</p>

换行标记：<br />

水平线：<hr /> <hr width="宽度" size="高度" color="颜色" align="center">

滚动文字标签：<marquee>滚动文字</marquee>

<html>
    <head><title>文字字体设置</title></head>
		<body>
			<font size="1" color="red">文字大小</font><br />
			<b>hello</b><strong>world</strong><br />
			<i>A</i><br />
			<h1>QQQ</h1><br />
			<hr />
			<marquee>hacker</marquee>
		</body>
</html>

4、图像标记

图像标记属性
属性	描述
src	图像源文件
alt	提示文字
width、height	宽度和高度
border	边框
vspace	垂直间距
hspace	水平间距
align	排列

<html>
    <head><title>img标签的使用</title></head>
		<body>
			<img src="fj.jpg" alt="这是一张图片" width="100" height="100" border="10">
		</body>
</html>

5、添加影音娱乐

添加背景音乐：<bgsound src="音乐地址">

添加多媒体文件：<embed src="多媒体文件地址" width="多媒体宽度" height="多媒体宽度" autostart="是否自动运行" loop="是否循环播放"></embed>

<html>
    <head><title>插入影音文件</title></head>
		<body>
			<embed src="1.swf" width="200" height="200" autostart="True" loop="True"></embed>
			<bgsound src="1.wav">
		</body>
</html>

6、超链接

<a href="链接地址" name="链接命名" title="提示文字" target="目标窗口">......</a>

target有：-self：在当前页面打开 -blank：全新窗口打开 -top：在顶层框架中打开 -parent：在当前框架的上一层打开

<html>
    <head><title>插入影音文件</title></head>
		<body>
			<a href="1.jpg">创建图像的超链接</a>
			<a name="aaa"></a>创建锚点
			<a href="#aaa">连接到锚点</a>
			<a href="1.mp3">下载MP3</a>
		</body>
</html>

7、表格

表格是由行（table）、列（tr）、单元格（td）组成。

表格的高度和宽度：width、height

表格的标题：<caption>表格标题</caption>

表格的表头：<th>......<th>

表格的对齐方式：<table align="center">

表格的边框宽度：<table border="宽度">

表格边框颜色：<table border="1" bordercolor="颜色">

单元格间距：<table cellspacing="值">

单元格边距：<table cellpadding="值">

表格背景颜色：<table bgcolor="颜色">

表格的背景图像：<table background="图像地址">

<html>
    <head><title>表格</title></head>
		<body>
			<table width="500" height="300" align="center" border="2" bordercolor="red" background="1.jpg">
				<tr>
				<td>aaaa</td>
				<td>bbbb</td>
				</tr>
				<tr>
				<td>1111</td>
				<td>2222</td>
				<td>3333</td>
				</tr>
			</table>
		</body>
</html>

8、框架

框架技术可以将浏览器分割成多个小窗口，并且每个小窗口中显示不同的网页。

<frame>标记用来定义框架 <frameset>用来定义框架集

<html>
    <head><title>框架</title></head>
		<body>
		<frameset rows="50%,*" cols="50%," border="1">
			<iframe src="http://www.baidu.com" width="200" height="200"></iframe>
			<iframe src="http://www.sina.com" width="200" height="200"></iframe>
		</frameset>
		</body>
</html>

9、表单

from表单属性
属性	描述
action	提交的地址
method	提交的方法
name	表单命名
enctype	编码方式 application/x-www-form-urlencoded为默认

表单控件
属性值	说明
text	文本字段
password	密码域
radio	单选按钮
checkbox	复选框
submit	提交按钮
reset	重置按钮
image	图像域
hidden	隐藏域
file	文件域
button	普通按钮

<html>
    <head><title>表单</title></head>
		<body>
			<form>
				<input name="text1" type="text" size="25" maxlength="20">
				<input name="password1" type="password" value="@" size="25" maxlength="20">
				<input type="image" name="image" src="1.jpg">
				<input type="radio" name="radio" value="aa" checked>
				<input type="reset" name="button" value="to">
				<input type="submit" name="button" value="go">
			</form>
		</body>
</html>

10、列表

<html>
    <head><title>列表</title></head>
		<body>
			<ul>
				<li>无序列表1</li>
				<li>无序列表2</li>
				<li>无序列表3</li>
				<li>无序列表4</li>
			<ul>
			 
			<ol type="l">
				<li>有序列表1</li>
				<li>有序列表2</li>
				<li>有序列表3</li>
				<li>有序列表4</li>
			<ol>
			
			<menu>
				<li>列表1</li>
				<li>列表2</li>
				<li>列表3</li>
				<li>列表4</li>
			</menu>
		</body>
</html>

11、作业

1、熟悉HTML各标签作用

2、可以用代码手写简单的HTML网页

miss枫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
【4】WEB安全学习----HTML

目录 1、HTML页面主体常用设置2、页面头部元素3、文字字体设置4、图像标记5、添加影音娱乐6、超链接7、表格8、框架9、表单10、列表11、作业1、HTML页面主体常用设置定义网页背景颜色：&lt;body bgcolor="背景颜色"&gt;设置背景图片：&lt;body background="图片地址"&gt;设置文字...
复制链接

扫一扫