html基本结构标签
<!DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面
<html lang=""> zh-CN中文 en英文
<meta charset="">UTF-8万国码
html常用标签
-
标题标签
<h1></h1>-<h6></h6>文字加粗，单独一行显示 -
段落标签
<p></p>文字段落 -
换行标签
<br/>单标签，放在一行文字末尾 -
文本格式化标签
<strong></strong>或<b></b>加粗
<em></em>倾斜
<i></i>倾斜
<del></del>或<s></s>删除线
<ins></ins>或<u></u>下划线 -
<div>和<span>标签
没有语义，是一个盒子，用来装内容
div每个独占一行（大盒子）
span排列成一行（小盒子） -
图像标签及路径
<img src="图像URL" />单标签
src表示路径，必须要写
alt=“某文字” 图片显示不出来时用文字替换
title=“提示文本” 鼠标悬浮时显示
width="" 图像宽度
height="" 图像高度
若只设置一个，图像将等比缩放或扩大
border="" 图像边框 -
相对路径和绝对路径
相对路径：相对于html页面的位置
同一级路径<img src="baidu.gif" />
下一级路径<img src="imges/baidu.gif" />
上一级路径<img src="../baidu.gif" />
绝对路径：
计算机中的位置<img src="D:\web\img\logo.gif" />
网页上的位置<img src="www.ccc.cn/images/logo.png" /> -
超链接
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>href属性为超链接地址；target属性为页面打开方式，_self为当前窗口打开页面，_blank为在新窗口中打开外部链接：如
<a href="http://www.baidu.com">百度</a>内部链接：网站内部网页相互链接，只写<a href="index.html">首页</a>
空链接：<a href="#">空链接</a>
下载链接：<a href="img.zip">下载文件</a>
网页元素的链接：直接如上添加
锚点链接：内容定位，类似于目录索引，如<a href="#two">第二集</a>
找到内容的位置，添加id属性<h3 id="two">第二季介绍</h3> -
注释
<!--注释语句 -->ctrl+/ -
表格标签
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
tr表示行
td表示表格中的单元格，定义在tr中
th为表头单元格标签，加粗、居中显示（把每个td换成th，不是换tr）
表格属性
要写在
表格结构
<thead>标签表示表格头部区域，是表格的第一行的区域，
<th>是表头单元格
<tbody>标签表示表格的主体区域
合并单元格
跨行合并：rowspan=“合并单元格的个数”，把合并代码写到最上侧的单元格中
跨列合并：colspan=“合并单元格的个数”，把合并代码写到最左侧的单元格中
记得最后删除多余单元格！！
- 列表标签
-
无序列表
各列表项无顺序之分，是并列的<li>与</li>之间相当于一个容器，可以容纳所有元素
<h4>您最喜欢的食物</h4>
<ul>
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
</ul>
-
有序列表
<li>与</li>之间相当于一个容器，可以容纳所有元素
<h4>粉丝排行榜</h4>
<ol>
<li>刘德华 10000</li>
<li>刘若英 1000</li>
</ol>
- 自定义列表
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
<dl></dl>里面只能包含<dt></dt>和<dd></dd>
<dt>和<dd>的个数没有限制
- 表单标签
表单为了收集用户信息，与用户交互
一个完整的表单通常包括表单域、表单元素（表单控件）和提示信息
表单域
<form>标签表示表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单元素控件
</form>
其中提交方式有get和post
表单元素
<input>表单元素
<input type="属性值"/>
<input />标签为单标签
type属性设置不同属性值来指定不同的元素类型
其他属性
name和value是每个元素都有的属性值，主要给后台人员使用
name表单元素的名字，要求单选按钮有相同的name值
checked属性主要针对单选按钮和复选框，主要作用是一打开页面就默认选中某个元素
<form action="demo.php" method="post" name="name1">
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"><br>
<!-- 密码框，用户看不见输入的密码-->
密码：<input type="password" /><br>
<!-- 性别单选按钮必须要有相同的名字，才能实现多选一-->
<!--单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮-->
性别：男<input type="radio" name="sex">女<input type="radio" name="sex" checked="checked"/><br>
爱好：<input type="checkbox"/> 吃饭<input type="checkbox"> 睡觉<input type="checkbox" checked="checked"/> 打豆豆<br>
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码"><br>
<!-- 文件域 使用场景 上传文件使用的-->
上传头像：<input type="file">
</form>
-
<label>标签<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点转到对应表单元素上，增加用户体验
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
for和id建立联系
<select>标签
下拉列表
籍贯：
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
</select>
<select>中至少包含一对<option>
在<option>中定义secectd="selected"时，当前项为默认选中项
<textarea>标签
今日反馈：
<textarea cols="50" rows="5">
文本内容
</textarea>
cols表示每行的最大字符数，rows表示行数，超过这个行数则出现滚动条
其他标签可参考W3Cschool.chm
特殊字符
综合案例
注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>综合案例-注册页面</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="600" >
<!-- 第一行 -->
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日:</td>
<td>
<select>
<option>--请选择年份--</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况:</td>
<td>
<input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry"> 已婚 <input type="radio" name="marry"> 离婚
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历:</td>
<td><input type="text" value="博士后"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型:</td>
<td>
<input type="checkbox" name="love" > 妩媚的
<input type="checkbox" name="love" > 可爱的
<input type="checkbox" name="love" > 小鲜肉
<input type="checkbox" name="love" > 老腊肉
<input type="checkbox" name="love" checked="checked"> 都喜欢
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>个人介绍</td>
<td>
<textarea>个人简介</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册" >
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#" > 我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
5640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
