软通极客营01
伍传琴 13851613814 913295104@qq.com
输出格式中文编译常用 GBK（中文以及常用英文） UTF-8（世界所有文字）
一、基本语法
<html>
<head>
<meta charset="utf-8">
<title>The First</title>
<!-- title自带换行 -->
</head>
<body>
<!-- 这是注释 -->
<h1>HELLO</h1>
<h2>HELLO</h2>
<h6>HELLO</h6>
<!-- 1为最小 6为最大 -->
<font size="6">6号字体</font>
<!-- 字号与h字号相反，1最大 -->
<hr width="200">
<!-- 水平分割线 -->
<a href="">假链接</a>
<br><a href="#">Top</a>
<!-- 点击跳至页面顶端 -->
<a href="#maodian">点击前往</a>
<!-- 设点本页超链接锚点，点击即跳转 -->
<p id="maodian">It's me</p>
<!-- 跳转至此处 -->
<p>
我的博客<br>
<a href="http://xyyhub.github.io/" target="_black">点击跳转</a><br>
</p>
<!--
href：你要跳转的地址
target: 控制新的页面打开模式
_blank新打开一个页面显示
_self覆盖原网页打开 【默认值】
-->
<img src="img/avatar.jpg" width="200" height="200" alt="图片不存在" title="我的头像">
<!-- 插入图片，alt设定图片错误时显示的文字，title设定鼠标悬停显示的文字 -->
<h4>无序列表</h4>
<ul type="dise">
<!-- 默认即为dise实心圆点，还有circle空心圆，square实心方 -->
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!--
快捷键：
ul>li*n 一个ul下面有n个li
ctrl+d 复制当前行
-->
<h4>有序列表</h4>
<ol type="dise">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<!-- 图片加列表实例 -->
<img src="img/tall.png" alt="图片不存在" title="上海" width="400" height="300" align="left" hspace="90">
<!-- align设置对齐方式，hspace设置间隔 -->
<h3>
<font color="red">陆家嘴</font>
</h3>
<ul type="disc">
<li>上海大厦</li>
<li>国贸大厦</li>
<li>金融中心</li>
</ul>
</body>
</html>
表格 Table
<html>
<head>
<title>Table</title>
<meta charset="utf-8">
</head>
<body height="7800">
<table border="1" align="center" bgcolor="pink"><!-- 建立表格 -->
<tr> <!-- tr建立行 -->
<td> <!-- td建立列 -->
html
</td>
</tr>
</table>
<table border="1" align="center">
<!-- 设定表标题 -->
<caption>Table Title</caption>
<!-- 设定表头 -->
<thead bgcolor="pink">
<tr>
<td>List Name 1</td>
<td>List Name 2</td>
<td>List Name 3</td>
</tr>
</thead>
<!-- 建立表身体 -->
<tbody>
<tr>
<td rowspan="2" bgcolor="pink">1</td><!-- rowspan合并行 -->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2" bgcolor="pink">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" bgcolor="pink">3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
<!-- 设定表尾 -->
<tfoot>
<tr align="center" bgcolor="pink">
<td colspan="3">Table Foot 1 & 2 & 3 .</td><!-- colspan合并列 -->
</tr>
</tfoot>
</table>
<!--
border:表格中的边框 默认情况下0 取值代表边框的粗细
cellspacing:单元格与单元格之间的间距 默认为2个像素的
cellspadding:单元格与内容之间的距离 默认1个像素
width: 表格的宽度 默认情况下为内容的宽度
height:表格的高度 默认情况下为内容的高度
align: 水平对齐的方式： left center right 默认left
在table中设置 表格在浏览器中为 居左 居中 居右
在tr中设置 当前行的内容在表格中 居左 居中 居右
在td中设置 当前列【当前单元格】的内容在表格中 居左 居中 居右
valign 垂直对齐方式 ： top middle bottom
在table中设置 无效
在tr中设置 当前行的内容在表格中 居上 居中 居下
在td中设置 当前列【当前单元格】的内容在表格中 居上 居中 居下
<tr valign="bottom" height="100">
<td valign="bottom" height="100">用户名</td>
<td>密码</td>
<td>手机号</td>
</tr>
-->
</body>
</html>
表单 Form
<html>
<head>
<title>
用户登录界面
</title>
<meta charset="utf-8">
</head>
<body>
<form action="text01.html" method="post" align="center">
<p>账号：<input name="username" maxlength="10" placeholder="请输入用户名" size="100"></p>
<p>密码：<input type="password" name="pwd" ></p>
<p>确认：<input type="password" name="rpwd"></p>
<p>性别：
男<input type="radio" name="sex" value="男" checked>
女<input type="radio" name="sex" value="女"></p>
<p>
爱好：
游泳<input type="checkbox" name="hobby" value="游泳">
健身<input type="checkbox" name="hobby" value="健身">
篮球<input type="checkbox" name="hobby" value="篮球">
足球<input type="checkbox" name="hobby" value="足球">
</p>
<p>
出生日期：
<select>
<option selected="selected">一月</option>
<option>二月</option>
<option>三月</option>
<option>四月</option>
<option>五月</option>
<option>六月</option>
<option>七月</option>
<option>八月</option>
<option>九月</option>
<option>十月</option>
<option>十一月</option>
<option>十二月</option>
</select>
</p>
<p>
文件上传：<input type="file">
</p>
<p>
<textarea cols="20" rows="10">hello word</textarea>
<p>
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<input type="hidden" name="id" value="100">
<!--
submit:会直接提交Form表单
reset:重置
button:不提交
hidden:隐藏域传递信息
-->
</p>
</form>
<!--
<form>内
action:提交路径
method:
form表单常用的两种提交方式
get:默认参数，提交的参数会在地址栏中显示不安全，
有字符限制，常用于查询
post:安全，提交的参数不会在地址栏中显示，
基本上无字符限制
文本框: <input type=”text”/>
name 控件的名称 (一组控件的名称)
value 控件的值
size 控件的长度
maxlength控件中文字的最大数量
readonly控件设置为只读的
密码框：<input type=”password”/>
单选按钮：<input type=”radio”/>
复选框：<input type=”checkbox”/>
Checked：默认选中
下拉列表框：<select><option></option></select>
Selected：默认选中
Multiple：全部显示
文件上传项：<input type=”file” name=”file”/>
文本域：<textarea name=”” cols=”” rows=””></textarea>
提交按钮：<input type=”submit” value=”注册”>
重置按钮：<input type=”reset” value=”重置”>
普通按钮：<input type=”button” value=”普通按钮”>
隐藏字段：<input type=”hidden” name=”id”/>
-->
</body>
</html>
框架 Frame
使用了frameset标签，不需要使用body. 属性： rows：横向切分页面 cols：纵向切分页面 frameborder :是否显示框架边框 0 、 1、 yes、 no 标签代表切分每个部分的页面 src：引入页面的路径 name 框架页面的名称 noresize :禁止调整大小 scrolling : 是否显示滚动条<html>
<head>
<title>Frameset</title>
<meta charset="utf-8">
</head>
<frameset rows="20%,*">
<frame src="shop.html"></frame>
<frameset cols="20%,*">
<frame src="left.html" ></frame>
<frame src="用户管理.html" name="rightFrame"></frame>
</frameset>
</frameset>
</html>
1202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
