一、什么是HTML
<!-- 声明html语言版本是html5,告诉浏览器 -->
<!-- html是网页文件的根,所有内容都必须写在html中 -->
<!DOCTYPE html>
<html>
<head>
<!-- 头标签
title定义网页的标签-->
<meta charset="utf-8">
<!-- 编辑网页的编码是utf-8 -->
<title>我的第一个网页</title>
<link href="img/baidu.ico" rel="icon" />
</head>
<body text="red" bgcolor="aqua">
<!-- bgcolor背景颜色 -->
<b>呼呼</b>嘿嘿
<!--
标签属性:通过标签的属性可以进一步对标签的显示进行修改
语法:
属性名="属性值"
一个标签可以拥有多个属性
属性应该写在开始标签中
-->
</body>
</html>
二、表格table
1.表格框架
<table border="1"width="300"height="500" bgcolor="aqua"
cellpadding="10" cellspacing="0" align="center">
<!-- cellpadding="10" 内容到边框的距离
cellspacing="0" 单元格与单元格直接的距离
align="center"整个表格居中-->
<!-- 表头<caption>学生信息表</caption> -->
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>性别</th>
</tr>
<tr align="center" valign="center">
<td>张三</td>
<!--<tr align="center">这一行左右居中 -->
<!-- <tr valign="bottom">这一行上下居下 -->
<td>18</td>
<td>1班</td>
<td>男</td>
</tr>
</table>
2.合并表格
<table border="1" width="300" height="500"
bgcolor="aqua" align="center" cellspacing="0">
<caption>学生信息表</caption>
<tr>
<th colspan="4"></th>
<!-- <th colspan="4"></th>一行合并 -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
<!-- <td rowspan="3"></td>一列合并 -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
三、表单
<body>
<!--
表单:就是从客户端可以向服务器发送数据的
表单中有许多可以输入或选择的组件
用户就可以在表单中输入信息,从而向服务器发送
form标签表示一个表单,不显示
action="向服务器端发送的地址"
method="向服务器发送数据的方式" get/post
表单组件
input
type="text"单行文本输入框
id:值要求唯一 自定义值
name:属性名可以重复 自定义值 向服务器端发送数据的健
value:提交的值
class:属性名可以重复 自定义值
size="20" 列数
placeholder="请输入账号" 提示信息.当输入内容后会自动消失
readonly="readonly" 只读
disabled="disabled" 禁用组件 一旦组件被禁用了值就不会用服务器端提交数据
<label for="zhanghao">账号</label> 关联
密码框<input type="password" />
附件<input type="file" name="file" 文件选择
accept=".png,.jpg"/> 过滤文件
性别<input type="radio" name="sex" id="nan"/><label for="nan">男</label> 单选框
<input type="radio" name="sex" id="nv"/><label for="nv">女</label> 可定义name,
name相同为一组,一组之内只能选一个
选择组件需要给默认值
表单提交时只能提交选择的那一个
课程<input type="checkbox" name="course" value="java"/>java 多选框
<input type="checkbox" name="course" value="c"/>c
<input type="checkbox" name="course" value="c++"/>c++
<input type="checkbox" name="course" value="html"/>html
<input type="checkbox" name="course" value="python"/>python
省份<select name="prounce"> select下拉框 name表单会提交选中的内容
<option value="100" selected="selected">北京</option> option下拉框的选项 北京只在页面显示
<option value="101">西安</option> selected默认选中 value向服务器端提交的值
<option value="102">陕西</option>
<option value="103">山西</option>
</select>
备注:<textarea cols="30" rows="5"> 多行文本域
轻拿轻放 cols:列 标签体就是value
</textarea> rows:行
按钮:<input type="reset" value="重填"/> 重置按钮,让表单还原到开始状态
<input type="submit" value="保存"/> 向服务器端提交表单 value为了触发action服务端
<input type="button" value="普通按钮" οnclick="alert"/> 普通按钮主要用来触发事件
-->
<form action="server.html" method="get">
<label for="zhanghao">账号</label>
<input type="text" id="zhanghao" name="zhanghao1" size="20" placeholder="请输入账号"
readonly="readonly" disabled="disabled"/> <br />
密码框<input type="password" /> <br />
附件<input type="file" name="file" accept=".png,.jpg"/> <br />
性别<input type="radio" name="sex" id="nan" value="男" checked="checked"/> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" value="女" /> <label for="nv">女</label> <br />
课程<input type="checkbox" name="course" value="java" id="java"/> <label for="java">java</label>
<input type="checkbox" name="course" value="c" id="c"/> <label for="c">c</label>
<input type="checkbox" name="course" value="c++" id="c++"/> <label for="c++">c++</label>
<input type="checkbox" name="course" value="html" id="html"/> <label for="html">html</label>
<input type="checkbox" name="course" value="python" id="python"/> <label for="python">python</label>
<br />
省份<select name="prounce">
<option value="100" selected="selected">北京</option>
<option value="101">西安</option>
<option value="102">陕西</option>
<option value="103">山西</option>
</select> <br />
多行文本域<br />
备注:<textarea cols="30" rows="5">轻拿轻放</textarea>
<br />
按钮:<input type="reset" value="重填"/>
<input type="submit" value="保存"/>
<input type="button" value="普通按钮" onclick="alert()"/>
</form>
</body>
四、常用标签
<body>
<!-- 标题标签 <h1> </h1>...<h6></h6> -->
<h1 align="center">一级标题</h1>
<!-- align="right" 控制内容水平对齐方式 left(默认) -->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标题 <p></p> -->
<p style="text-indent: 2em;"><!-- 俩个缩进 -->
</p>
<p align="right"><!-- 右对齐 -->
</p>
<!-- 换行标题 <br/> -->
hello<br/>world
<!-- 列表 无序列表 有序列表 -->
<!-- 无序 -->
<ul type="circle">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<!-- 有序 -->
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
</body>
五、插入图片
<body>
<a href="http://www.hao123.com" target="_blank">
<!-- img -->
<img src="img/hao123.png" border="1" width="200" height="100" title="hao123 点击跳转" alt="这是一张图片">
<!-- 向网页中插入图片
注:只是引入项目中的图片地址,并不是将图片存储到html文件中
src="图片地址"
border 边框
width 宽
hight 高
title 鼠标移动到标签上 提示信息
alt="图片不能正常显示时提示信息"
-->
</a>
</body>
六、超链接
<body>
<!-- href="连接属性" -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- target="_blank"在新窗口打开 -->
<a href="baidu.html" target="_self">山寨百度</a>
<!-- target="_self"在当前窗口打开新文档 -->
<a href="#返回首栏">返回顶部</a>
<!-- 超链接定义描点 -->
<a href="#top" style="position: fixed; right: 20px; bottom: 20px;">返回顶部</a>
<!-- 超链接固定定位 -->
</body>
七、特殊符号
<body>
<b> <br />
holle world <br />
©版权 <br />
®注册 <br />
<hr />
<!-- < <
> >
"空格"
© "版权"
® "注册"
-->
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
