<html>和</html>，<head>和</head>，<body>和</body>都是成对出现的，带/的表示结束。
规定<html>和</html>一定是在最外面
<body>和</body>之间放的就是网页中显示的内容
<head>和</head>之间放的是非网页中显示的内容
要进行缩进
运行有乱码的话加一条：<meta charset = "UTF-8">
使用IDEA开发时，file---new---project---JavaScript--HTML
空白（space（空格）、Enter（回车）、tab（制表位））会被当作一个空格来处理。
标签
换行标签：
注释：
IDEA中注释的快捷键是：ctrl + ？
注意：HTML中的注释，在浏览过程中会被下载（消耗流量）。因此：一般在正式的项目上线过程中，会通过第三方工具将注释的内容都给删除掉。
注释的用途是：在代码中进行一些标注，方便进行查看和开发中进行标注。
字体加粗标签：<b></b>
字体强调标签：<strong></strong>（强调的方式是字体加粗）
下划线标签：<u></u>
字体倾斜标签：<em></em>
标题标签：h1到h6 <h1></h1>......<h6></h6>
hr是一个单标签，其作用是展示一条水平线。
标签的属性
标签的属性是对于一个标签进行更加详细的设置。
不同的标签支持的属性有所不同。
各个属性的先后顺序是随意的。
color属性：可以控制输出的颜色。例如：<hr color = "red">输出红色水平线。
size属性：控制水平线的粗细
width属性：控制水平线的长短
align属性：left（左）、right（右）、center（中）控制h1-h6的位置
快速生成代码
注意：光标要放到最后
标签数量 按下tab
例如：strong5，就会生成五个<strong></strong>
符号“ * ”代表生成多少个。
标签1+标签2 按下tab（注意：不要有空格）
例如：em+u，就会生成<em></em><u></u>
符号“ + ”代表之后紧跟的内容
标签1>标签2>标签3 按下tab
例如：strong>em>u，就会生成<strong><em><u></u></em></strong>
符号“ > ”代表包含关系
()代表小范围内容限定
一段内容的缩进调整：选中内容，tab向后缩进，shift + tab 向前缩进
标题标签，区别是文字大小不同，1~6，从大到小。
标题标签是块标签。
块标签默认占一整行
行标签默认在一行内从前往后堆叠
style 设置风格。例如：<h2 style = "color:red";>
<span></span>:选中一个区域，在这个区域里，也可以更改属性。
超链接
分类：跳转型链接、锚链接、功能性链接
a标签：超链接标签（行标签）
href属性：目标地址
target属性：控制内容的打开方式
_self：当前窗口直接打开内容【默认】
_blank:以新窗口的方式打开内容
title属性：设置鼠标悬停提示内容
锚链接：跳转到指定的页面位置
1、目标位置需要加一个id属性
2、锚链接的触发href属性中写 #目标位置的id值
锚链接.png
功能性链接：
<a href="mailto:xxxxxxxxx">发邮件</a>
<a href="tel:xxxxxxxxx">打电话</a>
<a href="sms:xxxxxxxxx">发短信</a>
从左往右看，往右就是下一级，往左就是上一级
平级（同级）跳转
前提：a.html，b.html，6.html，在同一个路径下
平级跳转.png
相对的下级跳转和上级跳转
相对的下级跳转.png
相对的上级跳转.png
跳转到指定页面的指定位置：在跳转到指定页面的基础上后跟上“#id属性”
文本：纯粹由字符组成的内容称之为“文本”。
字符：但凡是你能用键盘敲出来的一个单独的内容，就称之为“字符”。
./ 当前目录
../ 上一级目录
HTML：超文本标签语言
img -> image（图片） 是一个单标签
src属性：图片的资源位置
alt属性：替代文字（正常情况下是不显示的，当图片无法正常的被加载的时候会显示替代文字。）
title属性：悬浮展示提示文字
width属性：图片的展示宽度
height属性：图片的展示高度
图片也可以做超链接
表单控件
input【输入】
type【类别】
text【文本框】
password【密码框】
checkbox【复选框】
radio【单选】
date【日期】（慎用）
time【时间】（慎用）
datetime-local【日期+时间】（慎用）
select：下拉框标签
textarea：多行文本域
表单控件.png
单选框的使用
1.怎么让单选框实现单选name="w"
注意：name属性不能用数字开头
2.怎么默认选中 checked="checked"
label可以让你点击那个字就可以选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
单选框的使用
1.怎么让单选框实现单选name="w"
注意：name属性不能用数字开头
2.怎么默认选中 checked="checked"
label可以让你点击那个字就可以选中
-->
性别：
<input type="radio" name="w" id="man" > <label for="man"> 男</label>
<input type="radio" name="w" id="woman" checked="checked" ><label for="woman">女</label>
<input type="radio" name="w" >保密
<br/>
<!--
复选框（多选）
-->
爱好：
<input type="checkbox" name="" id="" >抽烟
<input type="checkbox" name="" id="" checked>喝酒
<input type="checkbox" name="" id="">烫头
<input type="checkbox" name="" id="">喝茶
<input type="checkbox" name="" id="" checked>睡觉
</body>
</html>
下拉框的设置
默认选中：selected="selected" 也可以只写属性名(要在option上进行设置)
控制显示选项数目：size
控制多选：multiple="multiple" 也可以致谢属性名（要在select上设置）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
下拉框的设置
默认选中：selected="selected" 也可以只写属性名(要在option上进行设置)
控制显示选项数目：size
控制多选：multiple="multiple" 也可以致谢属性名（要在select上设置）
-->
省份：
<select name="" id="" size="10" multiple></select>
<option value="">--请选择--</option>
<option value="">黑龙江</option>
<option value="">吉林</option>
<option value="">辽宁</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">伤害</option>
<option value="">湖北</option>
<option value="">山东</option>
<option value="">甘肃</option>
</body>
</html>
文本框所支持的属性：
placeholder：隐形提示文字
size：控制文本框的长度（但是这个属性并不建议大家使用，原因是长度属于样式，应该由样式表去控制）
maxLength：控制文本框中最多可以输入多少字符
value：文本框中显示的默认值
密码框所支持的属性跟文本框一样，只不过表现形式不同
密码框所支持的属性：
placeholder：隐形提示文字
size：控制文本框的长度（但是这个属性并不建议大家使用，原因是长度属于样式，应该由样式表去控制）
maxLength：控制文本框中最多可以输入多少字符
value：文本框中显示的默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
文本框所支持的属性：
placeholder：隐形提示文字
size：控制文本框的长度（但是这个属性并不建议大家使用，原因是长度属于样式，应该由样式表去控制）
maxLength：控制文本框中最多可以输入多少字符
value：文本框中显示的默认值
密码框所支持的属性跟文本框一样，只不过表现形式不同
-->
姓名： <input type="text" placeholder="请输入您的名字" size="100" value="输入啊，想啥呢"><br/>
手机号：<input type="text" maxlength="11"><br/>
<!--
密码框所支持的属性：
placeholder：隐形提示文字
size：控制文本框的长度（但是这个属性并不建议大家使用，原因是长度属于样式，应该由样式表去控制）
maxLength：控制文本框中最多可以输入多少字符
value：文本框中显示的默认值
-->
用户名： <input type="text" placeholder="请输入您的用户名 不会没记住吧" size="100" value="输入啊，想啥呢"><br/>
手机号：<input type="text" maxlength="11"><br/>
密码：<input type="password" placeholder="请输入您的密码，不会是忘了吧" size="100" value="111">
</body>
</html>
表单控件综述.png
按钮标签：button
type属性：控制这是哪一种按钮
submit：提交按钮
reset：重置按钮
表单标签：form
action属性：设置表单的提交地址
method属性：设置表单的提交方式
get：明文提交
post：非明文提交
只读属性：readonly
只对文本框，密码框，文本域有效
禁用：disabled
对所有的都有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
按钮标签：button
type属性：控制这是哪一种按钮
submit：提交按钮
reset：重置按钮
表单标签：form
action属性：设置表单的提交地址
method属性：设置表单的提交方式
get：明文提交
post：非明文提交
只读属性：readonly
只对文本框，密码框，文本域有效
禁用：disabled
对所有的都有效
-->
<h1>欢迎注册某某网站</h1>
<marquee behavior="" direction="">这是个正经网站</marquee>
<hr>
<form action="订单.html" method="POST">
用户名：<input type="text" name="uesrname" placeholder="请输入您的用户名" ><br>
密码：<input type="password" name="userpassword" placeholder="请输入密码"><br>
确认密码：<input type="password" name="confirmpassword" placeholder="请确认密码"><br>
性别：<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女<br>
<button type="reset" >重置</button>
<button type="submit">提交</button>
</form>
</body>
</html>
有序列表（有编号）：ol
无序列表（没编号）：ul
列表项：li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
有序列表（有编号）：ol
无序列表（没编号）：ul
列表项：li
-->
<!-- 有序列表 -->
<ol>
<li>老坛酸菜</li>
<li>红烧牛肉</li>
<li>葱香排骨</li>
<li>酸辣牛肉</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>老坛酸菜</li>
<li>红烧牛肉</li>
<li>葱香排骨</li>
<li>酸辣牛肉</li>
</ul>
</body>
</html>
表格标签
表格标签：table
border属性：控制表格的外边框的粗细（更加建议用样式表去设置）
width属性：控制表格的宽度（亿像素为单位，更加建议用样式表去设置）
height属性：控制表格的高度（亿像素为单位，更加建议用样式表去设置）
行：tr
单元格：td
调整某个单元格的所占位置个数：
rowspan
colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="200px" height="200px">
<tr>
<td colspan="2">1</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
</tr>
<tr>
<td colspan="2">8</td>
</tr>
</table>
</body>
</html>
单选框和多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
单选框的使用
1.怎么让单选框实现单选name="w"
注意：name属性不能用数字开头
2.怎么默认选中 checked="checked"
label可以让你点击那个字就可以选中
-->
性别：
<input type="radio" name="w" id="man" > <label for="man"> 男</label>
<input type="radio" name="w" id="woman" checked="checked" ><label for="woman">女</label>
<input type="radio" name="w" >保密
<br/>
<!--
复选框（多选）
-->
爱好：
<input type="checkbox" name="" id="" >抽烟
<input type="checkbox" name="" id="" checked>喝酒
<input type="checkbox" name="" id="">烫头
<input type="checkbox" name="" id="">喝茶
<input type="checkbox" name="" id="" checked>睡觉
</body>
</html>
文本框和密码框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
文本框所支持的属性：
placeholder：隐形提示文字
size：控制文本框的长度（但是这个属性并不建议大家使用，原因是长度属于样式，应该由样式表去控制）
maxLength：控制文本框中最多可以输入多少字符
value：文本框中显示的默认值
密码框所支持的属性跟文本框一样，只不过表现形式不同
-->
姓名： <input type="text" placeholder="请输入您的名字" size="100" value="输入啊，想啥呢"><br/>
手机号：<input type="text" maxlength="11"><br/>
<!--
密码框所支持的属性：
placeholder：隐形提示文字
size：控制文本框的长度（但是这个属性并不建议大家使用，原因是长度属于样式，应该由样式表去控制）
maxLength：控制文本框中最多可以输入多少字符
value：文本框中显示的默认值
-->
用户名： <input type="text" placeholder="请输入您的用户名 不会没记住吧" size="100" value="输入啊，想啥呢"><br/>
手机号：<input type="text" maxlength="11"><br/>
密码：<input type="password" placeholder="请输入您的密码，不会是忘了吧" size="100" value="111">
</body>
</html>
下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
下拉框的设置
默认选中：selected="selected" 也可以只写属性名(要在option上进行设置)
控制显示选项数目：size
控制多选：multiple="multiple" 也可以致谢属性名（要在select上设置）
-->
省份：
<select name="" id="" size="10" multiple></select>
<option value="">--请选择--</option>
<option value="">黑龙江</option>
<option value="">吉林</option>
<option value="">辽宁</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">伤害</option>
<option value="">湖北</option>
<option value="">山东</option>
<option value="">甘肃</option>
</body>
</html>
网友评论