HTML基础

来源:互联网 发布:淘宝联盟互刷 编辑:程序博客网 时间:2024/03/29 08:47

一、概念


HTML:超文本标记语言,顾名思义,超文本就是页面内可以包含图片、链接等非文字内容;标记就是使用标签的方法将需要的内容包括起来。


作用:编写网页。


特点:不需要进行编译,直接使用浏览器阅读即可。

      文件的扩展名是*.html或*.htm

      结构是由标签组成的,不区分大小写,标签由开始标签和结束标签组成,如果没有结束标签就已/结尾

      结构包括两部分:头head体body


二、排版标签


1)标题标签:<hn>内容</hn>n在1~6之间,n越大,标题越小


<h1>公司简介</h1>


2)水平分割线:<hr/> 属性:size noshade color width align


<hr/><hr></hr>

3)字体标签:<font>内容</font> 属性:size(最大为7) face字体 color


<font color="red">向着光亮那方</font>

4)换行:<br/> 若键盘上的回车,只产生一个空格


<br/>

5)段落:<p>内容</p> 这就是一段


<p>偶尔走在北京的人海里</p>

6)粗体:<b>  斜体<i> 下划线<u>


三、图片标签


src:图片位置  title:鼠标悬停时显示  alt:图片加载不出来时显示


<img src="../img/header.jpg" title="天气预报" width="200px" height="50px" alt="未加载出来"   />

四、超链接


href:要链接到的网页

target:打开方式(_blank:新打开一个网页 _self:在本网页上打开 _parent:打开父网页)


<a href="http://www.baidu.com" target="_blank">百度一下</a>

五、列表标签


有序标签:ol type :1 a A i I   li:代表一项


<ul type="square"><li>你好</li><li>我好</li><li>大家好</li></ul>

无序标签:ul type:desc circle square


<ol type="i"><li>昨天</li><li>今天</li><li>明天</li></ol>

六、表格标签


table:属性:border width cellspacing:单元格间距离  cellpadding:单元格与内容间距离 bgcolor

th:表头

tr:行

td:列  rowspan:合并行  colspan:合并列  nowrap:是否折行


<table><tr><td>关于我们</td><td>配送方式</td><td>服务声明</td></tr></table>

七、框架集标签


框架集:frameset将不同页面组成一个页面,不可与body共存,可以嵌套使用

        rows:上下结构   cols:左右结构   rows或cols可以用确定像素或*或百分比表示


主页面:


<frameset rows="200px,*"><frame src="top.html"/><frameset cols="300px,*"><frame src="middle.html"></frame><frame src="bottom.html" name="bot"/></frameset></frameset>


middle.html页面:


<!--点击此页的超链接后在name="bot"的页面中显示链接内容--><a href="https://www.baidu.com/" target="bot">百度一下</a>

八、form


form:提交数据需有表单,数据必须放在表单中

action:提交到服务器位置 #:本页面

method:提交方式

        get:提交数据会以键值对的形式拼接在地址栏中,键值对间用&隔开,第一个用?隔开,长度有限

        post:数据不会显示到地址栏,长度任意


input控件:


<form action="#" method="get"><!--text:直接显示输入的文本-->用户名:<input type="text" name="username" value="222" size="30" readonly="readonly" /><br /><!--password:以密码形式*存在-->密码:<input type="password" naem="password" maxlength="5"/><br /><!--radio:单选按钮-->性别:<input type="radio" name="sex" value="0" checked="checked"/>男  <input type="radio" name="sex" value="1"/>女<br /><!--checkbox:以多选框形式出现-->兴趣爱好:<input type="checkbox" name="hobby" value="0"/>吃饭<input type="checkbox" name="bobby" value="1"/>睡觉<input type="checkbox" name="bobby" value="2"/>打豆豆<br /><!--file:以上传文件形式出现-->照片:<input type="file" name="picture"/><br />验证码:<input type="text" name="againNum" disabled="disabled"/> <input type="image" src="../img/logo.gif" /><br /><!--submit:将整个页面内容提交到服务器--><input type="submit" value="注册"/>reset:恢复最开始状态,不等于清空<input type="reset" value="重置"/><br /></form>

textarea控件:cols rows name value为标签里内容


<!--文本输入框--><textarea cols="40px" rows="10px" name="text"></textarea><br />

select控件:下拉框 name multiple(多选择) size(显示个数)

            option下拉选项 value selected(默认选项)


<!--选择框--><select name="select" multiple="multiple" size="3"><option value="0">小学</option><option value="1" selected="selected">初中</option><option value="2">高中</option></select>

小结:

HTML页面是网页中最简单的,也是我们今后学习网页的基础,每个知识点都比较琐碎,所以更加需要在实践中多敲代码,多应用。


                                             
0 0