html概述
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
html基本结构
安装插件Emment，并按!+Tab html:5+tab键
可以实现自动补全以下结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
具体内容参考：http://course.killf.info/content/00-08%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B%E8%BD%AF%E4%BB%B6%E5%92%8C%E8%B5%84%E6%96%99/WEB%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B%20HTML%20CSS%20%E7%BA%B2%E8%A6%81%20%E5%8F%82%E8%80%83/_book/index.html
html 标签
- 标签成对出现
- 常用标签：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 段落
<p>我在学习</p>
- 块容器：允许嵌套
<div>
<h3>自我介绍</h3>
<p>学习</p>
</div>
- 图片标签
<img src="images/pic.jpg" alt="图片" />
涉及到绝对引用和相对引用的问题:
绝对引用：就是把图片在磁盘中地址，直接复制过去，兼容性比较差，一般使用相对引用
相对引用：就是把html文件和图片文件夹放在一起，然后 ./ 表示当前文件夹，可以省略，…/ 表示上级文件夹，…/…/ 表示上上级文件夹。把图片和html放在一个文件夹即可
alt属性： 图片显示不出来的时候，显示的文字：
用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。
有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到：
- 超链接
<a href="http://www.baidu.com" title="去到百度" target="_blank"><img src="images/a2.jpg" alt="图片"></a>
<a href="http://www.baidu.com">百度网</a>
title: 把鼠标放在图片上显示的文字
target : 转到新的页面
<!--# 默认回到顶部> <-->
<a href="#">回到顶部</a>
- 字符实体
<p> 本人叫张山，毕业于某大学计算机科学与技术专业<br />今年23岁，本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和团队协作精神<br />良好的沟通能力和社交能力，善于处理各种人际关系。能10>5迅速适应环境，并融入其中。</p>
 ：空格
