什么是HTML
1. HTML(英文:HyperText Markup Language):即超文本标签语言
2.HTML标签是包含一些标签的文本文件
3.这些标签告诉浏览器如何在页面上显示
这里还是要推荐下小编的web前端学习 群 : 687958461,不管你是小白还是大牛,小编我都欢迎,不定期分享干货,包括 小编自己整理的一份最新的web前端资料和0基础入门教程,欢迎初学和进 阶中的小伙伴。在不忙的时间我会给大家解惑。
编写一个最简单的HTML文件
1.新建一个文本文件并打开,输入如下代码:
<html>
<head>
<title>这是页面标题</title>
</head>
<body>
这里是页面内容
</body>
</html>
2. 保存该文件并修改文件名后缀为.html或.htm
3. 双击该文件然后浏览,可以看到标题和内容分别显示了出来
例子解释
1.html标签是用来标记html元素的
2.html标签成对出现<xxx></xxx>
3.在两个标签之间的为这个标签下的内容
4.html标签的名称是固定的,如上面的html、head、title、body等等,不同的标签有不同的意义
基本的html标签
1.html、定义html文档,所有的html标签都必须在html标签对内
2.body、定义文档的主体,即显示内容
3.<!—注释-->、注释
4. <br />、换行
注意事项
html标签应该使用小写,因为在最新的标准中都要求标签使用小写
什么是HTML元素及其属性
在用户浏览网页时,页面会有链接、输入框、下拉列表等功能控件,而这些控件对应的是固定的html标签,有了这些标签,浏览器就知道要呈现什么给用户了。
而每个元素都有自己的属性,比如一个链接需要链接到哪个页面上去,就是通过设置链接的href属性来实现的,不同的属性有不同的意义,例:<a href=”…”>链接文本</a>
HTML主要元素及其属性:
一、链接<a>
1. html使用<a>来创建链接到另一个文档的链接
2. target属性:以何种方式打开链接
a) _blank、以新页面的形式打开链接
b) _self、在自身打开新链接
c) _top、在最顶层打开链接
3.id属性:链接名称
4.href属性:设置链接指向的地址
例:<a id=”link” name=”show” taget=”_blank” href=”…”></a>
二、框架<frameset>
1.使用<frameset>可以在一个窗口中载入多个不同的页面,也就是显示多个页面
2.框架分垂直框架与水平框架
3.<frameset>定义如何将窗口分割为框架
a) rows/cols定义了行/列所占据的屏幕面积
b)不能将body与frameset同时使用
c)<frame>框架标签,定义了框架集下的某个单个框架
i. Src定义链接地址
ii. noresize=”noresize”,属性可使边框不可被拖动
iii. frameborder属性定义是否显示边框
例:
<frameset rows="20%,*">
<frame src="http://www.hao123.com" noresize="noresize" />
<frameset cols="50%,50%">
<frame src="http://www.hao123.com" />
<frame src="http://www.hao123.com" frameborder="0" />
</frameset>
</frameset>
<noframes>
<body>不支持框架</body>
</noframes>
三、内联框架或叫浮动框架<iframe>
1. iframe框架同上面的框架一样通过window.Frames[]集合访问
2. src定义链接地址
3.width/height、定义frame的宽度高度
4.scrolling、定义滚动条
5. frameborder、定义边框
例:<iframe src="…" frameborder="0" scrolling="auto" width="500px" />
四、表格<table>
1. <table>定义表格
a) cellpadding、单元格内容与边框间的补白
b) cellspacing、单元格间距离
c) style、定义表格样式
2. <tbody>定义表格主体,注意一般不使用,但是在.net中gridview生成的表格会有<tbody>,请注意
3. <tr>定义行
4. <td>定义单元格
例:<table width="200" border="1" cellspacing="10">...</table>
五、列表
1.<ul>、无序列表
2.<ol>、有序列表
3.<li>、列表项
例:看了结果才知道
<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</div>
六、表单<form>
1.<input>输入:type、定义文本域的类型:(button:按钮、checkbox:复选框、file:上传文件、hidden:隐藏、password:密码、radio:单选框、reset:重置、submit:提交、text:文本)
2. <textarea>多行文本
3. <select>定义一个选择列表
4. <option>定义下拉列表中的选项
七、图片<img>
1. src、图象地址
2. alt、替换文本








网友评论