HTML基础知识

1.HTML基本结构

众所周知,HTML(Hyper Text Markup Language)称为超文本标记语言,是一种标记语言。那么快速入门HTML也是很非常容易,如下:

  大标签
	 头标签

		  标题
	
	 内容标签

	

2.大量标签

1.段落标签

2.换行标签(自闭和)

	

3.标题标签
从大到小变化:

4.表格
无序列表ul+列表项li
有序列表ol+列表项li
5.定义列表
dl 定义列表
dt 定义的标题
dd 定义的解释项
6.文字排版(括号里面为英文解释)
文本加粗b( bold)/ strong(强调)
文本斜体i(incline)/em(强调)(emphasize)
下划线u(underline)
删除线del (delete)
横线hr
上标sup
下标sub
big 大(文字)
small小
7.行与块元素
块元素
1.总是新起一行
2.可以包括块,行,文本
3.包括div p h1-h6 dl dt dd ol ul li 等
行内元素
1.和其他行内元素在一起
2.可以包含其他行内元素和文本
3.span i em b strong u del sub sup big small img a input button textarea等
8.规则
1.行内元素只能嵌套行内元素和文本
2.块元素可以嵌套 文本 块 行内
3.p,h元素通常只嵌套文本和行内
4.ol,ul最好直接子集是li
5.以上规则皆可以打破
9.特殊符号

	  空格
	<左尖括号 <
	>右尖括号 >
	©版权 ©
	& &

10.img:图片


代表图片1.jpg的地址
./代表当前html所在的目录
图片标签的属性 :
align:对齐
alt:替换图片文字
width:宽
height:高
11.a标签:链接
>href :链接地址
包括相对路径:
1相对于当前html文件的位置
2 ./开头 当前目录 (可以省略)
3 …/开头(两个点) 上一级目录
4 文件夹或者文件名/开头 (省略一个./)
和绝对路径:HTTP开头;/开头 网站的根域名
当链接的地址不是网页的时候,就是下载该文件
>target目标:
有两个属性: _self当前标签 _blank新标签打开
12.表格:table
属性有以下:
border :边框
width:宽度
height :高度
align对齐:left right center
valign 垂直对齐:top center bottom
cellspacing:单元格间距
cellpadding:文字到单元格(边框)的距离
bgcolor:背景颜色
rowspan:行合并
colspan:列合并
在表格标签里面添加下面属性会更美观:
(合并边框模型)


子元素:tr行,td列和th标题列,其中:
rowspan行合并
colspan列合并

一个完整的表格:


13.iframe标签
定义:在网页中引入其他网页
src 引入地址
width宽
height高
scrolling 是否滚动 yes/no
frameborder=“0” 框架边框为0
14.不可见标签

	
	让网页不乱码(指定元素信息,字符集=“万国编码”)
	
	
	style样式
		.red{color:red;font-size:48px;}

15.表单:form

method:post(更安全),get(提交页面时会看到提交的信息)


代表输入类型为文本,提示名为小明,文本最大长度为5


代表输入类型为密码(文本不可见)


		
		游泳
		
		看书
		
		玩手机

代表复选框类型,其中唱歌和跳舞不管点击图片还是复选框,都会框选中,游泳和看书需点击复选框才能选中,玩手机默认被框选

性别:
		

代表单选框,只能选其一,默认选择男


代表点击上传文件


代表下拉框,其中size设置一次显示两个,如果加上multiple,则会以滚动条形式选择


代表一个多行文本,rows设置行高,cols设置列宽


提交表单按钮


重置所有已填的表单为默认属性


代表一个普通按钮


代表图片按钮

3.各种属性

1.定义:修饰html标签(元素)
2.组成:属性名=“属性值”

 

3.title属性:鼠标的提示

4.style属性:元素的外观

5.class属性:元素的类名
规则:可以有多个,用空格隔开,可以重复

6.id属性:类似身份证
规则元素的唯一识别,有且只有一个

	

7.锚点:实现页面内容切换
定义

	

链接锚点




8.frameset:框架集(一般很少用)
frame框架
name 框架的名称
src 文件地址
属性:

		cols 列:% 百分比 数字 像素 *代表剩余的宽
		rows 行:% 百分比 数字 像素 *代表剩余的高
		noresize=“true”不允许拖动框架
		frameborder=“0”框架的宽度

9.图片热点区域
作用:形成不规则的链接区域,在图片里边画形状,创建区域链接
小建议:使用dreamweaver绘制热点区域更方便

	

写在最后

总结此文花费大量时间,建议收藏本文,以便后事之需,此外博主这里还有xmind形式的总结,更方便查看了解,有需要可以私聊,如果本文有差错,欢迎一起讨论,谢谢。

你可能感兴趣的:(前端大开发,html,html5,web)