HTML网页基础(超文本标记语言)
我终于对前端下手了（1.1入门
1.创建html文件，后缀名为html或者htm
2.标签分类
[*]单标签
[*]双标签：有开始标签和结束标签 内容 内容结束标签需要添加/
3.标签可以嵌套使用的（不能出现交叉嵌套）
[*]正确：这是文字
[*]错误：这是文字
4.在开始标签中可以定义属性，属性由键值对组成，值需要使用引号引起来。一个标签中可以写多个属性，多个属性之间使用空格隔开。
5.html的标签不区分大小写。建议都使用小写。
示例
<html>
<head>
<title>title</title>
</head>
<body>
<font color='red' size = '5'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>
1.2 常用标签
1.2.1 文件标签
构成html网页的基本标签
1.<!DOCTYPE html> 用于指定当前文档的类型
2.html ：是文档的根标签,html文档中只有一个根标签，其他的标签都只能是根标签的子标签。
3.head ：头标签 包含了文档的咨询信息，当前文档的配置，引入其他的资源。
4.meta ：告知浏览器，使用什么方式来编码。浏览器默认的编码方式是gbk
5.title：设置网页的标题
6.body：用于定义网页的主体内容例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
好好学习 天天向上
</body>
</html>1.2.2 文本标签
注释标签
标题标签 h1~h6
特点：具有加粗和加黑的效果。从h1~h6大小是逐级递减。标题标签独占一行。
段落标签：<p>段落的内容</p>
特点：段落与段落之间由空行隔开。
换行标签：<br/>注意：单标签的写法<标签名/>
水平线标签：<hr/>
属性：
1.color:设置水平线的颜色
2.width:设置水平线的宽度
3.align:设置水平线的对齐方式
leftcenter(默认值)rigth
4.size:设置水平线的粗细
加粗标签: <b>粗体文本</b> <strong>强调文本</strong>
倾斜标签：<i>斜体文本</i><em>强调斜体文本</em>
下划线标签:<u>带下划线的文本</u>
字体标签:font
font标签是字体标签 默认没有任何效果，需要结合属性使用
1.color:设置文字的颜色
2.size:设置文字的大小
范围：1~7 超过7还是7,默认值为3.
3.face:设置文字的字体
对应的需要在电脑中安装了对应的字体才有效果。（也可以使用css设计样式）
[*]颜色的写法
1.直接写颜色单词：redgreenyellowblue pinkpurpleorange
2.#6个数字 十六进制的数字（0~9a~f）
#ff0000#E91D1D
2.rgb(数字1,数字2,数字3);数字的范围是0~255.存在浏览器兼容性问题。
[*]尺寸的写法
1.数值width="600" 单位默认就是px(像素)
2.百分比：width="50%" 占比相对于父元素的比例1.2.3 图片标签
img标签
属性
1.src:设置要显示的图片的路径。这是一个必须的属性。
2.width:设置图片的宽度
3.height:设置图片的高度
为了保证图片不变形，设置了其中的一个 另一个就会等比例所缩放。
4.title:设置鼠标悬浮在图片上的提示信息
5.alt:设置图片不正常加载时的提示信息
6.title:设置图片边框的粗细示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<img src="https://www.cnblogs.com/1.png" width="50%" height="40%" title="这个猫猫是我的！！！" alt="麻薯图片" border="50"/>
</body>
</html>1.2.4 超链接标签
标签：
属性：
href:要链接的路径 如果要跳转到其他项目中 需要添加协议。
target:设置连接打开的位置
_self:在当前的窗体打开
_blank ：在新窗体中打开示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接页面</title>
</head>
<body>
点击我可以 看猫猫
跳转到京东
我是一个超链接
</body>1.2.5 表格标签
1.2.5.1 表格标签三要素
table:定义表格
tr:定义行
td:定义单元格1.2.5.2 表格标签的属性
1.border：用于设置表格的边框粗细，表格默认没有边框。
2.cellspacing:设置单元格之间的距离
3.width:设置表格的宽度
4.height:设置表格高度
5.align:设置表格的对齐方式：leftcenter right
6.bgcolor:设置表格的背景颜色
7.cellpadding:设置内容到边框之间的距离示例
<table border="1" cellspacing="0" width="50%" height="300px" align="center" bgcolor="orange" cellpadding="50">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr bgcolor="#ffc0cb" align="center" height="50">
<td>1</td>
<td>旺财</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>小强</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>小黑</td>
<td>18</td>
</tr>
</table>
1.2.6 表单标签（用于收集用户信息,一次性提交后端,和服务器进行交互）
1.2.6.2 表单标签
form:用于确定一个提交的范围,提交按钮在那个表单中就把那个表单提交
属性：
action:用于指定表单提交到服务器的路径
method:表单的提交方式
get:【默认的】
1.数据是通过地址栏【url】提交的。
2.对数据提交有大小的限制。【浏览器限制的】
3.数据在地址栏中可见的，相对不安全。
post:
1.数据是通过请求体提交。
2.对数据的提交没有大小的限制。
3.数据在地址栏中可见的，相对会更安全一些。
注意：get/post都是明文传输数据。都是不安全的。1.2.6.3 表单项标签
数据要能够提交 必须给框取名 通过name属性
input输入标记
0. number:数值输入框
1.text:普通文本输入框
属性：
1.placeholder 设置输入框的提示信息。
2.size:设置输入框可见的宽度
3.value:设置输入框的默认值【可以修改】
2.password:密码输入框输入的内容显示掩码。
1.placeholder 设置输入框的提示信息。
2.size:设置输入框可见的宽度
3.value:设置输入框的默认值【可以修改】
3.radio:单选按钮
真正提交的值是value中的值。
要实现多个单元按钮只能选择一个，需要保证他们的name属性是一样的。
checked:设置默认选中。
4.checkbox:复选按钮
真正提交的值是value中的值。
checked:设置默认选中。
5.date:日期组件
6.file:文件域
7.hidden:隐藏域
使用场景：服务器需要这个数据，但是希望在浏览器中不要显示出来。
8.submit:提交按钮
作用：将按钮所在的表单的内容提交到action指定的服务器中
value:用于指定按钮上面的文字
9.reset:重置按钮
作用：将表单的内容还原成最初的样子
value:用于指定按钮上面的文字
10.button:普通按钮
作用：默认没有任何作用，后期会结合点击事件使用。
11.image:图片提交按钮
作用：将按钮所在的表单的内容提交到action指定的服务器中例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#">
用户名：<input type="text">
密码：<input type="password">
年龄：<input type="number">
性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女
爱好：<input type="checkbox">唱歌
<input type="checkbox">跳舞
<input type="checkbox">睡觉
<input type="checkbox">打游戏
头像：<input type="file">
生日：<input type="date">
<input type="submit" value="提交信息">
</form>
</body>
</html>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]