文章目录
- HTML: Hyper Text Markup Language （超文本标记语言）(超文本: 流媒体、图片、声音、视频…);由大量的标签组成，每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
</标签>
- HTML的制定
- W3C：世界万维网联盟
- W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
- HTML规范目前最高的版本是：HTML5.0，简称H5.
- W3C制定了很多规范：
HTML/XML/http协议/https协议…
框架
<!--注释-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--标题显示网页左上角-->
<title>网页标题</title>
</head>
<!--体-->
<body>
网页主题
</body>
</html>
基本标签
-
段落标记 <p></p> -
标题字：是HTML预留的格式，和word中的标题字相同 -
换行标记，br标签是一个独目标记 -
横线，hr独目标记 -
标签的属性- 属性名=属性值 color=“red” width=“50%”
- color
- width
-
预留格式：维持原本格式<pre></pre> -
<del>删除字</del> -
<ins>插入字</ins> -
<b>粗体字</b> -
<i>斜体字</i> -
10<sup>2</sup> -
10<sub>m</sub> -
字体标签font<font color="red" size="50">字体标签</font> -
实体符号想输出：b<a>c，直接输出b<a>c，a不显示-
实体符号特点是：以&开始，以;结束。< 是小于号 > 是大于号b<a>c -
空格： a bc
-
<!--注释-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<title>HTML基本标签</title>
</head>
<!--体-->
<body>
<!--段落标记 <p></p>-->
<p>我呀</p><p>坚信每一个人看到的世界都不该是眼前的世界</p><p>眼前的世界无非是些吃喝拉撒睡，难道这就够了吗？</p><p>
还有</p><p>我看见有人在制造一些污辱人们智慧的粗糙的东西就愤怒</p><p>看见人们在鼓吹动物性的狂欢就要发狂。</p><p>
我总以为</p><p>有过雨果的博爱</p><p>萧伯纳的智慧</p><p>罗曼罗兰又把什么是美说得那么清楚</p><p>人无论如何也不该再是愚昧的了</p><p>
肉麻的东西无论如何也不应该被赞美了</p><p>人们没有一点深沉的智慧无论如何也不成了</p><p>
<!--标题字：是HTML预留的格式，和word中的标题字相同-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
<!--换行标记，br标签是一个独目标记-->
hello
world!
hello <br>world!
<!--横线，独目标记-->
<hr>
<!--color和width都是hr标签的属性-->
<!--属性名=属性值-->
<hr color="red" width="50%">
<!--语法太松散了 双引号单引号-->
<hr color='green' width=30%>
<!--预留格式：维持原本格式-->
<pre>
for(int i = 0; i < 10; i++){
System.out.println("i = " + i);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup>
10<sub>m</sub>
<!--字体标签-->
<font color="red" size="50">字体标签</font>
<!--实体符号-->
<!--想输出：b<a>c，直接输出b<a>c，a不显示-->
<!-- 实体符号特点是：以&开始，以;结束。< 是小于号 > 是大于号 -->
b<a>c
<!--空格： -->
a bc
</body>
</html>
表格
- table 一张表
tr 表中的一行
td 一行中的一个单元格 - 表格合并
rowspan="2"row合并的时候，删除“下面的”单元格colspan="2"col合并的时候，对删除哪个没有要求
- border=“1px” 设置表格的边框为1像素宽度。
width 宽度
height 高度
align对齐方式 可以出现在table tr td当中 - th 标签也是单元格标签，比td多的是居中、加粗。
- 表格的头、体、脚：thead tbody tfoot 。它们在table中不是必须的，只是这样做便于后期的JS代码的编写。
<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<!----> <!--换行-->
<br><br><br><br><br><br><br><br>
<!--center 居中-->
<center><h1>员工信息列表</h1></center>
<!--横线-->
<hr>
<!--
border="1px" 设置表格的边框为1像素宽度。
width 宽度
height 高度
align对齐方式 可以出现在table tr td当中
-->
<!--table 一张表
tr 表中的一行
td 一行中的一个单元格
-->
<table align="center" border="1px" width="60%" height="150px">
<!--align对齐方式-->
<tr >
<!-- th 标签也是单元格标签，比td多的是居中、加粗。-->
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr align="center">
<td align="center">a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<!--注意事项：
1、row合并的时候，删除“下面的”单元格 f z
2、col合并的时候，对删除哪个没有要求。x y
-->
<td rowspan="2">fz</td>
</tr>
<tr>
<!--<td>x</td>-->
<td colspan="2">y</td>
<!--
<td>z</td>
-->
</tr>
</table>
</body>
</html>
背景颜色、图片
bgcolor : 设置背景色background : 设置背景图片
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">告诉程序员程序应该在哪种字符集编码的环境下下运行
并不是设置当前页面字符的编码方式-->
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--
bgcolor : 设置背景色
background : 设置背景图片
以上的设置都是对背景进行设置。
-->
<body bgcolor="red" background="img/bd_logo1.png">
</body>
</html>
图片
-
img标签就是图片标签，src属性是图片的路径<img src="img/bd_logo1.png" /> -
width设置宽度,height设置高度——设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放 -
title设置鼠标悬停时显示的信息 -
alt设置图片加载失败时显示的提示信息。<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/>
超链接
- 通过超链接可以从浏览器向服务器发送请求。B/S结构的系统：每一个请求都会对应一个响应，用户点击超链接和用户在浏览器地址栏上直接输入URL，本质上没有区别，都是向服务器发送请求。从操作上来讲，超链接使用更方便。
- 超链接的特点：
- 有下划线
- 鼠标停留在超链接上面显示小手形状。
- 点击超链接之后还能跳转页面。
<a> 标签定义超链接，用于从一张页面链接到另一张页面。<a> 元素最重要的属性是 href 属性，它指示链接的目标。-
href：hot references 热引用 -
href属性后面一定是一个资源的地址。
-
href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。
<a href="007-背景颜色和背景图片.html">007</a> <!--图片超链接--> <a href="https://www.hao123.com/"> <img src="img/hao123.png" width="120px"/> </a>
-
- 超链接有一个target属性：
- 可取值：
_blank : 新窗口
_self ： 当前窗口（默认就是这种方式。）
_top ： 顶级窗口
_parent ： 父窗口
- 可取值：
HTML协议
列表
- 列表分有序列表、无序列表
- 无序列表始于
<ul>标签。每个列表项始于<li>。
- 无序列表始于
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
- 有序order列表始于
<ol>标签。每个列表项始于<li>标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- 定义列表
- 自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始
- 自定义列表以
input元素
- 元素有很多形态，根据不同的 type 属性。
- text 定义常规文本输入;
maxlength 设置文本框中可输入的字符数量。 - radio 定义单选按钮输入（选择多个选择之一）
- submit 定义提交按钮（提交表单）
- password ，password 字段中的字符会被做掩码处理（显示为星号或实心圆）
- checkbox 复选框允许用户在有限数量的选项中选择零个或多个选项。
- text 定义常规文本输入;
- 提交的时候，就是提交
<input type="？？" name="？？" vlaue=“？？”>input语句中的name和value值，例如：name=username&value=李明。这样的信息会通过action属性提交到指定的服务器。- 如果该input元素没有name属性，是不会被提交的，如果想要提交该表单项，就写name属性。
- 如果该input元素是需要用户输入，那么就不需要设置value属性，默认为空，等待用户输入。
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<input type="text" maxlength="3" />
</form>
--------------------------------------------------
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
--------------------------------------------------
<input type="submit" value="Submit">
★表单★
- 作用
- 收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
使用form标签画表单。- 一个网页当中可以有多个表单form。
<form>
.
form elements
.
</form>
Action 属性
- 表单最终是需要提交数据给服务器的，
form标签有一个action属性，这个属性用来指定服务器地址，action属性和超链接中的href属性一样。都可以向服务器发送请求（request）。即action指明了表单的信息交给谁
<form action="http://192.168.111.3:8080/oa/save">
http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给：
192.168.111.3机器上的8080端口对应的软件。
Method 属性
- method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
- method属性不指定，或者指定get，这种情况下都是get。
只有当method属性指定为post的时候才是post请求，剩下所有的请求都是get请求。
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
<form action="action_page.php" method="GET">
- 用户注册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册表单</title>
<head>
<!--
用户名
密码
确认密码
性别
兴趣爱好
学历
简介
-->
<form action="http://localhost:8080/servlet/register" method="post">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密 码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" ></td>
</tr>
<tr>
<td>性 别：</td>
<!--单选框，name值一样，表示为一组单选框，只能单选4
单选框的vlaue想要指定，已明确用户根据页面参考的信息选中了哪个
checked 是默认选择
-->
<td><input type="radio" name="sex" value="male" checked>male
<input type="radio" name="sex" value="female" >female
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td><input type="checkbox" name="hobby" value="看书">看书
<input type="checkbox" name="hobby" value="唱歌">唱歌
<input type="checkbox" name="hobby" value="游泳">游泳
</td>
</tr>
<tr>
<td>学 历：</td>
<td>
<select name="grade">
<option value="0">高中</option>
<option value="1">大专</option>
<option value="2" selected>本科</option>
<option value="3">硕士</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="注册"></td>
<td><input type="reset" value="清空"></td>
</tr>
</table>
</form>
<body>
</body>
</html>
文件上传
<!--file控件：文件上传专用。-->
<input type="file" />
隐藏域hidden
<input type="hidden" name="userid" value="111" />
readonly disabled
- readonly和disabled相同点：都是只读不能修改。
readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交。）
<form action="http://localhost:8080/taobao/save">
用户代码<input type="text" name="usercode" value="110" readonly />
<br>
用户姓名<input type="text" name="username" value="zhangsan" disabled />
<br>
<input type="submit" value="提交数据" />
</form>
元素的id属性
-
在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
-
注意：表单提交数据的时候，只和name有关系，和id无关。
-
id用处
- javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
- javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
- id的存在让我们获取元素（节点）更方便。
-
HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript主要就是对这棵DOM(Document)树上的节点进行增删改的。
div span
- div和span都可以称为“图层” ——图层的作用是为了保证页面可以灵活的布局。和PS的图层差不多
- div嵌套div就是图层嵌套图层
- div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
div和span的区别- div独自占用一行（默认情况下）
- span不会独自占用一行。
<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>
<span id="span1">我是一个SPAN标签</span>
<span id="span2">我是一个SPAN标签</span>
<div id="div3">
<div>
<div>test</div>
</div>
</div>
3292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
