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页面是网页中最简单的,也是我们今后学习网页的基础,每个知识点都比较琐碎,所以更加需要在实践中多敲代码,多应用。
- HTML 基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- html基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- HTML基础
- HDU 5739(点双连通)
- UIP协议栈UDP数据发送的问题
- 数据结构课程设计-图书管理开发系统
- 网络程序设计课程学习心得总结
- 联想手机权限开启方法3
- HTML基础
- 为什么抛硬币只会出现三种情况?
- 大神博客,膜拜
- pcl1.8.0+QT5.7.0+vs2013 win7 x64环境配置以及第一个小程序实现
- FileZilla Sever软件在局域网内共享文件
- jQuery.getJSON与PHP 实现跨网站提交数据
- Set-based Similarity Search for Time Series
- crontab 命令详情
- c#的sealed修饰符