1.新建页面是，输入html：xt回车会出来格式，为什么呢？
因为html分为严格型和过渡性。
！+tab html5的标签结构
2.编码格式 <meta ...><link...>：
charset 编码 : 为了跟计算机进行交流
早期编码 ASCII (American Standard Code for Information Interchange)
ANSI (扩展的ASCII码)
Unicode（不识别中文）
Gbk Gb2312（识别中文） Big5（识别繁体文字）
UTF-8（识别200多个国家的文字，通用编码）
2.1关键字
标签格式：<meta name="keyword" content=" 关键词">（用于seo搜索引擎的优化，seo做的越好，排名越靠前。网页上看不到。）
2.2网页描述
<meta name="description" content="努力学习计算机知识">
2.3网页重定向(网页的跳转至指定网站）
<meta http-equiv="refresh" content="3; http://www.baidu.com">
3秒后，会跳转至www.baidu.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content>="计算机，前端，c#，java">
<meta name="description" content="努力学习计算机知识">
<meta http-equiv="refresh" content="3;网址">
<title>Document</title>
</head>2.4链接外部样式文件
<link rel="stylesheet" href="1.css" >
<link rel="icon" href="jd.icon">
3.表格
3.1展示数据。
<table border="边框宽度" width="单元格宽" height="单元格高" cellspacing="单元格线宽度" cellpadding="单元格内文字与边框的距离" align="left | cente | right"表格左边对齐 居中 右边对齐 bgcolor="表格背景颜色">
<tr align="center"表格行内文字居中> //行
<td></td> //列
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- table 表格 > --><!-- bgcolor="表格背景颜色"bg=background>
<!-- cellspacing单元格距离 -->
<!-- cellpadding 内容到边框的距离 -->
<table border="1" width="200" height="100" cellspacing="0"
cellpadding="10" align="center">
<!-- tr 行 -->
<tr>
<!-- td列 -->
<td align="center">阿三</td>
<td>44</td>
<td>厨师</td>
<td>高级厨师</td>
</tr>
<tr align="center">
<td>翠花</td>
<td>20</td>
<td>学生</td>
<td>大三</td>
</tr>
</body>
</html>3.2表格的标准结构（针对seo）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table的标准结构，分成了三块thead tbody tfoot -->
<table border="1" width="500" height="300">
<!-- thead第一行的表格的内容 -->
<thead>
<tr height=20>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<!-- <tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot> -->
</table>
</body>
</html>3.3表格的合并
colspan="合并列单元格数" col=column列
rowspan="合并行单元格数" row行
<caption>表头</caption>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<bordercolor="边框颜色>
<table border="1" bordercolor="red" width="300" height="300">
<caption>表头</caption>
<tr>
<!-- colspan="3"合并列单元格，仅仅合并右侧的单元格column --><!-- colspan="2" -->
<td colspan="2">啊呀 哈哈</td>
<!-- <td>哈哈</td> -->
<td rowspan="3">dddd</td>
</tr>
<tr>
<!-- valign="middle" --><!-- rowspan="2"合并行单元格,仅仅将下面的单元格合并 -->>
<td >张三</td>
<td >Tom</td>
<!-- <td rowspan="2">Sunny</td> -->
</tr>
<tr>
<td>啊呀</td>
<td rowspan="3">uuu</td>
<!-- <td>bb</td> -->
<!-- <td></td> -->
</tr>
</table>
</body>
</html>3.4表格字体加粗，边框，垂直对齐
bordercolor="边框颜色"; valign="top middle bottom 内容垂直对齐";<th>字体加粗</th>感觉跟<strong></strong>和<b></b>一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="2" bordercolor="blue" width="500" height="300" cellspacing="0">
<tr>
<!-- th加粗字体 感觉跟strong功能一样-->
<th>张三</th>
<th>20</th>
<th>大前端</th>
</tr>
<tr>
<!-- valign="top middle bottom 内容垂直对齐" -->
<td valign="bottom">张三</td>
<td><strong>20</strong></td>
<td>大前端</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>大前端</td>
</tr>
</table>
</body>
</html>3.5细线表格
方法：设定表格背景颜色bgcolor，即线的颜色；然后使每一个单元格为白色，使用标签cellspacing="线的宽度"。
<body>
<table width="400" height="300" bgcolor="green" cellspacing="1" >
<tr bgcolor="white">
<td>ee</td>
<td>11</td>
<td>34</td>
<td>654</td>
</tr>3.6实现一个课程表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="400" height="300" bgcolor="green" cellspacing="1" align="center">
<caption >课程表</caption>
<tr bgcolor="white" >
<td width="80" colspan="2"></td>
<!-- <td rowspan="2"></td> -->
<td >星期一</td>
<td >星期二</td>
<td >星期三</td>
<td >星期四</td>
<td >星期五</td>
</tr>
<tr bgcolor="white">
<td width="60"rowspan="2">上午</td>
<td>1</td>
<td>语文</td>
<td>生物</td>
<td>英语</td>
<td>化学</td>
<td>物理</td>
</tr>
<tr bgcolor="white">
<!-- <td>ee</td> -->
<td>2</td>
<td>体育</td>
<td>英文</td>
<td>体育</td>
<td>自然</td>
<td>书法</td>
</tr>
<tr bgcolor="white">
<td width="60" rowspan="2">下午</td>
<td>3</td>
<td>游泳</td>
<td>春游</td>
<td>书法</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr bgcolor="white">
<!-- <td>ee</td> -->
<td>4</td>
<td>美术</td>
<td>体育</td>
<td>看电影</td>
<td>演讲</td>
<td>美术</td>
</tr>
</table>
</body>
</html>4.表单
作用：收集信息。例如：昵称，密码，确认密码等。
4.1 表单控件、表单域、密码输入框、单选效果
属性：action:处理信息；method=“get or post”get是通过地址栏提交信息，不安全。post是通过1.php来处理信息，安全性高。文本框输入：maxlength="6" 限制输入字符长度；readonly=“readonly”只读状态，无法输入；disabled=“disabled”未激活状态；name="usename" 输入框的名称；value="大前端" 将输入框的内容传给处理文件
单选框
只有将name的值设置相同的时候，才能实现单选效果
checked=“checked”设置默认选中项
4.2下拉列表
<select multiple="multiple"多选>
<option selected="selected"设置默认选项>下拉列表的选项</option>
</select>
<optgroup ></optgroup>对下拉列表进行分组
Label="" 分组名称
4.3多行文本框
<textarea cols="输入文本的列数（宽度）" rows="输入文本的行数（高度）"></textarea>4.4文件上传控件、提交按钮、普通按钮、图片按钮
<input type="file">、
<input type="submit">、
<input type="button" value="普通按钮">无提交功能，配好JS使用
<input type="image" src="按钮.jpg">
4.5表单信息分组
<fieldset>所分组内包含的内容</fieldset> 对表单信息分组
<legend>分组名称</legend> 表单信息分组名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<from action="1.php" method="get">
<fieldset>
<lengend>表单分组信息</lengend>
<!-- input type = ""文本输入框 -->
<!-- maxlength 最长的输入个数 -->
<!-- readonly只读 -->
用户名:<input type="text" maxlength="6" readonly="readonly" name="username">
密 码:<input type="password" name="pwd">
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender" checked="checked">女
<input type="submit">文件提交按钮
</fieldset>
<br><br>
省(市): <select >
<option>河北</option>
<option>山东</option>
<!-- selected="selected"设置默认选择项 -->
<option selected="selected">大连</option>
</select>
<!-- multiple="multiple"将下拉列表设置为多选项 -->
<select multiple="multiple">
<option selected="selected">北京</option>
<option>上海</option>
<option>新疆</option>
<option>河北</option>
<option>大连</option>
<option>山东</option>
<option>河南</option>
<option>广东</option>
</select>
市(区):<select>
<optgroup label="北京市">
<option>昌平区</option>
<option>海淀区</option>
<option>朝阳区</option>
<option>大兴区</option>
</optgroup>
</select>
<br><br>
<!-- 多选框 -->
<input type="checkbox" checked="checked">画画
<input type="checkbox" checked="checked">睡觉
<input type="checkbox" checked="checked">学习
<input type="checkbox" checked="checked">ml
<textarea cols="130" rows="130"></textarea>
<input type="file">
</from>
</body>
</html> 5.HTML新功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="1.php" method="post">
<!-- 网址控件 -->
<!-- <input type="url"> -->
<!-- 日期控件 -->
<!-- <input type="date"> -->
<!-- 时间控件 -->
<!-- <input type="time"> -->
<!-- 邮件控件 -->
<!-- <input type="email"> -->
<!-- 数字控件 -->
<!-- <input type="number" step="5"> -->
<!-- 滑块控件 step="一次性滑动步数"-->
<!-- <input type="range" step="4"> -->
<input type="submit">
</form>
</body>
</html>6.标签语义化
--标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
--标签语义化意义：1.网页结构合理；2.有利于seo和搜索引擎建立良好沟通，有了良好的结构和语义，网页内容自然容易被搜索引擎抓取；3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备等）4.便于团队开发和维护
好的语义化的网址标准是去掉样式表文件之后，结构依然很清晰。
注意事项：1.尽可能少的使用无语义的标签div和span；2.在语义不明显时，既可以使用div或p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利；3.不要使用纯样式标签，如：b、font、u等，改用css设置。4.需要强调文本时，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体(bu用i）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
