关于HTML、CSS、JavaScript
HTML主要用于网页主体结构的搭建
CSS主要用于页面元素美化
JavaScript主要用于页面元素的动态处理
关于HTML
关于超文本
关于标记语言
HTML基础结构
- html文件是浏览器负责解析和展示。
- html文件是纯文本文件，普通编辑工具都可以编辑。
文档声明
<!DOCTYPE html> ：声明此文档是一个html文档，也可以不写。
html文件的根标签
<html> </html>所有的根标签都要在这个标签中间
html根标签下有两个一级子标签：头标签、体标签。
头标签
<head></head> 头标签：定义那些不直接展示在页面主体上但是又很重要的内容（比如：字符集、title、css引入、js引入，等）
体标签
<body></body> 体标签：定义要展示到页面主题的标签
页面标题标签
<title></title> 页面标题的标签，将页面标题写入其中。定义在头标签内。
例：<title>李二狗的JavaWeb学习</title> ，效果如图。
定义字符集标签
<meta charset = '字符集'/> 告诉浏览器用什么字符集对文件解码。通常用UTF-8字符集，定义在头标签内部。
注释
HTML中注释的写法是
<!--注释内容-->
html文件的大概格式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="字符集">
<title>页面的标题</title>
</head>
<body>
页面的主体
</body>
</html>
HTML概念词汇
标签
代码中的一个<>叫做一个标签。有些标签成对出现，称为双标签。有些标签单独出现，称为单标签。
属性
一般在开始标签中，用于定义标签的一些特征。
文本
双标签中间的文字，包含空格换行等结构。
元素
经过浏览器解析后，每一个完整的标签（标签+属性+文本）可以称为一个元素。
HTML的语法规则
- 根标签只能有一个。
- 无论是双标签还是单标签都要正确关闭。
- 标签可以嵌套但不能交叉嵌套。
- 注释不能嵌套。
- 属性必须要有值，且值必须加引号，H5中属性名和值相同时可以省略属性值。
- HTML中不严格区分字符串使用单双引号。引号的嵌套可以使用单引号和双引号的不同来完成。
常见标签
标题标签
格式：（以一级标签为例）
<h1> (标题内容) </h1>
标题总共有六级，即h1到h6。
h1到h6的显示效果如图：
<!--关于标题标签-->
<h1>我爱敲代码</h1>
<h2>我爱敲代码</h2>
<h3>我爱敲代码</h3>
<h4>我爱敲代码</h4>
<h5>我爱敲代码</h5>
<h6>我爱敲代码</h6>
自然段标签
格式：
<p>
(自然段内容)
</p>
在html中，不会识别换行操作，要将两个自然段分开，要将两个自然段分别用<p></p>括起来。
换行标签
格式：
<br/> <!--也可以写成<br>-->
<hr/> <!--也可以写成<hr>-->
<br>是单纯的换行操作
<hr>是带分割线的换行
列表标签
有序列表
列表标签：<ol></ol>
列表项标签：<li></li>
一对列表标签内包含一组有序列表，一对列表项内包含有序列表的一列。
有序列表内，列表中的每一列的开头都有其在列表中的序号。
效果如图：
<ol>
<li>C语言</li>
<li>Java</li>
<li>MySQL数据库</li>
<li>JavaWeb</li>
</ol>
无序列表
列表标签：<ul></ul>
列表项标签：<li></li>
一对列表标签内包含一组无序列表，一对列表项内包含无序列表的一列。
无序列表内，列表中的每一项的开头没有序号，而是有一个黑色的圆点。
效果如图：
<ul>
<li>C语言</li>
<li>Java</li>
<li>MySQL数据库</li>
<li>JavaWeb</li>
</ul>
列表的嵌套
可以在列表内嵌套列表，即在<li></li>内再写列表。
例如：
<ul>
<li>C语言
<ol>
<li>数据类型</li>
<li>变量</li>
<li>流程控制</li>
<li>数组</li>
<li>函数</li>
<li>指针</li>
</ol>
</li>
<li>Java</li>
<li>MySQL数据库</li>
<li>JavaWeb</li>
</ul>
效果如图：
超链接标签
格式：
<a></a>
属性：
href 用于定义要跳转的目标资源地址，属性值为指定的网页地址（可以是完整的url，也可以是相对路径或绝对路径）
target 用于定义目标资源的打开方式，属性值为打开方式
打开方式：
_self：在当前窗口打开目标资源
_blank：开启新窗口打开目标资源
代码效果如图：
<a href = "<http://www.atguigu.com>" target="_self">尚硅谷</a>
点击尚硅谷文字后就会在此页面跳转到尚硅谷的官网
在同一个树分支中的俩个文件的超链接可以使用相对路径实现，例如：
<a href="有序和无序列表.html" target="_blank">有序和无序列表的代码效果</a>
点击有序列表和无序列表的文字就会再打开一个新的页面跳转到 有序和无序列表.html 的页面
关于相对路径
相对路径的开头可以是 ./或../。./表示当前资源的所在路径，可以省略不写。../表示当前资源的上一层路径，使用时要显式写出。
多媒体标签
图片标签
格式：
<img/>
属性：
src：定义图片的路径
title：定义鼠标悬停时提示的文字
alt：定义加载失败时提示的文字
width：指定图片的宽度，单位为px（像素）
表格标签
<table></table>：一对table标签内包含一个表格
<thead></thead>：代表表头，可以省略不写
<tbody></tbody>：代表表体，可以省略不写
<tfoot></tfoot>：代表表尾，可以省略不写
<tr></tr>：代表一行
<td></td>：代表行内的一格
<th></th>：代表自带加粗和居中效果的td
例如：
<h1 style="text-align: center;">员工信息表</h1>
<table border="2px" style="margin: auto; width: 500px;">
<thead>
<tr>
<th>员工姓名</th>
<th>员工部门</th>
<th>员工薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>李四</td>
<td>10号部门</td>
<td>10000</td>
</tr>
<tr>
<td>张三</td>
<td>20号部门</td>
<td>11000</td>
</tr>
</tbody>
</table>
效果如图：
如果省略表头表体表尾标签，则默认都是表体。
如果想让一个格向下多占几行，则在td标签或th标签中加上属性rowspan = “所占的行数”
例如：
<table border="2px" style="margin: auto; width: 500px;">
<thead>
<tr>
<th>员工姓名</th>
<th>员工部门</th>
<th>员工薪资</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>李四</td>
<td>10号部门</td>
<td>10000</td>
<td rowspan="3">每人工资涨薪10000块</td>
</tr>
<tr>
<td>张三</td>
<td>20号部门</td>
<td>11000</td>
</tr>
<tr>
<td>二狗</td>
<td>30号部门</td>
<td>30000</td>
</tr>
</tbody>
</table>
效果如图：
让一格向右多占几列也是同理，使用属性colspan = “所占的列数”
例：
<table border="2px" style="margin: auto; width: 500px;">
<thead>
<tr>
<th>员工姓名</th>
<th>员工部门</th>
<th>员工薪资</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>李四</td>
<td>10号部门</td>
<td>10000</td>
<td rowspan="5">每人工资涨薪10000块</td>
</tr>
<tr>
<td>张三</td>
<td>20号部门</td>
<td>11000</td>
</tr>
<tr>
<td>二狗</td>
<td>30号部门</td>
<td>30000</td>
</tr>
<tr>
<td>总人数</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>职位</td>
<td colspan="2">后端开发工程师</td>
</tr>
</tbody>
</table>
效果如图：
表单标签
表单标签是可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务器端发送数据主要的方式之一
<form></from>：form标签，即表单标签，其内部用于定义可以让用户输入信息的表单项标签
属性：
action：用于定义信息提交的服务器的地址
method：用于定义信息提交的方式。get方式：数据会缀到url后，以?作为参数开始的标识。post方式，数据会通过请求体发送，不会缀到url后。
<input/>：主要的表单项标签，可以用于定义表单项
属性：
name：用于定义提交的参数名
type：用于定义表单项类型。类型：text 文本框，password 密码框，submit 提交按钮，reset 重置按钮,radio 单选框
表单项一定要定义name属性，该属性用于明确提交时的参数名
表单项还有value属性，该属性用于明确提交时的实参。不对输入内容进行修改时，提交的实参即为value属性的值。若输入内容，提交的实参即为输入的内容。
表单的提交方式
提交方式定义在method标签中，有post与get
get：
- 参数会以键值对的形式放在url后提交 ：url?key=value&key=value……
- 数据直接暴露在地址栏上，相对不安全
- 地址栏的长度有限制，所以提交的数据量有限
- 地址栏上，只能是字符
- 相比于post，效率更高。
post：
- 参数不默认放到url后
- 数据不会放在地址栏上，相对安全
- 数据是单独打包通过请求体发送，提交的数据量比较大
- 请求体中，可以是字符，也可以是字节数据，可以提交文件
- 相比于get，效率更低。
表单项类型
input标签中的表单项的属性：
radio：单选框
多个单选框使用相同的name则就会有互斥效果，即只能选其中的一个。
需要给表单项定义value值，如此被选中的单选框就会将其默认的value值提交出去
在表单项的属性后加上 checked=”true”或checked=”checked”或直接写checked（属性名与属性值不同时，可以省略属性值的定义）之后，在未作选择时，该表单项就会被默认选择
例：
<form action="图片标签.html" method="get">
用户名:<input type="text" name="username"/><br>
密码:<input type="password" name="userpassword"/><br>
<input type="radio" name="gender" value="man" checked="true"/>男
<input type="radio" name="gender"/ value="woman">女<br>
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</form>
效果如图：
checkbox：复选框
复选框使用相同的name不会有互斥效果，可以选择多个。
也需要给表单项定义value值，如此被选中的单选框就会将其默认的value值提交出去，选多个表单项时，相应提交多个键值对信息（比如：hobby=basketball&hobby=football&hobby=baseball）。
复选框也可以使用check属性来默认选中。
hidden：隐藏域
不显示在页面上，提交时会携带隐藏域中的信息一起提交。提交一些特定的信息，但是考虑到安全问题或者是用户操作不当时，不希望这些特定的信息发生改变，就可以使用隐藏域。
一些其他的表单项的属性：
readonly：数据设置为只是可读
disable：数据设置为显示但是不提交
input标签的表单项之外的表单项：
textarea 文本域（多行文本框）
格式：
<textarea></textarea>
textarea表单项也要定义name，但是没有属性value，textarea提交的就是textarea双标签中间的数据
select：下拉框
格式：
<select>
<option>下拉框中的选项</option>
<option>下拉框中的选项</option>
<option>下拉框中的选项</option>
……
</select>
下拉框表单项也要定义name，如果option标签中没有定义value属性，则提交option双标签中间的数据，如果定义了value属性，则提交定义的value属性。
如果在某个选项的option标签中加上selected，此选项就被默认选中
复选框、文本域、下拉框的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录系统</title>
</head>
<body>
<form action="图片标签.html" method="get">
用户名:<input type="text" name="username"/><br>
密码:<input type="password" name="userpassword"/><br>
<input type="radio" name="gender" value="man" checked="true"/>男
<input type="radio" name="gender"/ value="woman">女<br>
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="baseball"/>棒球<br>
所在地: <select name="located">
<option value="gan_zhou">赣州</option>
<option value="ji_an">吉安</option>
<option value="nan_chang">南昌</option>
<option value="jiu_jiang">九江</option>
<option value="0" selected>请选择</option>
</select><br>
个人简介:<br>
<textarea name="introduction" style="width: 300px;height: 100px;"></textarea>
<br>
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</form>
</body>
</html>
演示效果如图：
布局相关标签
div：属于块元素，自己独占一行
span：属于行内元素，不会自己独占一行
块元素的css样式的宽、高等往往都生效，行内元素的css样式的宽、高等，很多都是不生效的。
div可以将页面的内容分成多块来布局，span用来对行内的内容进行分开编辑，二者配合使用
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录系统</title>
</head>
<body>
<div style="border: 1px solid red;width: 700px;height: 300px;margin: auto;background-color: antiquewhite;">
用户登录界面 <span style="font: 25px;color: red;"> 欢迎!</span>
<form action="图片标签.html" method="get">
用户名:<input type="text" name="username"/><br>
密码:<input type="password" name="userpassword"/><br>
<input type="radio" name="gender" value="man" checked="true"/>男
<input type="radio" name="gender"/ value="woman">女<br>
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="baseball"/>棒球<br>
所在地: <select name="located">
<option value="gan_zhou">赣州</option>
<option value="ji_an">吉安</option>
<option value="nan_chang">南昌</option>
<option value="jiu_jiang">九江</option>
<option value="0" selected>请选择</option>
</select><br>
个人简介:<br>
<textarea name="introduction" style="width: 300px;height: 100px;"></textarea>
<br>
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</form>
</div>
<div style="border: 1px solid red;width: 700px;height: 300px;margin: 10px auto;background-color: antiquewhite;">
用户协议：<a href="./协议.html" target="_self">用户协议</a><br>
<input type="radio" name="gender" value="yes" checked="true"/>同意
<input type="radio" name="gender"/ value="no">不同意
</div>
</body>
</html>
效果如图：
特殊字符
对于HTML代码来说，某些符号是有特殊含义的，如果想显示这些符号，则需要转义。
当想要使用这些字符，使用相应的实体名称或者实体编号进行写入即可。
例：
<h1>一级标题</h1>
效果如图：文章来源：https://www.toymoban.com/news/detail-785196.html
文章来源地址https://www.toymoban.com/news/detail-785196.html
到了这里，关于JavaWeb，HTML的学习的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript](https://imgs.yssmx.com/Uploads/2024/02/652989-1.png)
