目录
1.html概述
html是前端中的第一个语言
html ：超文本标记语言，超文本 http 超文本传输协议（网页代码）
标记 -->标签 标记网页内容 <a href>百度 <>
最终由浏览器进行解释、运行
用HTML语言把我们需要显示的内容显示在浏览器上，但是HTML语言本身并不显示
2.html基本语法
文档声明
<!--
<标签名--开始标签>
标签体
</标签名-- 结束标签>
-->
<!-- <!DOCTYPE html> html版本声明，告知浏览器html的版本 -->
<!DOCTYPE html>
<!-- <html> 是html中最大的标签，所有内容都写在此标签中 -->
<html>
<!-- <head>头 标签， 设置网页基本信息 -->
<head>
<!-- 设置字符集 -->
<meta charset="utf-8" />
<title>开门，我是网页</title> <!-- 设置标题 -->
<link rel="icon" href="img/baidu.ico"/> <!-- 为标题处添加图标 -->
</head>
<body>
<!-- 网页内容都写在此-->
</body>
</html>标题标签 h
<!--
标题标签 占一行
有的标签不会占一行，只占内容大小
-->
<h1 align="center"> 1级标题</h1>
<h2> 2级标题</h2>
<h3> 3级标题</h3>
<h4> 4级标题</h4>
<h5> 5级标题</h5>
<h6> 6级标题</h6>段落标签 p
<!--
段落标签
-->
<p>
第一段
</p>
<p>
第二段
</p>
<p>
第三段
</p>列表标签 ul
<!--
无序列表 无序号 可改属性，改变序号显示
ul
li
有序列表
ol
li
-->
<ul>
<li> 列1 </li>
<li> 列2 </li>
<li> 列3</li>
<li> 列4 </li>
<li> 列5 </li>
</ul>
<ol>
<li> 列1 </li>
<li> 列2 </li>
<li> 列3</li>
<li> 列4 </li>
<li> 列5 </li>
</ol>超链接标签 a
<!-- 超链接
href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)
target="_blank" 新窗口打开
target= 打开目标文件位置
-->
<a href="index.html" target="_blank">百度 </a>图片标签 img
<!--
图片标签
width="200" height="200" 长宽
border="1" 边框
-->
<img src="img/baidu.ico"/ width="200" height="200" border="1">
<a href="index.html" target="_blank">
百度
<img src="img/baidu.ico"/ width="200" height="200" border="1">
</a>3.表格
<!--
table
tr
th head
td data
th和td 是单元格用来放数据
< border="1"> 表格边框
< bgcolor="antiquewhite"> 背景颜色
font color= “blue”字体设置颜色
width height 宽高
cellpadding="5" 内容与边框距离
cellspacing="0" 单元格与单元格之间间距
<span style="text-decoration: line-through">$19.80</span> 为文字中间添加划线
-->
<table border="1" bgcolor="antiquewhite" cellpadding="0" cellspacing="0">
<tr>
<th width="100">姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr align="center">
<td>张三</td>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr valign="top">
<td>李四</td>
<td>11</td>
<td>44</td>
<td>55</td>
</tr>
<tr>
<td>王五</td>
<td>55</td>
<td>33</td>
<td>75</td>
</tr>
</table>快捷方式
table>tr4>td4
合并单元格
colspan 合并行
rowspan 合并列
合并时 注意将多余的行列删除
<!--
将第一行合并
-->
<table border="1">
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>4.表单
表单中有许多可以输入、选择的组件，用户可以在组件中输入信息，最终将数据提交至服务器端的程序。（前后端数据交互）；
form 表示一个表单，一个表单可有多个组件 ，action= 后端程序的地址（例如Java程序的地址--javaEE）， method="get/post" 提交请求的方式（网络中的请求）。
表单标签不会在网页中有任何展示，只是表示一个区域。
文本输入框
<input type="text" name="username" value=""> 输入标签
type="text"单行文本输入框
type="password" 密码框
name="username" 向后端提交数据的键-- （后端通过键来接收值）
value="" 向后端提交数据的值-- (默认为空，可不写)
readonly="readonly" 只读（不能写，还可提交数据）
disabled="disabled" 禁用组件（不能提交数据）
placeholder="请输入" 默认提示
单选框
<input type="radio" name="gender">
type="radio"，单选框，靠name来进行区分，两个名字相同，认为是同一组的，进行互斥只能选中一个， 选择性组件要给默认的值，否则无值提交。
checked="checked" 默认选中
性别<input type="radio" name="gender" value="男" checked="checked"/>男 <input type="radio" name="gender" value="女"/>女
多选框
<input type="checkbox" name="hobby" value="爱好1"/>
type="checkbox" 多选框 name="hobby" value="爱好1"
此时的name为编组， 选择性组件要给默认的值，否则无值提交。。
checked="checked" 默认选中
文件选择框
<input type="file" name="文件"/>
type="file" 上传文件
下拉选择框
//省份<select> <option >北京</option>
<option >上海</option>
<option >陕西</option>
</select>
name 写在select中，option中添加value，提交过去的就是value的值，value写成编号。 用户看的是名字，提交后端的为编号。
多行文本输入框
<textarea cols="30" rows="5"></textarea>
cols="30" 30 列
rows="5" 5行
按钮
<input type="submit" value="保存"/> 提交按钮，触发表单提交动作
value="保存 默认显示为提交，改为保存。点击后触发表单的action。
<input type="reset" /> 重置到表单到初始状态。
<input type="button" value="按钮111">普通按钮，用来触发事件 。
<input type="button" value="按钮-" οnclick="alert"/>
οnclick="alert（）" 点击按钮会触发这个函数
表单测试
<body>
<form action="" method="get">
用户名 <input type="text" name="username" value="" placeholder="请输入"/>
<br/>密码<input type="password" name="password" />
<br/> 性别<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
<!-- type="radio" 单选框
两个名字相同，认为是同一组的，进行互斥
选择性组件要给默认的值，否则无值提交
checked="checked" 默认选中
-->
<br />
爱好<input type="checkbox" name="hobby" value="爱好1"/>发分
<input type="checkbox" name="hobby" value="爱好2"/>发发的
<input type="checkbox" name="hobby" value="爱好3"/>多个
<input type="checkbox" name="hobby" value="爱好4"/>给
<!-- 此时name为编组 -->
<br/> 上传头像<input type="file" name="文件"/>
<br />
省份<select name="provin">
<option value="110">北京</option>
<option value="111">陕西</option>
<option value="112">上海</option>
<option value="113">天津</option>
</select>
<!-- 下拉框，默认只选一个，加入value，提交的为value的值 -->
<br />
地址<textarea cols="30" rows="5"></textarea>
<!-- 多行文本，cols="30" rows="5"> 30列 5行 -->
<br />
<input type="submit" value="保存"/>
<!-- 提交按钮，触发表单提交动作action ，-->
<input type="reset" />
<!-- 重置到表单默认位置 -->
<input type="button" value="按钮-" onclick="alert"/>
<!-- 用来触发事件 -->
</form>
</body>
2191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
