本文介绍了HTML的基本概念，包括HTML的语义标签如标题、段落、文本格式化、div和span、图像、超链接等。还涵盖了HTML的注释、特殊字符、表格、列表和表单的使用。特别提到了HTML5的新元素Canvas，用于图形绘制。文章强调了Web标准的重要性，包括HTML、CSS和JavaScript的结合。
目录
一、基本概念：
1.HTML：
超文本标记语言，描述网页的语言
超过文本限制，超级链接文本
2.常用浏览器：
IE、火狐、谷歌、Safari、Opera
浏览器内核：读取网页内容，整理讯息，计算网页的显示方式
3.web标准：
W3C（万维网联盟）组织和其他标准化组织
web标准的构成：结构（网页元素HTML）、表现（样式CSS）、行为（交互JS）
<!DOCTYPE html> 必须写在第一行，是整个文档类型的声明标签。
<html lang="en"> 定义当前文档显示的语言 en：英文 zh-CN：中文
<meta charset="UTF-8"> 字符编码方式，utf-8又被称为万国码
二、标签语义
1.标题标签
<h1>~<h6>作为标题使用，根据重要性递减
特点：文字加粗，字号变大，一个标题一行
2.段落和换行标签
<p>段落</p>
<br />
3.文本格式化标签
<strong>加粗</strong> 推荐
<b>加粗</b>
<em>倾斜</em> 推荐
<i>倾斜</i>
<del>删除线</del> 推荐
<s>删除线</s>
<ins>下划线</ins> 推荐
<u>下划线</u>
突出重要性，比普通文字更重要
4.div和span标签
没有语义，就是一个容器。
div是division的缩写，表示分割、分区。
span意为跨度、跨距。
特点：
<div></div>用于布局，一行只能放一个div。大盒子
<span></span>同样用于布局，一行可以有多个。小盒子
5.图像标签和路径
图像标签：<img src="图像URL" />
src用于指定图像文件的路径和文件名，是<img>标签的必须属性。
属性：
alt：替换文本，图像无法显示时用文字替换
title： 提示文本，鼠标放在图像上提示的文字
width：图像宽度
height：图像高度
border：设置图像边框粗细
路径：
相对路径：图片相对于HTML页面的位置
同一级路径（同一目录）-直接写图像文件名
下一级路径-xxx/文件.jpg
上一级路径-../文件.jpg
绝对路径：目录下的绝对位置，从盘符开始的路径"C:\USER\..."。或者是图片的网络地址。
6.超链接标签<a>
<a href="跳转目标URL地址（必须属性）" target="目标窗口的打开方式">文本或图像</a>
target:_self 默认，当前页面打开；_blank 在新窗口中打开
链接分类：
外部链接"http://......"
内部链接"xx.html"
空链接"#"
下载链接"xx.exe或xx.zip"
网页元素链接，各种网页元素都可以添加超链接
锚点链接：使用id属性实现
a.<a href="#tt"> </a> #名字
b.<h2 id="tt"> </h2>
三、HTML的注释和特殊字符
1.注释
<!-- xxxx --> 快捷键ctrl+/
2.特殊字符
空格
大于>
小于<
四、表格标签
1.表格作用
显示、展示数据。
2.语法
<table>
<tr> <!--行-->
<td>...</td> <!--单元格-->
...
</tr>
...
</table>
表头单元格：用于第一行：<tr><th>...</th> <th>...</th> <th>...</th></tr>
表头单元格的文字会加粗居中
3.属性(写在table中)
或者 用CSS来设置
align: left\right\center 表格对齐方式
border: 1或""（默认，没有边框）
cellpadding: 内容和边框的距离
cellspacing: 单元格之间的距离
width: 表格宽度
4.表格结构标签
<thead>表格头部区域</thead>
<tbody>表格主体区域</tbody>
5.合并单元格（写在td中）
方式：
跨行合并 rowspan="合并单元格的个数" 目标单元格：最上
跨列合并 colspan="合并单元格的个数" 目标单元格：最左
步骤：选择合并方式；找到目标单元格；删除多余单元格
例：<td rowspan="2"></td>
五、列表标签
1.列表作用
用于布局，而表格是用于展示数据的。整齐、有序。
2.类别
2.1无序列表
没有排列顺序的列表
语法：
<ul>
<li>...</li>
<li>...</li>
...
</ul>
<ul>中只能放<li>；<li>相当于容器可以放任何元素
2.2有序列表
有排列顺序的列表
语法：
<ol>
<li>...</li>
<li>...</li>
...
</ol>
<ol>中只能放<li>；<li>相当于容器可以放任何元素
2.3自定义列表
常用于对术语或名词进行解释或描述
语法：
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
...
</dl>
<dl>中只包含<dt><dd>,dt\dd可以放任何元素
六、表单标签
1.表单作用
收集用户信息
2.组成
表单域、表单控件（表单元素）、提示信息
3.表单域
包含表单元素的区域
<form>把范围内的表单元素信息提交给服务器
语法：
<form action="url地址" method="提交方式" name="表单域名称">
各种表单控件元素
</form>
action：指定接收并处理表单数据的服务器程序的url地址
method：get/post
name: 区分表单
例：<form action="demo.php" method="POST" name="name1"> </form>
4.表单控件
4.1 input输入表单元素
收集用户信息
语法：
<input type="属性值" name="表单元素名" value="表单默认值（给后台人员使用）"
checked="checked(规定此input元素首次加载时就被选中)" maxlength="输入字符最大长度" />
type属性值：
text：文本框
password: 密码框，字符被掩码
radio：单选按钮，单选按钮必须有相同的名字，才能实现单选
checkbox：复选框
submit：把表单数据发送到服务器
reset：重置表单数据，还原默认状态
button：可点击按钮，多用于通过JS启动脚本
file：文件域，上传文件使用
要求：单选按钮和复选框有相同的name
checked属性主要针对单选按钮和复选框，默认选中
4.2 <label>标签
为input元素定义标注。label用于绑定一个表单元素，当点击label标签内的文本时，光标自动选择对应的表单元素，增加用户体验。
语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
for属性和id属性的值一样，建立label和input的连接
4.3 select下拉元素
多个选项可选，想要节约空间。
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<option>中可添加属性selected="selected"，即默认选中项
4.4 textarea文本域元素
输入内容较多，用于多行文本输入。常见于留言板、评论。
语法：
<textarea cols=" " rows=" "></textarea>
实际开发中用CSS控制cols、rows
查阅文档-授人以鱼不如授人以渔
W3C：http://www.w3school.com.cn/
MDN:https://developer.mozilla.org/zh-CN/
五、HTML5新元素
1.Canvas
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
简单实例：
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
<script> </script>
默认情况下,<canvas>没有边框和内容，使用style属性添加边框
使用JS绘制图像：
var c=document.getElementById("myCanvas"); //找到canvas元素
var ctx=c.getContext("2d"); //创建context对象
ctx.fillStyle="#FF0000"; //绘制红色矩形
ctx.fillRect(0,0,150,75);
扫一扫
1617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
