学习计算机语言很久了,最近看到自己曾经做的笔记,感慨良多,期间记录了我的点滴学习。希望对大家有点帮助。
这个是HTML的笔记。
1.1、HTML的用途:HTML是用来制作网站的
HTML是Internet上用于设计网页的主要语言,网页可以由文本,图片,动画等内容组成,基础架构都是HTML. 从事网页制作或者相关工作,就要学习HTML 。
HTML是“HyperText Mark-up Language(超文本标记语言)”的缩写。
1.2、开发HTML
需要使用HTML编辑工具开发HTML页面:
一:基本文本编辑软件: 如记事本、Editplus等。
二:所见即所得软件:如dreamweaver 等。
2.1、标记(标签)
HTML用于描述功能的符号称为“标记”。如“HTML”、“BODY”、“TABLE”等。
标记是由W3C组织定义好的并具有特定的含义的符号.
格式:
标记在使用时必须用尖括号“<>”括起来,而且是成对出现,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。
所以应当遵循:<开始标签> 标签体 </结束标签>
特点
标签的特点:不区分大小写,标签名是固定的。
例如<TABLE>表示一个表格的开始,</TABLE>表标一个表格的结束。如<TABLE>和<table>都是表示一个表格的开始。不区分大小写。
2.2、标签属性
写在开始标签上的,格式是: 名=“值”对代表该标签的属性 <font color=“yellow”></font>。
一个标签可以有多个属性,多个属性之间使用空格隔开。(长宽高之类的)
注意:属性值最好使用单引号或者双引号引起来。
<font color="red">你好</font>
注意事项:
1:所有标记都要用<> 尖括号括起来;
2:成对出现的标记;
3:HTML中不区分大小写;
4: 标记中不要有空格;
2.3、HTML的正文和注释
<html> 与 </html> 之间的文本描述网页
<head> 与 </head> 之间的用于定义文档的头部
<title> 与 </title> 定义文档的标题
<body> 与 </body> 之间的文本是可见的页面内容(body里边的background属性可以有:背景色,背景图之类的)
<p> 与 </p> 之间的文本被显示为段落
<!-- 注释 -->
2.4、标题、段落、上下标、换行,原样输出、线条、文本列表、转义字符(teshuzifu)
<h1> - <h6> 标签可定义标题<h1> 定义最大的标题。<h6> 定义最小的标题。
<p> 标签定义段落。p 元素会自动在其前后创建一些空白。
使用 blockquote 元素的话,浏览器会插入换行(两个br)和外边距( ),而 q 元素不会有任何特殊的呈现。
Superscript 上标 2<sup>3</sup>=8——>表示的是2的三次方等于八。
Subscript 下标 x<sub>1</sub>=1——>表示x等于1。
<br> 回车换行<br> 可插入一个简单的换行符。br标记没有任何内容,作用就是换行,所以是空的.由于没有内容所以只写一个<br>即可。
pre 元素可定义预格式化的文本,原样输出
水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分,可以通过属性设置线条的颜色,粗细,宽度,对齐方式.color="#FF0000" size="5" width="400" align="left"
列表标签:<dl>
<dt>:上层项目
<dd>:下层项目
列表中项目符号对应的标签
<ul>:符号标签(○●■)
<ol>:数字标签(a A 1 i I)
<li>:具体项目内容标签。此标签只在<ol> <ul>中有效。
<ul> 默认的是●
通过type属性更改项目符号可以更改项目符号,分别显示○●■
2.5、表格
<table>标记表示表格,以<table>开始以</table>结束
<caption>标题标签,给表格提供标题。
<th> 表头标签 一般对表格的第一行或者第一列进行格式化,就是粗体显示。
<tr> 行标签
<td> 单元格标签, 加载行标签的里面。可以简单理解为,先有行,在行中在加入单元格。
常用的属性
border 表格的边框
width 宽度
height 高度
align 对齐方式 left左对齐 right右对
齐 center 居中
th 用作表头标签
rowspan 合并行,上边合并下边
colspan 合并列,一般是右边合并
2.6、表单
作用:用于采集用户输入的数据,提交给后台程序处理。
<form> 表示一个表单。
常用的属性:
Action:表单提交到的地址
method:提交方式
get:提交的数据会放到地址啦上
get提交的数据不能超过1kb(只适合于一些简单的数据)
post:提交的数据不会放到地址栏上
post提交的数据没有限制(文件上传用post比较好)
<input type="text"> 单行输入域
<textaera><textaera/>
value属性 该输入域的默认值,一般是4-10位的字符
name 这个是必须填,该name的属性值是用于给后台程序获取该标签的内容
<input type="password"> 密码输入域,使用一个非明文的效果获取用户输入的数据
value 同上
name 同上
<input type="radio"> 单选按钮
注意:如果是同一组的按钮的单选选项,就是用相同的name属性值
<input type="checkbox"/> 多选按钮
<input type="hidden"/> 隐藏域 特点:不会显示到HTML页面上
属性:name属性就是后台程序获取的标记
这个value值就是发送给后台程序的内容。
<select name="籍贯"/> 下拉选项
name属性就是后台程序获取的标记
下拉选项的option标签中的value属性值一定要填,这个value值就是发送给后台程序的内容。
<option value="广东">广东<option/>
<input type="file"/> 文件选择器
<input type="submit"/> 提交按钮
属性:name
提交按钮,点击这个按钮,form中的全部数据就会发送到后台。
value:表示按钮的显示文本。
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮
点击这个按钮,form中的数据返回到初始状态。
2.7、超链接
格式:超链接格式: <a href="e:/itcast/a.html"></a>
链接到其他文档:href 属性的值是连接目的页面的地址.<a href="http://www.baidu.com">百度一下</a>
<a>标签的属性title
title 属性的值能够描述连接的目的页面.<a href="http://www.baidu.com" title="使用百度搜索引擎">百度一下</a>
该属性指定连接指定的页面应当以和汇总方式在哪一个窗口中打开,如果想要再新窗口中打开,需要经target属性的值设置为_blank。target="_self"默认。在相同的框架中打开被链接文档。
锚链接:<a name=“标记名”></a> 和 <a href="#标记名"></a>
普通的连接,连接会从一个页面到达另外一个页面.如果页面很长,希望连接页面的特定部分.就可以使用锚链接。
2.8、图像标签
使用<img> 标签将图像添加到网页中,该标签要使用src属性指定图片的来源,并且需要附带alt属性. alt属性是用于,当用户加载图片失败时显示的文字信息.
图像标签格式: <img src="" alt="“ title=“” width=“”/>
1.src属性
a)src=”url”;
可以是相对路径也可以是绝对路径.
2.alt属性
图片说明,由于浏览器无法下载图片,找不到图片,就会显示该信息.
3.align属性
图像的对其方式,
left right top 等
4.border属性
指定图像的边框的宽度,以像素为单位
例如 border=”2”;
5.height和width属性
指定图像的高度和宽度,以像素为单位
height=”100”
width=”50”;
1. 图像地图:<map>
应用:当要在图像中选取某一部分作为链接的时候。如:中国地图每个省所对应的区域。
map标签要和img标签联合使用。Href是超连接
<img src="Sunset.jpg" alt="图片说明文字" usemap="#Map" />
<map name=”Map”>
<area shape="rect" coords="50,59,116,104" href="1.html" />
<area shape="circle" coords="118,203,40" href="2.html" />
</map>
2.9、框架
属性:cols:按照列的方向划分
rows:按照行的方页面例和长度
*表示其他框架分配完剩下的比例
表示的是一个框架,框架中包含一个html
有2个或2个以上的frame页面,框架的位置放在body外面(注意:否则无法显示)
超链接target属性还可以指定一个frame的名称,如果指定的是一个frame的name,那么在指定的这个frame就会显示。(target是一个打开方式)
src表示的是框架内包含的页面
1)一个页面包含在一个frame标签中
2)有两个或者两个以上的frame就需要放在frameset中
方向一般是两个;从上往下,从左往右
例如:
<frameset>
<frame src="头部页面.html"/>
<frameset>
<frame src="左边页面.html"/>
<frame src="中间页面.html"/>
<frameset/>
<frame src="底部页面.html"/>
<frameset/>
画中画标签:<iframe>
<iframe src=”1.html” >
很遗憾,画中画你没有看到,因为你的浏览器不支持iframe标签。
</iframe>
属性: src="../success.html" frameborder="1" height="300" width="400" scrolling="no"
框架标签现在不是很常用,布局都用div+css+table。框架很少使用了。
HTML 和XHTML的区别和联系
HTML语法要求比较松散,这样对网页编写者来说,比较方便,但对于机器来说,语言的语法越松散,处理起来就越困难,对于传统的计算机来说,还有能力兼容松散语法,但对于许多其他设备,比如手机,难度就比较大。因此产生语法要求更加严格的XHTML。
XHTML扩展超文本标签语言(The Extensible HyperText Markup Language )XHTML 的目标是取代 HTML。但是Internet上用HTML写的网页太多,无法替代。XHTML 与 HTML 4.01 几乎是相同的。XHTML 是更严格更纯净的 HTML 版本。同时XHTML 是一个 W3C 标准。
XHTML和HMTL最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
XHTML 元素必须被嵌套于 <html> 根元素中
---------------------
作者:datangjinglei
来源:CSDN
原文:https://blog.csdn.net/datangjinglei/article/details/79254329
版权声明:本文为博主原创文章,转载请附上博文链接!