HTML初级知识及技巧
作者:Muggle
1.什么是HTML
HTML 是超文本标记语言,通俗的说这种语言的功能是将后台处理的相关数据(文字,图片,音频,视频)用标签引用起来 形如<标记>文本,图片,音频,视频 </标记>。这些超文本标记语言可以被浏览器解析执行,解析完成后,形成一个页面,更容易被用户接受。
HTML语法结构分为!DOCTYPE部分,head部分和body部分;!DOCTYPE部分的功能是告诉浏览器这个HTML文件该按那个版本解析;head部分的功能是定义页面和其元素的相关属性,标签里面的参数一般用于告诉浏览器解析前的配置,这些配置一般可以通过meta(元标签)标签来配置。body部分为网页的主体部分,页面上需要呈现的内容都写在这一部分。一个简单的 HTML文档,拥有尽可能少的必需的标签。
如果你是一个HTML的初学者,那么我建议用HBuilder这个开发工具来编写程序。因为HBuildre这个软件是免安装的,解压直用,不需要配置什么东西,对初学者来说是很友好的,下面提供下载链接地址:https://pan.baidu.com/s/1qYl3uNi。每篇作文图1是HBuilder的界面及HTML的结构,简单介绍一下每句代码的含义
<!doctype>告诉浏览器按HTML的哪个版本来解析你的文件HTML ,HTML发展至今已经是第五个版本了,那么浏览器怎么知道你想让它按哪个版本来解析呢?没错,就是通过这个标签来实现。<!doctype html>这句代码的意思是
浏览器按照HTML5这个版本解析,让浏览器按照不同版本解析后面接不同代码,这里不一一例举。<meta charset="utf-8" />这句代码表示页面编码方式按utf-8,中文页面一般用utf-8,因为utf-8可以编码中文,head部分还包括seo优化,seo优化通俗的讲就是在别人搜索相关网页的时候让你的网页尽量靠前,下面介绍两个代码
<meta name="keywords" content="..." /> 和<meta name="description" content="..." />。第一keywords,在content中写入你的网站关键字,那么在别人搜索网页时,如果输入关键字和你的网页关键字相似度很高那么你的网页就靠前显示;<meta name="description" content="..." />在content中写入网站的描述,其功能和keyword一样,<title></title>用于设置页面标题,将标题用titie标签包住如——<title>设置页面标题</title>
图 1 HBuilder的开发界面及HTML的结构
2.标签的分类
2.可以设置宽高的
div:div是无语义标签(没有任何标签意义),一般作为容器使用,主要用于布局。
无语义是相对于有语义来说的。
h1-h6:用于显示标题
辅助快捷键(Hbuilder)
ol>li+tab
ol>li*3+tab
div{我是div$}*3 + tab
ol:有序列表
ul:无序列表
dl:定义列表
table:表格,表格是由行构成的,行是由列(单元格)构成的
<!--第一行-->
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
<!--第二行-->
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
</table>
1.在一行内显示,如果一行中的剩余空间不足,行内标签会被挤到下面一行显示
2.内容撑开宽高,不能设置宽高。
默认情况下,行内标签在一行内并排排列,默认多个行内标签之间是有间隙的。这个间隙是如何形成的?
间隙是编写代码时由回车换行引起的(大家可以试一下输入回车键和不输入回车键span标签之间的间隙)。
无语义标签,一般作为容器使用。
img:显示图片(有src alt title三个参数可以设置src设置图片地址,alt设置图片加载失败时的提示文本,title设置鼠标悬停在图片上时的提示文本)
img可以设置宽高的,那么原因是什么呢?因为img是可替换标签。
可替换标签:标签显示的内容是由属性决定的,而不是由内容决定的标签,我们称之为可替换标签,可替换标签是可以设置宽高的。
(普通标签)<span>aaa</span>
(可替换标签)<img src="123.png"></img>
表单相关
<form action="" method="post">
</form>
action:把表单提交到后台的处理程序
method:表单提交的方式,post提交,get提交
form是块标签
input相关(添加文本框,按钮,点选勾选项。)
type:
text:文本框 password:密码框 radio:单选功能(通过相同的name来实现单选)checkbox 复选框(通过相同的name来复选)file 文件上传 hidden 隐藏属性 submit 按钮 reset 重置 button 按钮(不常用) textarea多行文本 select>option(selected)