Date:20231212
主要功能
主要web服务器产品
.html或htm为后缀的文件.html或htm为后缀<标记>内容</标记><标记/><标记><body></body>包围的元素就叫做body元素元素之间可以相互嵌套，形成更为复杂的语法
在嵌套元素时需要注意标记的嵌套顺序
案例
<body>
<p>段落1</p>
</body>
<p align="center">段落一</p>
<!-- 注释的文本内容 -->
<!--和-->之间的任何内容都不会显示在浏览器中<!-- 网页的头部，页面的全局信息 -->
<!DOCTYPE html>
<html>
<head>
<!-- 页面的标题 -->
<title></title>
<!-- 页面的元数据(形容页面的东西) -->
<meta charset="utf-8">
<!-- 跟搜索排名有关 -->
<meta name="" content="">
<!-- 引入js文件 -->
<script></script>
<!-- 元素内部样式 -->
<style></style>
<!-- 引入css文件 -->
<link/>
</head>
<!-- 网页的主体，页面展示的内容 -->
<body>
</body>
</html>
<xxx><head> 元素用于为页面定义全局信息
<html>之后<title>、<meta>、<script>、<style>、<link><title> 用于为文档定义标题
<head>元素中<meta> 用于定义网页的基本信息
<body> 主体内容<body>元素出现在<head>元素之后，包含网页要显示给读者的内容，称为主题内容
可以包含除了html、head外的所有元素
body的专有属性: bgcolor text
案例
<!-- 背景颜色 --> <!--字体颜色 -->
<body bgcolor="#000000" text="yellow">
我的第一个网页
</body>
<hn><h#>..</h#>
<p><br><hr>hr元素用于在页面上创建一条水平线
常用属性
案例
<hr color="red" width="50%" size="10px" align="right"></hr>
<pre> 代表一个空格© 版权?® 注册商标 ?&It; 小于 ＜> 大于 >¥ ￥× ×<b>..</b>,<strong>..</strong><i>..</i>,<em>..</em><u>..</u><s>..</s>,<del>..</del><sup>..</sup><sub>..</sub>分区元素用于为元素分组,常用于页面布局
块分区元素: <div></div>
行内分区元素: <span></span>
案例
<span style="color:red">hello!</span>world
p,div,hnspan,b,i,usrc="d:/0.9.png" 项目中禁止用根目录方式获取图片资源,因为d盘是服务器的d盘,浏览器访问不到d盘<img> 图片标签<img>或者<img/><a> 超链接标签属性
href 没有href就是一个文本
target指定打开连接的方式
取值：默认缺省_self 在本页面打开
_blank 在新页面打开
作用
跳转网页或网站 <a href="http://www.baidu.com">baidu</a>
跳转锚点
h4方式 <a name=“锚点名称”></a>
h5 方式 任意标签<any id=“锚点名称”></any>
<a href="#锚点名称">火影忍者</a><a href="**.htm#锚点名称">火影忍者</a>下载 <a href="" download="01.png">下载</a>
返回顶部 <a href=”#”>返回顶部</a>
调用js脚本
<a href="javascript:alert('hello world')"></a>
<script>
function fn(){
alert('hello world')
}
</script>
<a href="javascript:fn()">调用js脚本</a>
<table>表格标签table>tr*4>td*4跨列
colspan 从指定的单元格位置位置处开始,横向向右合并n个单元格(n包含自己),然后把被合并的单元格删除掉.
跨行
rowspan 从指定的单元格位置处开始,纵向向下合并n个单元格(n包含自己),然后把被合并的单元格删除掉
caption表格的标题 <caption>我是标题</caption>
必须紧紧跟着table的开始标签
案例
<table width="200px" height="200px" border="2px">
<!-- 唯一的,可不写 -->
<caption>我是标题</caption>
<tr>
....
</tr>
....
</table>
表头<th>..</th>
行分组
<thead></thead><tbody></tbody><tfoot></tfoot>表格的嵌套
<ul> <li> <dl> <ol> 列表标签列表的作用
列表类型
<ol>...</ol><ul>...</ul><li>..</li>列表的属性
有序列表的属性
start=“4” 指定编号的起始位置
type=“I” 指定编号的类型
默认 1 数字
A/a 英文字母
i/I 罗马数字
无语列表的属性
type=“none”
默认值 disc
circle 空心圆
square 实心方块
none 没有标识
列表的嵌套
h5–定义列表
<dl>
<dt>JavaScript</dt>
<dd>它是一种解释性语言</dd>
</dl>
<input> 表单标签注意 :表单没有接受响应的能力,所以可以使用js的dom操作收集页面的信息,再使用ajax发送请求和接受响应,但是ajax不能自动的收集整理数据。而且使用ajax就无法使用form表单自动收集提交数据的功能。
<form></form><form></form> 在页面上不可见，可以自动收集整理数据提交到服务器action=“” 定义表单提交时发送的动作（接口url）
method=“” 定义表达提交的方式
enctype=“”指定表单数据的编码方式，设置允许将什么样的数据提交给服务器
取值：1. application/x-www-form-urlencoded默认值,允许将任何字符提交给服务器(文件除外)
2. text/plain 允许提交普通字符（不包括特殊字符）
3. mulitipart/form-data传递文件
<input type=""> 所有input元素都是行内块文本框 <input type="text">
属性
maxlength允许输入的最大字符数
readonly 无值属性 只能读不能改 但是可以提交
placeholder 占位提示符，显示在控件上的提示内容
密码框 <input type="password">
属性
maxlength允许输入的最大字符数
readonly 无值属性 只能读不能改 但是可以提交
placeholder 占位提示符，显示在控件上的提示内容
按钮,所有的按钮的value都是设置按钮上显示的文本，不是提交的值。
type=“submit”将表单中的数据，收集并整理，发送给服务器type=“reset”将当前的表单的内容恢复到初始化状态type=‘button’没有功能，配合oncilck事件，调用js脚本。单选按钮 <input type="radio">
属性
案列
<input type="radio" name="gender" value="man" checked> 男
<input type="radio" name="gender" value="man"> 女
<input type="radio" name="gender" value="man"> 无法确定
<!-- 没有name,一不能提交,二不能分组-->
<!--value是提交的值,不加,提交的值会显示on -->
多选按钮 <input type="checkbox">
属性
案例
<form action="" method="get">
<button>提交</button>
<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="drink">喝
<input type="checkbox" name="hobby" value="play">玩
<input type="checkbox" name="hobby" value="happy">乐
</form>
<!-- 没有name,一不能提交,二不能分组-->
<!--value是提交的值,不加,提交的值会显示on -->
<!--form表单自动提交,get请求,参数自动拼接在地址栏-->
<!-- http://xxxx/02.html?hobby=eat&hobby=drink&... -->
隐藏文本域 <input type="hidden">
文本选择块<input type="file">
多行文本域 `
下拉选择框 <select name=""><option>...</option>...</select>
表单控件其他元素
<label>标签
<input id="auto" type="checkbox">
<label for="auto">请点我</label>
为控件分组 <fieldset>
<fieldset> <!-- 为控件分组-->
<legend></legend> <!-- 分组标题-->
</fieldset>
<fieldset>
<legend>用户的基本信息</legend>
用户姓名: <input type="text" name="uname"><br>
用户密码: <input type="password" name="upwd"><br>
<input id="man" type="checkbox" naem="gender" value="man">
<label for="man">男</label>
<input id="woman" type="checkbox" naem="gender" value="woman">
<label for="woman">女</label>
</fieldset>
<iframe> 框架标签<iframe></iframe>