HTML基础总结
2019-11-19 本文已影响0人
街角的咖啡店咖啡不太甜
HTML基础知识总结
HTML基本概念
什么是HTML？
HTML是用来描述网页的一种语言
- HTML指的是超文本标记语言
- HTML不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签
- HTML使用标记标签来描述网页
总结：HTML是超文本标记语言，通过使用标记标签来描述网页。
HTML文件基本结构
一个标准的HTML文档应该由一下几种元素构成
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<!doctype html>用来声明文档的类型是HTML文件，必须放在HTML文档的第一行，不是HTML标签
<html></html>html标签之间的文本描述网页
<body></body>body标签之间的文本是可见的页面内容
<head></head>head内的内容不会显示在页面上，主要是对网页内容进行一个规范，比如设置html文件的编码，外部CSS文件的引入也在head标签内部进行
HTML基础语法
HTML标签由<和>括起来，一般成对出现，分开始标签和结束标签，结束标签比开始标签多了一个/。没有结束标签的标签称之为单标签，例如<hr/>。
HTML常用标签
以下为HTML常用标签的用法
<!DOCTYPE html>
<!--<!DOCTYPE html> 不属于HTML标签 只是为了声明文档类型-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html基础课程介绍</title>
</head>
<body bgcolor="#faebd7">
<h1>web前端课程</h1>
<ol>
<li>HTML
<ul type="square">
<li>HTML标签</li>
<li>HTML语法</li>
<li>HTML结构</li>
</ul>
</li>
<li>CSS
<ul type="square">
<li>CSS语法</li>
<li>CSS样式</li>
<li>CSS选择器</li>
</ul>
</li>
<li>JS
<ul type="square">
<li>JS数据类型</li>
<li>JS对象</li>
<li>JS循环</li>
</ul>
</li>
</ol>
<h1>CSS样式</h1>
<ul>
<li>CSS布局</li>
<li>CSS精华
<ol>
<li>第一课</li>
</ol>
</li>
<ol>
<li>第一课</li>
</ol>
<li>CSS总结</li>
</ul>
<form>
名：<input type="text"/><br/>
姓：<input type="text"/>
</form>
<form>
<table align="center" bgcolor="#ffffff">
<tr>
<td>用户：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password"/></td>
</tr>
</table>
</form>
<h1 align="center">注册信息</h1>
<hr color="#336600"/>
<form>
<table align="center" bgcolor="#f2f2f2" width="600px">
<tr>
<td>用户名：</td>
<td><input type="text" placeholder="请输入用户名" size="25px" maxlength="6"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" placeholder="请输入密码" size="25px" maxlength="6"/></td>
</tr>
<tr>
<td>确定密码：</td>
<td><input type="password" placeholder="请再次输入用户名" size="25px" maxlength="6"/></td>
</tr>
<tr>
<td>上传照片：</td>
<td><input type="file"/></td>
</tr>
<tr>
<td>性别：</td>
<td>男<input type="radio" name="sex" value="man" checked/>女<input type="radio" name="sex" value="woman"/>
</td>
</tr>
<tr>
<td colspan="2">
我喜欢的水果：<br/>
<input type="checkbox" name="fr" value="apple"/>🍎
<input type="checkbox" name="fr" value="pair"/>🌰
<input type="checkbox" name="fr" value="ban"/>🍑
</td>
</tr>
<tr>
<td>喜欢的食物：
<select name="li">
<option>请选择：</option>
<optgroup label="水果">
<option>苹果</option>
<option>猕猴桃</option>
<option>杏子</option>
</optgroup>
<optgroup label="蔬菜">
<option>西红柿</option>
<option>白菜</option>
<option>油麦菜</option>
</optgroup>
</select></td>
</tr>
<tr>
<td colspan="2">
请做自我介绍：<br/>
<textarea name="self" rows="3" cols="20" placeholder="请在此处介绍自己。。。"></textarea>
</td>
</tr>
<tr>
<td><input type="button" value="大爷来玩啊"/> <input type="submit" value="提交表单"/> <input type="reset"
value="重置表单"/></td>
</tr>
</table>
下拉菜单：<br/>
<select>
<option>熊猫</option>
<option>猫</option>
<option>狗</option>
<option>猪</option>
<option>猴子</option>
</select>
列表：<br/>
<select size="3">
<option>熊猫</option>
<option>猫</option>
<option>狗</option>
<option>猪</option>
<option>猴子</option>
</select>
下拉菜单项：
<select size="5">
<option>熊猫</option>
<option>猫</option>
<option>狗</option>
<option>猪</option>
<option>猴子</option>
</select>
列表项：
<select size="5" multiple>
<option>熊猫</option>
<option>猫</option>
<option>狗</option>
<option>猪</option>
<option>猴子</option>
</select>
</form>
<p>html基础课程介绍</p>
<hr/>
<p><a href="#锚点">hello html</a></p>
<h3 align="center">《早发白帝城》</h3>
<p align="center">朝辞白帝彩云间，千里江陵一日还</p>
<p align="center">两岸猿声啼不住，轻舟已过万重山</p>
<p align="center">关于我们 | 招聘信息 | 联系我们 | 意见反馈</p>
<hr/>
<p align="center">Copyright©2016 imooc.com All Rights Reserved</p>
<p>公式：x<sup>2</sup>+x=0 解：x<sub>1</sub>=0；x<sub>2</sub>=-1</p>
<ul type="circle">
<li>朝辞白帝彩云间</li>
<li>千里江陵一日还</li>
<li>两岸猿声啼不住</li>
<li>轻舟已过万重山</li>
</ul>
<ul type="square">
<li>朝辞白帝彩云间</li>
<li>千里江陵一日还</li>
<li>两岸猿声啼不住</li>
<li>轻舟已过万重山</li>
</ul>
<ol type="1">
<li>朝辞白帝彩云间</li>
<li>千里江陵一日还</li>
<li>两岸猿声啼不住</li>
<li>轻舟已过万重山</li>
</ol>
<ol type="a">
<li>朝辞白帝彩云间</li>
<li>千里江陵一日还</li>
<li>两岸猿声啼不住</li>
<li>轻舟已过万重山</li>
</ol>
<p>一幅图像：<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jp g" width="30%"></p>
<br/>
<p>一幅动画图像<img src="http://climg.mukewang.com/58c11324000144f703550220.jp g" width="50" height="50" alt="马图"></p>
<p><a href="http://www.imooc.com" target="_blank" title="慕课网，只学有用的">慕课网</a></p>
<p><a href="#" title="T在线教育" name="锚点">imooc</a></p>
<a href="mailto:ckymemory@163.com">邮箱链接</a>
<a href="http://climg.mukewang.com/58ca5b6700018dfc02400135.jpg">文件下载</a>
<ins>插入内容</ins>
<del>删除内容</del>
<table border="1">
<tr>
<td>上午</td>
<td>下午</td>
</tr>
<tr>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>数字</td>
<td>历史</td>
</tr>
</table>
<table width="500" rules="all" frame="border">
<caption>表格</caption>
<tr align="center" valign="middle" bgcolor="#ffc0cb">
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center" valign="middle">
<td rowspan="2">语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr align="center" valign="middle">
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr align="center" valign="middle">
<td colspan="4">课间活动</td>
</tr>
<tr align="center" valign="middle">
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr align="center" valign="middle">
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
</table>
</body>
</html>
