web前段之HTML

本文链接： https://blog.csdn.net/Feng_xiaowu/article/details/100586621

HTML

C/S和B/S架构

C/S:客户端服务器模式
B/S:浏览器服务器模式

HTML简介

说明:HTML是一种超文本标记语言(hyper text markup language)
后缀名:.html或者是.htm,目前统一使用.html
标签:html网页的基本组成部分
- 格式
  
  <标签名属性1="值一" 属性2="值2" ...>标签内容</标签名>
  
  <标签名属性1="值1" 属性2="值2".../>
- 特点:
  - 双边标签必须成对出现,单边标签自己需要加上’/’
  - 标签的容错性很强,有时即使写错了,依旧可以执行
  - 所有标签都是已经定义好的
  - 变签名不区分大小写,但一般建议使用小写

全局架构标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题内容放置处</title>
	</head>
	<body>
        网页要显示的内容编辑处
	</body>
</html>

标签说明

标签	说明
html	文档中最大的标签,所有内容都放在这里面
head	头部标签,通常放置显示之外的内容,用于对页面的额外说明
body	存放页面显示的内容
meta	设置字符集
title	设置标题

文本修饰标签

标题 :<h1>--<h6>,字体从大到小
加粗: <b></b> <strong></strong>
斜体:<i></i> <em></em> <cite></cite>
下划线:<u></u>

自带下划线的标签有------<u></u>和<a href="" />
删除线:<s></s>
标注: 上标注–<sup></sup> 下标注----<sub></sub>
字体: <font size="" color="" face=""></font>

其中size代表字体大小 ,color代表字体颜色 ,face代表使用的字体类型

格式控制标签

换行: <br /> 有多少个空格,就显示多少个
滚动标签: <marquee></marquee>

注意:写在该标签里面的内容会在屏幕上来回滚动,类似于弹幕
段落标签:<p></p> 一个块级标签
原样输出标签:<pre></pre> 浏览器上显示的内容与文档内容一致
列表
- 有序列表:<ol><li></li></ol>
- 无序列表:<ul><li></li></ul>
- 可通过设置type属性该表小图标,无序列表改变的是图标的形状,如square(实心方块),circle(空心圆),disc(实心圆,默认);有序列表改变的是标签的序号,是用什么来表示,阿拉伯数字或罗马数字亦或者其他

字符实体(转义字符)

说明:在HTML中,有些字符是预留的.比如在HTML中不能使用小于号(<)和大于号(>)

因为浏览器会误认为是标签,此时我们可以使用字符实体,正确的显示预留字符

常见的字符实体

&nbsp;		空格
&lt;		小于号
&gt;		大于号
&amp;		&

实例:

<ol>
<li>HTML中,换行使用的标签是( ) 。</li>
			<ol type="A">
				<li>&lt;br /&gt;</li>
				<li>&lt;p&gt;</li>
				<li>&lt;hr /&gt;</li>
				<li>&lt;img /&gt;</li>
			</ol>
</ol>
/* 使用字符实体实现下面的输出 */
1.HTML中,换行使用的标签是( ) 。
A.<br />
B.<p>
C.<hr />
D.<img />

url(统一资源定位符)

是(URI—统一资源标识符)的一种,可以定位一个网络资源
组成:协议://主机:端口/文件?参数1=值1&参数2=值2
示例:<https://www.baidu.com/s?ie=utf-8&f=8>

超链接(`<a></a>`)

说明:进行页面的跳转

属性

属性	说明
href	指定跳转的位置
title	光标放上去会显示提示信息
target	页面打开的方式,属性值有`_self`,`_blank`,`_top`,`_parent`

target常用的属性值说明
- _self-----在当前页面打开
- _blank------在新的页面打开

锚点:对页面进行定位的

命名语法:<a name="label"锚(显示在页面上的文本)</a>
提示: 锚点的名字可以任意,也可以使用id属性来替代name属性,命名锚同样有效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			:target{
				border: 2px solid #E31106;
				}
			a[href]:hover{
				font-weight: bold;
				color: red;
				font-style: italic;
			}
			#mao1,#mao2{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<h2>标题在此</h2>
		<p><a href="#mao1">跳转到内容1</a></p>
		<p><a href="#mao2">跳转到内容2</a></p>
		<p><h3>请点击上面的链接,:target选择器会突出显示当前活动的HTML锚</h3></p>
		<p id="mao1"><b>内容1</b></p>
		<p id="mao2"><b>内容2</b></p>
		<p><b>注释:</b>IE8以及更早版本不支持:target选择器</p>
	
	
	</body>
