HTML总结
什么是HTML?
- HTML:Hyper Text Markup Lauguage(超文本标记语言),HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。
HTML元素
- 开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
- 内容(Content):元素的内容,本例中就是所输入的文本本身。
- 元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
HTML文档
<!DOCTYPE html>
: 声明文档类型。出于历史原因需要,现在可有可无。<html></html>: <html>
元素。这个元素包裹了整个完整的页面,是一个根元素,其它元素都嵌套到其中。<head></head>: <head>
元素。 这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。<meta charset="utf-8">
: 这个元素设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
: 指定页面的图标,出现在浏览器标签上。(试一试:你可随意下载一个.ico图标文件到工作目录中)<title></title>
: 设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。<body></body>
: 元素。 包含你能在页面看到的所有内容,包括文本,图片,音频,游戏等等。
HTML注释
需要将其用特殊的记号
<!--和-->包括起来
<p>我在注释外,可以显示!</p>
<!-- <p>我在注释内!浏览器将忽略我</p> -->
HTML标签元素
- 网页基本信息
<!-- DOCTYPE:告诉浏览器,我们需要用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head头部标签 -->
<head>
<!-- meta标签一般用来描述网站信息 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title标签用来表示网页标题 -->
<title>我的第一个网页</title>
</head>
<!--body主体标签 -->
<body>
Hello,world!
</body>
</html>
- 图像标签(img)
<!--
img标签:
属性:
src:图片地址,文件目录
./为当前文件夹,默认当前文件夹
../为上级目录
alt:图片加载不成功显示提示信息
title:鼠标悬停显示文字
-->
<img src="../images/again.png" alt="again" title="重新开始">
- 超链接标签(a)
<!--
a超链接标签
属性:
href:要跳转的页面网站
target: _blank:在新的页面打开
_self:在当前页面打开
mailto:QQ链接
-->
<a href="https://www.baidu.com" name="top" target="_blank">百度一下</a>
<a href="https://www.baidu.com">
<img src="../images/again.png" alt="again" title="重新开始">
</a>
<!--
锚链接
需要一个锚标记,用a标签的name属性标记
跳转需要用#+name属性
-->
<a href="#top">回顶部</a>
<!--
块元素:内容总是独占一行
行内标签:可以多个元素在一行
-->
- 列表(有序,无序,定义)
<!-- 有序列表 -->
<ol>
<li>Java</li>
<li>Python</li>
<li>C++</li>
</ol>
<hr>
<!-- 无序列表 -->
<ul>
<li>Java</li>
<li>Python</li>
<li>C++</li>
</ul>
<!-- 定义列表 -->
<dl>
<dt>语言</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C++</dd>
</dl>
- 表格标签(table)
<!--
表格标签
属性:
tr:行
td:列
border:边框
cellspace:属性值为0就是将单元个之间的竖线合并
-->
<table border="1px" cellspacing="0">
<tr>
<!-- colspan 跨列 -->
<td colspan="4">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!-- rowspan 跨行 -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
- 媒体元素(audio&&vadio)
<!--
vadio 视屏标签
src:视频地址
controls:控制播放
autoplay:自动播放
loop:循环播放
-->
<vadio src="" controls autoplay loop></vadio>
<audio src=""></audio>
- 页面结构分析
<header><h1>页面头部标签</h1></header>
<footer>页面脚步标签</footer>
<section>页面中的独立区域</section>
<article>独立文章内容</article>
<aside>相关内容及应用</aside>
<nav>导航类辅助内容</nav>
- iframe框架
<!--
iframe框架标签
属性:
src:路径
name:框架标识
frameborder:内联框架的边框
-->
<iframe src="https://www.baidu.com" name="" height="300px" width="300px" frameborder="0"></ifram>
- 表单标签(form)
<!--
表单标签
属性:
action:表单提交的位置,可以是网站,也可以是一个请求处理的位置
method:
post:url中看不到,在控制台中可以看到,比较安全,可以传输大文件
get:我们可以在url中看到我们提交的信息,不安全,高效
-->
<h1>注册</h1>
<form action="1.网页基本信息.html" method="post">
<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="password"></p>
<p><input type="submit" name="sub" value="提交">
<input type="reset" value="清空">
</p>
</form>
- 文本框和单选框(input,select,textarea)
<!--
input 标签:
属性:
type:指定元素类型,text,文本框
password,密码框
radio,单选框,这个时候name相同的就是单选的
checkbox,多选框,这个时候name相同的就是同一个多选框
submit,提交按钮
reset,清空按钮
file,文件域
hidden,隐藏域,将输入的东西隐藏
image, 图像按钮
button,按钮标签 也是name表示标签名,value设置显示内容
name:指定元素名字
vale:指定元素初值
maxlength:表示输入的最大长度
size:文本框长度
cheched:指定元素是否被选中
disabled:禁止选用
readonly:只能读
placeholder:文本框提示内容
required:非空提示
pattern:正则表达式
-->
<h1>注册</h1>
<form action="1.网页基本信息.html" method="get">
<p>名字:<input type="text" name="username" placeholder="用户名" required></p>
<p>密码:<input type="password" name="password" pattern=""></p>
<br><br>
<p>性别:<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<br><br>
<p>
爱好:<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="qiao" name="hobby" checked>敲代码
<input type="checkbox" value="play" name="hobby">打游戏
<input type="checkbox" value="gril" name="hobby">女
</p>
<br><br>
<!--
select下拉框
属性:
name,下拉框名字
-->
<!--
option标签,select的子标签
-->
<p>国家:
<select name="list">
<option value="li" selected>中国</option>
<option value="li">美国</option>
<option value="li">英国</option>
</select>
</p>
<br><br>
<!--
文本域
name,cols,rows
-->
<p>反馈:
<textarea name="text" cols="50" rows="10">文本内容....</textarea>
</p>
<br><br>
<!-- 文件域 -->
<p>
选择文件:
<input name="files" type="file">
<input type="button" value="上传" name="upload">
</p>
<br><br>
<!--
验证
通过type指定验证类型
email,url,number
可以指定:max,min,step
-->
<p>
邮箱:
<input type="email" name="email">
<br>
数字:<input type="number">
<br>
滑块:<input type="range">
</p>
<br><br>
<!-- 搜索框 -->
搜索:<input type="search">
<br><br>
<!-- 增强鼠标可用性 -->
<label for="mark">点我:</label>
<input type="txet" id="mark">
<p><input type="submit" name="sub" value="提交">
<input type="reset" value="清空">
</p>
</form>
总结
HTML的学习,主要是学习各个标签的作用以及网页的页面结构设计,各个标签要清楚标签的作用,同样,清楚美哥标签的属性值和属性值代表什么意思,也是很重要的,但是这个我们需要通过练习,慢慢记住,而不是需要死记硬背。