HTML

最新推荐文章于 2023-03-29 15:11:45 发布

Ave_Di

最新推荐文章于 2023-03-29 15:11:45 发布

阅读量271

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Ave_Di/article/details/82346873

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.HTML骨架：

<!DOCTYPE html><!--文档头声明-->
<html><!--页面中最大的标签，也称之为根标签-->
	<head><!--页面的头部标签，通常在里面放置一些配置信息-->
		<meta charset="utf-8" />
		<!--
			定义了页面的字符集
			utf-8 国际通用字符集 如果不写页面中的中文会乱码
		-->
		<title>这是我独一无二的页面</title><!--定义了页面的标题-->
	</head>
	<body><!--页面的主体标签，我们绝大部分的代码都是写在这个里面的（结构全部都是写在里面的）-->
	</body>
</html>

2.标签分类

2.1 双标签：由 开始标签 和 结束标签 组成。

<b>加粗</b>
<i>倾斜</i>

2.2 单标签：至有一个标签，一“/”结尾。

<br />		换行符（浏览器不能识别我们的回车换行，只能通过标签来搞定换行的操作）
<hr />		水平线

3.标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。

<标签名 属性1="值1" 属性2="值2" 属性3="值3"></标签名>
<标签名 属性1="值1" 属性2="值2" 属性3="值3" />
采取键值对的格式 key='value' 的格式

注意：

（1）属性和起始标签之间有一个空格，属性和属性之间也要有空格。

（2）无论是单引号和双引号都要在用英文状态下输入。

4.链接

<a href="跳转的路径地址">链接</a>

4.1 外部链接：如果想通过一个连接跳转一个网址，那么这里要注意必须加上 http:// 的协议

<a href="http://www.baidu.com/">百度</a>

4.2 空链接：如果我们希望这是一个链接，但是用户单击之后又不需要跳转，或者链接还没做好的时候，我们就要用空链接来表示，也叫做假连接

<a href="#">空链接</a>
<a href="javascript:;">空链接</a>
<a href="javascript:void(0);">空链接</a>

4.3 锚点链接：通过name的值做一个绑定，实现区域的跳转。

用法：（1）首先找到对应需要跳转的位置定义一锚点a标签，加一个name属性，这个操作也称之为抛锚。

（2）借着创建点击链接a标签，在href上写上 #锚点名 实现一个绑定操作，锚点名要与要与name的值一致

设置锚点：    <a name="锚点名称"></a>
设置点击跳跃：<a href="#锚点名称">位置</a>

5.表格：在html中，一定要注意一件事情，那就是表格是按进行划分的，也就是一定要先写标签，再写单元格

table	表格标签
tr	行标签
td	单元格标签
th	标题标签
border	边框
cellspacing	单元格与单元格之间的距离
cellpadding	单元格与内容之间的距离
align	水平对齐方式（不推荐使用） left左边 center中间 right右边
bgcolor	背景颜色（不推荐使用）
rowspan	跨行
colspan	跨列
width	宽度
height	高度

6.表单（由表单域，表单配件，和提示信息三个部分组成）

作用：用来收集用户信息的，把表单中的数据提交给远端的服务器

6.1表单域：放置表单的区域

<form action="该表单提交的地址" method="get/post" name="该表单名称"></form>
action: 没有地址可以写一个#，单标当前页，或者不写

get与post的比较？

（1）get提交请求参数在地址栏中，post请求参数在http请求体中

（2）get提交相对不安全；post相对安全

（3）get请求提交的数据长度有限；post没有长度限制

注意：

a. 如果需要把form标签中的所有数据提交给服务器，要求form标签中的每个数据对应的标签上必须有一个name属性

<input type="text" name="username"/>

b. 只有加了name属性之后，浏览器才会发送表单项的数据，服务器才会接收到当前标签中输入的数据，name="提交参数的key"。

c. 如果是让用户选择的表单，比如单选框和复选框，这是必须书写value属性，这个value属性的值，就是提交给服务器的数据

d. 对于select标签，name属性需要写在select标签中，而value属性需要写在option标签

6.2表单控件

6.2.1 文本输入框

<input type="text" name="username" value="请输入用户名..."/>
可以通过value属性添加默认显示的文字

6.2.2 密码框

<input type="password" name="password"/>

6.2.3 单选框

<input type="radio" name="sex" value="male" checked="checked"/>
单选框想实现单选的功能，必须制定一个相同的name值
如果想默认选中其中一项，添加"checked=checked"即可
为了方便数据的提交，加上value值

6.2.4 复选框

<input type="checkbox" name="hobby" value="zq" checked="checked"/>
如果希望默认选中，同样添加checked="checked"即可
为了方便数据的提交，加上value的值

6.2.5 文件上传

<input type="file" name="upload" />

6.2.6 隐藏域

<input type="hidden" name="hidden"/>
默认隐藏的，通常用来临时存储数据。

6.2.7 图片按钮

<input type="image" src="图片路径" alt="替换文本"/>
图片形式的提交按钮，通过src引入图片
效果等同于提交按钮
alt里的值当图片加载失败是显示

6.2.8 提交按钮

<input type="submit" value="提交按钮"/>
自带提交功能

6.2.9 重置按钮

<input type="reset" value="重置按钮"/>
可以重置当前表单域里面的内容

6.2.10 普通按钮

<input type="button" value="普通按钮"/>
没有功能，就是个可以点击的按钮

6.2.11 下拉列表

<select name="city">
	<option value="shanghai">上海市</option>
<option value="beijing" selected="selected">北京市</option>
	<option value="guangzhou">广州市</option>
</select>
如果想默认选中一项，添加属性selected="selected"
name必须加在select身上，每个option都要写一个value

6.2.12 文本域

<textarea name="content" cols="40" rows="20"></textarea>
可以输入多行文本
cols定义宽度，rows定义高度

Ave_Di

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录