一、HTML介绍
HTML即超文本标记语言：HyperText Markup Language
##1、HTML基本页面结构
一个HTML文件是由一个又一个的标签嵌套组合成的文档，
每个标签我们又称为元素
<!doctype HTML>
<html>
<head>
<title>标题</title>
</head>
<body>
//主体部分
</body>
</html>
二、HTML标签
1、标签列表
由于HTML标签过多不一一列举，附上来自菜鸟教程的详细标签列表：常用标签列表
2、标签基础属性
（1）HTML标签一般具有开始和结束标签
eg：<body>*******</body>或<Script ************* />
或者也可以在标签结束时添加
（2）标签的属性
class：为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id：定义元素的唯一id
style ：规定元素的行内样式（inline style）
title：描述了元素的额外信息 (作为工具条使用)
在form表单中还会常用到Value属性，个人理解value一般为显示在客户端的文字
（3）标签的使用
在HTML中如果一个组件元素同时使用 id style class ····
那么：标签内Style > ID > Class>页面内Style
其中 >（大于号）为优先级
（4）常用标签及其使用
图片：
Html中使用img标签可以在页面中定义一个图片
而area标签可以在图片中定义可点击触发事件的区域
eg:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"></map>
该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
`
表格：
HTML中使用Table标签创建一个表格
基本结构类似于HTML的结构分为头部（thead）、身体（tbody）、尾部（tfoot）。
以上图片转载自菜鸟教程。
补充：可以通过设置rowspan和colspan属性来跨行、跨列。
（5）行内元素及块级元素
1. 关于行内元素和块状元素的说明
块级元素：会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；其默认 display 属性值为 “block”。
行内元素：则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的；其默认 display 属性值为“inline”。
2、常见的行内元素和块状元素
块元素 ：
div — 常用块级容易，也是 css layout 的主要标签
form — 交互表单
h1-h6 — 标题
table — 表格
ul — 非排序列表
行内元素:
a — 锚点
big — 大字体
textarea — 多行文本输入框
img — 图片
input — 输入框
label — 标签
在除了行内元素和块级元素外还有一种可变的元素，他们可根据上下文语境决定该元素为块元素或者内联元素。主要有：
button —按钮
iframe —inline frame
ins —插入的文本
map — 图片区块 (map)
行内元素和块级元素转换
display:block; (字面意思表现形式设为块级元素)
display:inline; (字面意思表现形式设为行内元素)
最后关于行内元素及块级元素我会整理到后面CSS内 因为在设置一些元素的inline-block属性时会涉及到float浮动。
扫一扫
2404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
