自学_HTML<一>
HTML
HTML(HyperText Markup Language):描述网页长什么样子、有什么内容的一个文本。查看网页的描述内容(HTML)的方式:使用IE浏览器的话,在网页上点击右键,选择“查看源文件”。
主要构架
<html>
<head>
<title>我的第一个网页</title>
</head>
<body bgcolor="red" background="bg.jpg">
Hello world
</body>
</html>
所有内容都在
<html></html>
标签之内;<head></head>
内放的是头部信息,是对页面的描述,不会直接显示在页面中,<head>
内的<title>
中设置的是页面的标题,<title>
只能放在<head>
中;<body>
是页面的主体,大部分显示内容都定义在这里;<meta>
标签,<meta>
有指定name和指定http-equiv两种用法,<meta name="名字" content="值" />、<meta http-equiv="名字" content="值" />
两种用法<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
指定网页编码<meta http-equiv="Refresh" content="3" />
三秒钟后刷新此网页<meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" />
三秒钟后重定向到新网页。发帖成功后提示“发帖成功,即将转向帖子查看页面”<meta http-equiv="Cache-Control" content="no-cache" />
禁止浏览器缓存页面
基本语法
<h>
:标签,HTML
定义了<h1></h1>
到<h6></h6>
六个h标签,分别表示不同大小的字体。<br>
:回车<p>
:分段。<p>
前后会有比较大的空白,而<br>
则没有。<center>
这是居中</center>
居中显示<b>粗体</b>
:粗体<i>斜体</i>
:斜体<font></font>
:字体标签,<font color="red">红色</font>
<font size="30" color="red">红色</font>
特殊字符:
<
;(小于号,less than);>
;(大于号,greater than); 
;(空格,no-break space)<hr>
: 横线 color size width align=left,center,right<pre>
:预格式化 保持本色<body bgcolor="#006699">
背景颜色<a href="http://www.rupeng.com">如鹏网</a>
超链接<a href="http://www.rupeng.com"><img src="http://www.rupeng.com/forum/templates/uchome/images/logo.gif"/></a>
镶嵌图片;- “/”表示网站根目录,“../”表示父目录,“../../”表示父目录的父目录
- 将
<a>
的target属性设定为"_blank"就可以在新窗口中打开超链接。 - 锚记:用name属性为
<a>
起名字:<a name="Last">这里是最后</a>
。这样可以通过<a href="#Last">转到平台</a>
来跳转到超链接的部分。去往评论、回到正文
<img src="a.jpg"/>
注意图片是链接的,不是插入的,所以如果Src指向的文件不存在了,就看不了了。- alt: 图片无法显示时的显示文本,鼠标方式去也会有悬浮提示“点击查看大图”
- border属性指定边框,border="0"不显示边框
- width、height属性指定图片的显示大小,如果不指定则是图片的原始大小
- 不要以为把bmp后缀改为jpg就是改文件格式了
- 如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下width、height来缩小,因为仍然会下载大图,会使得加载速度很慢。
列表:
<ul><li>灌水区</li><li>版务区</li><li>原创贴图</li></ul>
。无序列表。- 有序的列表
<ol></ol>
- 有序的列表
表格:
<table></table>
为表格,在内部通过<tr>
创建行,<tr>
内部通过<td>
创建单元格。可以将table的border属性设为0来隐藏表格线。- 填充、间距Cellpadding内容和表格边线之间的距离 cellspacing单元格之间的间距s
<tr>
的属性:align,水平对齐,可选值left、right、center;valign,垂直对齐,可选值top、middle、bottom。<td>
也有align和valign。<tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>
:子标签默认继承父标签的属性,如果自己单独指定了属性,则会覆盖父标签的属性。- rowspan、colspan进行单元格的合并
- 表头的td可以用th代替,这样就会表头粗体、居中显示
表单:
<form>
标签为表单标签。如果要把数据提交到服务器,则需要将<input>
、<textarea>
、<select>
等表单元素放到form中<input>
是主要的表单元素,type的可选值:submit(提交按钮)、button(普通按钮)、checkbox(复选框)、file(文件选择框)、hidden(隐藏字段)、image(图片按钮)、password(密码框)、radio(单选按钮)、reset(重置按钮)、text(文本框)。<input type="file" />
- submit:点击submit按钮表单就会被提交给服务器,中文IE下默认按钮文本为“提交查询”,可以设置value属性修改按钮的显示文本
- text:size属性为宽度,value为值,maxlength为可以输入的最大长度,readonly只读。
<input type="text" readonly/>
(只写属性名,不写属性值)或者<input type="text" readonly="readonly" />
- checkbox:checked属性表示是否被选中,
<input type="checkbox" checked />
或者<input type="checkbox" checked="checked" />
(推荐)checked、readonly等这种只有一个可选值的属性都可以省略属性值。 - radio:相同name属性的为一组,不同radio设定不同的value值,这样通过取指定name的值就可以知道谁被选中了,不用单独的判断。
- file:使用file,则form的enctype必须设置为multipart、form-data、form method属性为POST(*),get。get:少量数据,post:大量数据。
<form action="Default.aspx" method="post"></form>
- image:使用src属性指定图片的地址,用来实现美化的“登录按钮”。
- Reset:重置
<select>
:用来创建类似于WinForm中的ComboBox或者ListBox- 如果size属性大于1就是ListBox(size的值为显示出来的列表数量),否则就是ComboBox。
<select multiple>
或者<select multiple="multiple">
(推荐),那么就是可以多选的ListBox。- select中的项是
<option>
,<option>北京</option>
还可以设定项的值<option value="1">北京</option>
。 - 将一个option设置为选中:
<option selected>333</option>
或者<option selected="selected">333</option>
(推荐)就可以将这个项设定为选择项 - 如何实现“不选择”,添加一个
<option value="-1">--不选择--<option>
,然后编程判断select选中的值如果是-1就认为是不选择。 - select分组选项,可以使用optgroup对数据进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都适用。备注
<textarea>
多行文本(也是表单元素):<textarea>文本</textarea>
,cols、rows属性表示行数和列数。<label>
:在<input type="text">
前可以写普通的文本来修饰,但是单击修饰文本的时候input并不会得到焦点,而用label则可以,for属性指定要修饰的控件的id,<label for="txt1" >asdfad</label>
- 为被修饰的控件设置一个唯一的id
<label for="ma">婚否</label> <input id="ma" type="checkbox" />
fieldset:GroupBox效果,将控件划分一个区域,看起来更规整
<fieldset>
<legend>常用</legend>
<input type="text" />
</fieldset>
滚动文字
<marquee>
scrolldelay控制速度播放声音、显示flash,
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="700"
<param name="movie" value="light-bot-2205.swf" /
<param name="quality" value="high" /
<embed src="light-bot-2205.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="700"></embed
</object>
调用wmp的插件
<embed src="coder.mp3" loop=true autostart=true name=bgss width="460" height="68">
只能播放wav和mid格式,只支持iediv:层
<div></div>
将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏、整体移动等。div非常强大和常用。类似于WinForm的Panel。span:div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局、显示。
备注
xml:描述存的什么数据
XHTML:可扩展超文本置标语言(eXtensible HyperText Markup Language,XHTML)
DHTML:动态HTML;
格式标签:
<p></p>
创建段落;<br />
回车,也可以写成<br>
,在HTML中有一些标签可以不关闭,<br>
就是一个,这是和XML不同的地方(常考),但是为了遵循XHTML规范,推荐像XML一样严格关闭。<br/><img src="1.gif"/>
属性值:HTML中属性值即可以用单引号括起来、也可以用双引号括起来、甚至不用引号都可以(不推荐),单双要配对。
注释:HTML使用和XML一样的来做注释。
最新文章
- C++服务器开发之笔记三
- [公告]Senparc.Weixin.MP v14.2.1 升级说明
- mouseover和mouseout、mouseenter和mouseleave
- Spring+quartz 实现定时任务job集群配置
- what is a ear
- 【手把手教你全文检索】Lucene索引的【增、删、改、查】
- 【书籍下载链接】_1_第一轮_C语言书籍
- day 2 Linux目录结构
- 线性回归&;&;code
- Git log高级用法
- 通过Microsoft Azure服务设计网络架构的经验分享
- 新修改了EMA的计算方法,合并线性回归率的计算。和通达信的结果一模一样
- Windows下模拟Linux开发
- 【PullToRefresh 系列基本用法】 Android装上拉下拉刷新控制具体的解释
- (一) 从Angular1到Angular2的杂谈
- aws上redhat安装redis服务记
- 【css】border-image
- MySQL5.7下面,误操作导致的drop table db1.tb1; 的恢复方法:
- Spring Cloud 微服务架构的五脏六腑,统统晒一晒!
- 黏包现象之TCP