HTML基础

最新推荐文章于 2024-05-15 21:37:17 发布

转载最新推荐文章于 2024-05-15 21:37:17 发布 · 188 阅读

HTML 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML的基本概念，包括HTML文档的组成、标签的使用、元素的定义等，并提供了常用的HTML标签汇总及其应用场景。


1.什么是HTML
是一种标记语言，不是编程语言
HTML文档（网页）由HTML标签和纯文本组成
文档和页面：HTML文档一般是指含有HTML源代码的纯文本文档，而页面一般是指被浏览器渲染后的最终画面
一个静态的HTML文档，其后缀名为.html或者.htm，实际工作中，约定为.html


2.HTML标签（tag）
是富有含义的标记
有一个开始标签，一定有结束标签,或者自关闭
标签可以进行嵌套
标签包含0个或多个属性
实际工作中，约定：
标签是小写字母（<div> 而不是<DIV>）
如果没有结束标签，要在开始标签末尾加上斜杠


3.HTML元素
开始标签、结束标签以及他们所包围的内容，形成一个HTML元素


4.HTML编辑器
编辑器使用文本编辑器即可，为了和宿主（服务端）语言陪客，可以选择Visual Studio或者Eclipse，Hbuilder来进行开发
调试浏览器：带控制台的Chrome和firefox浏览器
良好的HTML代码书写习惯是：
标签对称着写，防止忘记闭合标签
标签的属性的值一定要用引号包围
HTML代码按块进行层次分明的缩进，学会使用编辑器进行格式化


5.HTML标签汇总
head节点：
link、meta、title、style、script

body节点：
排版、段落：div、table、span、p、h系列

列表：ul、ol、li

定义列表dl、dt、dd

表格：table、tr、td、th

超链接a标签，图片标签img，label

表单：form、input、textarea、select、option、button

框架：frameset iframe


6头部标签

head节点：
link：引用外部的CSS文件，href type，rel： stylesheet
meta：常用属性name，content， http-equiv
title:用于描述页面的标题
style:用于为页面创建内部样式表
script:用于页面创建内部JS代码，或者引用外部的JS文件，type：text/javascript，src：外部脚本文件的URL


7.DIV标签
语义：定义文档中的一个独立的区域或章节，块级元素
div是最常用的布局标签
如何把握div布局和table布局： 
table只用于展现数据
div负责总体结构，table可以用于局部的、与表格有关的区域
防止过度div（divitis


8.Span和Label标签
span语义：和div一样是弱语义的，多种用途，是行内元素，一般是作为CSS的包含块，来为某段内容添加不一样的样式
label语义：和span都是行内元素，而label一般用来标注input项，label的for属性来关联input，这样，点击label文字时，会自动focus关联的标签。
每个表单控件都应该有一个关联的label，特别是单选、复选按钮，这是个提高用户体验的好习惯


9.h和p标签
h语义：作为章节的标题，不同的级别对应章节的重要性或着文档的层次关系，外观上看h系列的区别是字体大小，但我们更注重其“重要性”，h1~h6的重要性以此减弱。
p语义：段落，块级元素,一般用在文章的正文，如果用在站点本身，最好设置一下样式


10.img标签
img语义：图像，自闭和标签，行内元素
常用属性：
src：指定图片所在的URL
alt：替代文本，在图像加载失败时会显示（为重要图片，比如站点的logo，加上合适的alt说明，是个好习惯）
Web的图像格式一般有：JPEG、GIF、PNG
JPEG：适合展现照片或颜色较丰富的图片
GIF：适合展现颜色较单纯的小图片，具有支持动画的特性
PNG：具有背景透明的特性，应用广泛（虽然gif图片也有背景透明的特性，但显示效果实在让人无法接受



11.超链接a标签
a语义：锚标签，用于处理链接
常用属性href：指定用户点击链接时跳转的URL
跳转URL中通过设置#id，可以跳转到页面中相应id元素的位置，#后不加任何id，则跳转到页面顶端
a标签的内容如果是图片（img），这默认带有边框，可以通过css设置改变其样式
target:属性是打开连接的目标窗口


12.列表标签
ul语义：无序列表，最常用的列表，块级元素，其子元素只能是 li 
ol语义：无序列表，最常用的列表，块级元素，其子元素只能是 li


13.dl、dt、dd标签
语义：定义列表元素dl，必须至少包含一条术语（dt）或一条说明（dd），dl只能包含dt和dd，块级元素
dt 作为术语，只能包含纯文本或行内元素，一句话的事
dd 作为对术语的说明，是块级元素


14.表格标签
table语义：表格table包含了若干行（tr），每行包含若干单元格（td），如果是重要的单元格，可以用标题行（th）


15.表单标签
form语义：定义一个用于接收用户输入的区域，块级元素
必须指定action属性，指定该表单后台处理器的URL
可选属性method，两个值：get/post，
target:目标窗口


16.input标签
语义：由type属性来决定类型的元素，行内元素
常用属性：type、alt、checked、disabled、readonly、tabindex、value
文本框、按钮、单复选按钮、文件上传 
input标签的type属性取值：
type=“text”：单行文本框
type=“password”：密码框
type=“checkbox”：复选框
type=“radio”：单选框
type=“file”：文件上传
type=“reset”：表单清除
type=“button”：普通按钮
type=“image”：图像按钮
type=“hidden”：隐藏控件
type=“submit”：提交按钮
type=“email”：电子邮件(H5)
type=“date”：日期(H5)
type=“datetime“ :日期和时间(H5)


17.textarea
语义：多行文本框，块级元素
常用属性：
cols：决定了宽度
rows：行数，决定了高度


18.select
语义：下拉列表框，行内元素
添加属性值multiple=“multiple”可以把它变成多选下拉框
添加属性值selected=“selected”设置默认选中的项
option标签：备选项标签， value是表单值，text是显示的文本


19.框架
frameset语义：窗口框架，用来分隔浏览器为多个页面
iframe是网页内部内嵌的窗口

<html>
<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>
</html>