1、HTML文档的基本结构
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="html文档测试20190702"> <title>HTML文档结构</title> </head> <body> <h1>20190702:html文档结构测试</h1> <p>lang属性设置该文档的内容使用的语言,部分浏览器会依赖它进行翻译提示</p> <p>head标签是文档的头部声明和页面描述信息,除标题外, 其余内容对用户不可见, 供浏览器和搜索引擎读取</p> <p>meta标签用来设置页面的元数据(描述),例如关键字,页面描述,作者等</p> <p>charset属性是你在编写和存储这个html文档时, 使用的编码集</p> <p>title标签是显示在浏览器标签页内的文本内容,用来提示用户当前页面的基本信息</p> <p>body标签为文档主体，其内容会显示在当前浏览器的窗口中</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2、HTML基本标签的使用
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML标签</title> </head> <body> <h1>20190702:html标签使用</h1> <h2>标题标签：h1-h6</h2> <p>段落标签：p</p> <p>换行标签：br 进行换行</p> <p>分隔线标签：hr 进行分隔</p> <hr> <h3 style="color:green">链接标签：a</h3> <a href="http://www.php.cn/">php中文网：默认当前页面打开</a> <br> <a href="http://www.php.cn/" target="_self">php中文网: 默认值是_self，默认当前页面打开</a> <br> <a href="http://www.php.cn/" target="_blank">php中文网: _blank 新窗口打开</a> <br> <a href="http://www.php.cn/" target="_parent">php中文网: _parent 父窗口打开</a> <br> <a href="http://www.php.cn/" target="_top">php中文网: _top 顶层窗口打开</a> <hr> <h3 style="color:blue">图像标签：img</h3> <img src="image/girl.jpg" alt="人物" width="500" title="漂亮的小姐姐"> <p>宽度和高度设置一个即可, 另一个会按比例自动调整</p> <p>图像的alt属性是一定要有的,因为搜索引擎 和 屏幕阅读器都是依赖这个元素来获取图片的内容与介绍</p> <p>图片是外部资源, html文档无法直接提供内容, 所以对于外部资源, html大多是通过单标签进行加载</p> <p>html是通过单标签中的属性指定要加载的外部资源的地址</p> <p>可以是本地的图片, 也可以是一个网络图片</p> <hr> <h2 style="color:red">快捷键记录：</h2> <p>ctrl+d:用于行复制</p> <p>alt+鼠标左键:多行编辑</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3、HTML列表标签的使用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<h1>20190702:HTML--列表标签</h1>
<h2>无序列表：ul</h2>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<hr>
<h2>有序列表：ol</h2>
<ol>
<li>php</li>
<li>java</li>
<li>c++</li>
</ol>
<hr>
<h2>定义列表：dl</h2>
<dl>
<dt>php</dt>
<dd>脚本语言</dd>
<dt>mysql</dt>
<dd>数据库</dd>
<dt>ThinkPHP</dt>
<dd>PHP框架</dd>
</dl>
<hr>
<h2>emmet生成无序列表: ul#list>li.item*5>a{列表$@1}</h2>
<ul id="list">
<li class="item"><a href="">列表1</a></li>
<li class="item"><a href="">列表2</a></li>
<li class="item"><a href="">列表3</a></li>
<li class="item"><a href="">列表4</a></li>
<li class="item"><a href="">列表5</a></li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、HTML表格标签的使用
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <p>border: 表格与单元格添加边框</p> <p>cellspacing: 设置单元格与表格之间的间隙大小,0为折叠</p> <p>cellpadding: 设置单元格内容与单元格之间的内边距, 不要太拥挤</p> <p>width: 设置表格的宽度, 可以使用相对值:百分比</p> <p>align: 设置对齐方式,居中, 居左,居右</p> <p>bgcolor: 设置背景色</p> <p>colsapn: 单元格在列方向上(水平)的合并</p> <p>rowspan: 单元格在行的方向(垂直)合并</p> <hr> <table border="1" align="left" cellspacing="0" cellpadding="5" > <caption>表格标题</caption> <!-- 表格头部, <thead>只允许一个 --> <thead> <tr bgcolor="aqua"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <!-- 表格主体, <tbody>可以有多个--> <tbody> <tr align="center"> <td width="50">1</td> <td width="200">苹果</td> <td width="100">5</td> <td width="50">2</td> <td width="100">10</td> </tr> <tr align="center"> <td>2</td> <td>香蕉</td> <td rowspan="2">3</td> <td>5</td> <td>15</td> </tr> <tr align="center"> <td>3</td> <td>桃子</td> <td>2</td> <td>6</td> </tr> </tbody> <!-- 表格底部, tfoot也只允许有一个 --> <tfoot> <tr align="center"> <td colspan="3" >总计：</td> <td>9</td> <td>31</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5、HTML表单与表单中的控件元素的使用
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单与表单中的控件元素</title> </head> <body> <p>action:定当提交表单时向何处发送表单数据。</p> <p>method:规定用于发送 form-data 的 HTTP 方法。get/post</p> <p>name:规定表单的名称。</p> <p>for:规定 label 绑定到哪个表单元素。</p> <p>autofocus:自动获取焦点</p> <p>placeholder:规定帮助用户填写输入字段的提示</p> <p>required:指示输入字段的值是必需的。</p> <p>max:规定输入字段的最大值。</p> <p>min:规定输入字段的最小值。</p> <p>checked：规定此 input 元素首次加载时应当被选中。</p> <p>maxlength:规定输入字段中的字符的最大长度。</p> <hr> <h3>用户注册</h3> <form action="" method="get" name="form1"> <p> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="用户名不能为空" autofocus required> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="密码由字母和数字组成" autofocus> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="test@qq.com" required> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="10" max="100"> </p> <p> <label for="birthday">出生日期：</label> <input type="date" id="birthday" name="birthday"> </p> <p> <!-- select: 下拉列表,也叫下拉框,与前面表单控件不一样,它的值都是预置的,不需要用户输出,是枚举类型--> <!-- 与其它input元素不同, 它的name和value属性分别在二个标签中: name在select中, value在option中--> <label for="course">课程：</label> <select name="course" id="course" size="1"><!-- 默认显示是一个,可以用size设置--> <option value="0">请选择</option> <option value="1" selected>php</option> <!-- selected: 设置默认选项--> <option value="2">mysql</option> <option value="3">java</option> <optgroup label="前端"> <!-- 选择支持分组--> <option value="4">html</option> <option value="5">css</option> <option value="6">javascript</option> </optgroup> </select> </p> <p> <label>爱好：</label> <input type="checkbox" id="game" name="hobby[]" value="game" checked><label for="game">打游戏</label> <input type="checkbox" id="run" name="hobby[]" value="run"><label for="run">跑步</label> <input type="checkbox" id="swim" name="hobby[]" value="swim"><label for="swim">游泳</label> </p> <p> <label>性别：</label> <input type="radio" name="gender" value="male" id="male" checked><label for="male">男生</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label> </p> <p> <label for="comment">简介：</label> <textarea name="comment" id="comment" cols="50" rows="10" maxlength="100" placeholder="不超过100字"></textarea> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <input type="button" name="button" value="普通按钮1"> <button>默认为提交按钮</button> <button type="button">普通按钮2</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：通过这节课，我认识了一些常用的HTML标签及其属性，这些标签和属性需要平时多用多练，不然很容易忘记。同时我也学会了一些简单的快捷键操作和Emmet操作，虽然对Emmet的操作不大熟悉，但是我可以多加练习。附上网上查找的有关Emmet的基本使用方法的网址：https://www.iteye.com/news/27580