</html>

多媒体标签()

图片标签(img)

组成: <img src="" title="" width="" height="" />

属性	说明
src	指定资源的地址
title	光标放上去显示的提示信息,资源连接失败的时候,会显示信息
width	设置图片宽度
height	设置图片高度

音频标签(audio)

组成:<audio src="" controls="" loop="" autoplay=""></audio>

属性	说明
src	指定资源路径
controls	是否显示播放条
loop	是否进行循环播放
autoplay	设置自动播放

音频标签(video)

组成:<video src="" controls="" loop="" autoplay=""></video>

属性	说明
src	指定资源路径
controls	是否显示播放条
loop	是否进行循环播放
autoplay	设置自动播放

表格(table)

组成: <table><tr><td></td></tr></table>

属性	说明
weight	宽度
height	高度
align	对齐方式
bgcolor	背景色
border	边框
bordercolor	边框颜色

<tr></tr>中的属性

属性	说明
bgcolor	背景色
align	水平对齐方式(left)默认 (center) (right)
valign	垂直对齐方式(top) middle(默认) (bottom)

**<td></td>**中的属性

属性	说明
bgcolor	背景色
align	水平对齐方式
valign	垂直对齐方式
rowspan	行合并
colspan	列合并

<th></th> ------用于显示表头信息
<caption></caption>-------表格标题,说明表格的作用

分帧(frameset)

说明:替代了body定义页面的框架,可以指定尺寸,也可以指定比例(不能和body连用)

属性	说明
noresize	禁止拖拽
frameborder	是否显示边框,0表示隐藏,1表示显示
border	设置边框的宽度
bordercolor	设置边框的颜色
rows	垂直方向进行划分尺寸,可使用像素,也可使用百分比
cols	水平方向进行尺寸划分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 添加noresize之后,禁止页面拖动 -->
	<frameset rows="20%,*,30%">
		<frame src="http://www.baidu.com"/>
		<frameset cols="50%,*"noresize>
			<frame src="http://www.sohu.com" />
			<frame src="http://www.qq.com" />
		</frameset>
		<frame src="http://www.weibo.com"/>	
	</frameset>
</html>

表单(form)

说明:服务器在搜索用户信息的时候会使用表单,如登录,注册等

组成:<form method="" action=""></form>

属性	说明
method	提交的方法,默认为get,使用post进行提交的数据是不可见的
action	提交的地址

<form  method="post" enctype="multipart/form-data" action="">
	用户名:<input name="username" type="text"/><br />
	密码:<input name="password" type="password" /><br />
	<input type="submit" value="提交" />
</form>

`input`组成表单的重要部分

属性	说明
type	类型
name	名称,必须写,不写的话,提交的数据是无意义的数据
size	设置尺寸
maxlength	允许输入的最大字符数
value	文本框中的内容
placeholder	设置占位的提示信息
readonly	只读
disabled	禁用状态

type属性

取值	说明
text	普通文本
password	密文文本
submit	提交按钮
hidden	隐藏字段,便于携带隐藏信息
radio	单选框,name属性要一致,提交时通过value指定,checked默认选中
checkbox	复选框(多选框),同上
number	数值类型的文本框,可进行加减操作,也可通过min和max限制范围
file	用于上传文件
image	图片形式的提交按钮

<body>
	<form method="post" enctype="multipart/form-data" action="">
		用户:<input name="username" placeholder="请输入您的姓名.." maxlength="10" type="text" /><br />
		密码:<input name="password" type="password" placeholder="请输入密码.." maxlength="8"/><br />
		<input type="submit" value="登录按钮"  />
		<br /><br />	
		性别:<input type="radio" name="sex" value="0" id="nan" checked="checked"/><label for="nan">男</label>
			<input type="radio" name="sex" value="1" id="nv" checked="checked"/><label for="nv">女</label><br />
		<br /><br />
        爱好:<input type="checkbox" name="hobby" value="music" checked="checked"/>听音乐
			<input type="checkbox" name="hobby" value="reading" />阅读<br />
			<input type="checkbox" name="hobby" value="coding" />敲代码
        	<input type="image" src="https://www.baidu.com/img/bd_logo1.png"/>
		<br /><br />
	</form>		
</body>