br / ：换行
>：>
<：<
- 列表
- 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个
- 元素包围。
- 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个
- 元素包围。
- 定义列表：
<!--无序列表 ul>(li>a{新闻标题}*3+TAB键)> <-->
<ul>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
</ul>
<!--有序列表 ol>li*3+Tab> <-->
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<!--定义列表 d>(dt+dd)*3,其中+表示dt 和dd并列，>关系表示的包含关系>> <-->
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的行为</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
dd 前面的内容有首行缩进
html表格
表格布局减少了视觉受损的用户的可访问性: 屏幕阅读器, 被盲人所使用, 解析存在于 HTML 页面上的标签，然后为用户读出其中的内容。因为对于布局来说，表格不是一个正确的工具， 使用的标记比使用 CSS 布局技术更复杂, 所以屏幕阅读器的输出会让他们的用户感到困惑。
表格会产生很多标签: 正如刚才提到的, 表格布局通常会比正确的布局技术涉及更复杂的标签结构，这会导致代码变得更难于编写、维护、调试.
表格不能自动响应: 当你使用正确的布局容器 (比如 header, section, article, 或是 div), 它们的默认宽度是父元素的 100%. 而表格的的默认大小是根据其内容而定的。因此，需要采取额外的措施来获取表格布局样式，以便有效地在各种设备上工作。
创建这样一个表格，涉及以下几个要点:
- 创建一个8*5的表格，并设置表格样式
按住快捷键Tab就可以快速创建
table>(tr>td*5)*8
- 合并相应单元格，并删除相应单元格
- 输入
- 对列进行上颜色
完整代码
<table border="1" width="500" height="300">
<!--对整列上颜色，span表示跨度><-->
<colgroup>
<col style="background: #faead3" span="3">
<col style="background: #fdf9ee" span="2">
</colgroup>
<tr>
<th colspan="3"></th>
<th style="background: #65c4b1">Subject</th>
<th style="background: #65c4b1">Object</th>
</tr>
<tr>
<td rowspan="5"> 单数</td>
<td colspan="2">第一人称</td>
<td>I</td>
<td>me</td>
</tr>
<tr>
<td colspan="2">第二人称</td>
<td>you</td>
<td>you</td>
</tr>
<tr>
<td rowspan="3">第三人称</td>
<td>♂</td>
<td>he</td>
<td>him</td>
</tr>
<tr>
<td>♀</td>
<td>she</td>
<td>her</td>
</tr>
<tr>
<td>o</td>
<td>it</td>
<td>it</td>
</tr>
<tr>
<td rowspan="3">复数</td>
<td colspan="2">第一人称</td>
<td>we</td>
<td>we</td>
</tr>
<tr>
<td colspan="2">第二人称</td>
<td>you</td>
<td>you</td>
</tr>
<tr>
<td colspan="2">第三人称</td>
<td>they</td>
<td>them</td>
</tr>
</table>
利用table进行传统布局
这个过程是真的繁琐，也是真的累
<table width="800" height='800' border="0" cellpadding='0' cellspacing='0' align="center">
<tr>
<td width="260" cellpadding='' valign="top" style="background: #f2f2f2">
<!--插入头像姓名等信息><-->
<table width='200' border="0" cellpadding='0' cellspacing='0' align="center">
<!--插入信息上面的空白格><-->
<tr >
<td width='260' height='100'></td>
</tr>
<!--插入头像姓名等信息><-->
<tr>
<td><img src="images/1.jpg"></td>
</tr>
<tr>
<td align="right">Di</td>
</tr>
<tr>
<td align="right">1123456</td>
</tr>
<tr>
<td align="right">23124@qq.com</td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top">
<!--插入简历图片><-->
<table width='480' border="0" cellpadding='0' cellspacing='0'>
<!--插入空白格><-->
<tr>
<th height="100" ></th>
</tr>
<tr>
<th align="right"><img src="images/resume.jpg"></th>
</tr>
</table>
<br/>
<hr/>
<!--插入个人基本情况><-->
<table width='480' border="0" cellpadding='5'>
<tr>
<td colspan="2" ><b>个人基本情况</b></td>
</tr>
<tr>
<td>姓名：长大山</td>
<td>籍贯：北京</td>
</tr>
<tr>
<td>性别：男</td>
<td>身高:175</td>
</tr>
<tr>
<td>民族:汉</td>
<td>体重：70</td>
</tr>
<tr>
<td>出生日期:1992.02</td>
<td>电话：13441</td>
</tr>
<tr>
<td>专业：工业设计</td>
<td>居住地：北京</td>
</tr>
</table>
<br/>
<br/>
<!--插入教育背景><-->
<table width='480' border="0" cellpadding='5'>
<tr>
<td colspan="3"><b>教育背景及工作经历</b></td>
</tr>
<tr>
<td><b>2008.09-2011.06</b></td>
<td>北京邮电大学</td>
<td>工业设计专业</td>
</tr>
<tr>
<td><b>2011.06-2012.09</b></td>
<td>北京微创信息公司</td>
<td>前端工程师</td>
</tr>
</table>
<br/>
</td>
<td width="30"></td>
</tr>
</table>
表单
表单的基础构造
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、form标签 定义整体的表单区域
action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式：post表示私密提交
属性
点击用户名就可以直接输入
加入for 和 id属性
<p>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" />
</p>
下面单选框可以这样决定：用label把男给包裹起来，然后在后面输入for 前面输入id
<p>
<label>性 别：</label>
<input type="radio" name="gender" value="0" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="1">女
</p>
2、label标签 为表单元素定义文字标注
3、input标签 定义通用的表单元素
type属性
type=“text” 定义单行文本输入框
type=“password” 定义密码输入框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮
type=“hidden” 定义一个隐藏的表单域，用来存储值
value属性 定义表单元素的值
name属性 定义表单元素的名称，此名称是提交数据时的键名
4、textarea标签 定义多行文本输入框
5、select标签 定义下拉表单元素
6、option标签 与select标签配合，定义下拉表单元素中的选项
<h1>注册表单</h1>
<form action="" method="post">
<!--输入用户名><-->
<p>
<label>用户名：</label>
<input type="text" name="username" />
</p>
<!--密码><-->
<p>
<label>密 码：</label>
<input type="password" name="password">
</p>
<!--单选框><-->
<p>
<label>性 别：</label>
<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="1">女
</p>
<!--多选框<-->
<p>
<label>爱 好：</label>
<input type="checkbox" name="hobby" value="study">学习
<input type="checkbox" name="hobby" value="play">弹琴
<input type="checkbox" name="hobby" value="photograph">摄影
</p>
<!--上传照片<-->
<p>
<label>照 片：</label>
<input type="file" name="photo">
</p>
<!--个人描述<-->
<p>
<label>描 述：</label>
<textarea name="introduce"></textarea>
</p>
<!--下拉菜单<-->
<p>
<label>籍 贯：</label>
<select name="site">
<option name='0'>北京</option>
<option name='1'>上海</option>
<option name='2'>河南</option>
<option name='3'>河北</option>
<option name='4'>广州</option>
</select>
</p>
<!--提交><-->
<p>
<!-- <input type="submit" name="" value="提交"> -->
<!-- 更改提交按钮，以图片为按钮可能会提交两次 -->
<input type="image" src='images/1.jpg' name="">
<input type="reset" name="" value="重试">
</p>
<input type="hidden" name="">
</form>
扫一扫
2148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
