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>

  • 特殊字符：&lt;（小于号，less than）；&gt;（大于号，greater than）；&nbsp;（空格，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格式，只支持ie

  • div：层<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一样的来做注释。

自学_HTML<一>的更多相关文章

  1. 从零自学Hadoop(22)：HBase协处理器

    阅读目录 序 介绍 Observer操作 示例下载 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,Sour ...

  2. 前端自学路线之js篇

    上一篇我们讲了前端切图的学习路线,不知大家有没有收获.今天来聊聊前端工程师的核心技能之——JavaScript.js这门语言看似简单,但要做到入门.熟练以至于架构的程度,还是有一段路要走的,今天就来聊 ...

  3. 从零自学Hadoop(20)：HBase数据模型相关操作上

    阅读目录 序 介绍 命名空间 表 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...

  4. 从零自学Hadoop系列索引

    本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 从零自学Hadoop(01):认识Hadoop ...

  5. 从零自学Hadoop(21)：HBase数据模型相关操作下

    阅读目录 序 变量 数据模型操作 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...

  6. 从零自学Hadoop(19)：HBase介绍及安装

    阅读目录 序 介绍 安装 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 上一篇, ...

  7. 从零自学Hadoop(18)：Hive的CLI和JDBC

    阅读目录 序 Hive CLI(old CLI) Beeline CLI(new CLI) JDBC Demo下载 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出 ...

  8. 【转】JAVA自学之路

    JAVA自学之路 一: 学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游戏.3G.测试等. 那么究竟应该选择什么方向 ...

  9. 前端自学vs跟大神系统学？你看着办

    前端自学vs跟大神系统学?你看着办 一名广告专业学生,在大三的时候对于广告行业的前景不是很看好,转而自学web前端,刚开始接触的前端语言是html(html应该不算编程语言),上手很容易,在w3csh ...

随机推荐

  1. 【分析工具】阿里巴巴Arthas--线上问题分析利器

    目录 1. Arthas是什么 2. Arthas能解决什么问题 3. 快速安装 第一步:下载 第二步:运行 第三步:选择进程 4. 实战使用 5. 总结 本博客转载自阿里开源的 Java 诊断工具 ...

  2. 【Java基础】JDBC简明教程

    目录 1. 常用类 2. JDBC编程步骤 3. 事务处理 4. 数据库连接池 5. JDBC列子代码 6. 使用Apache的JDBC工具类 虽然在平时的开发过程中我们不会直接使JDBC的API来操 ...

  3. 干货：.net core实现读取appsettings.json配置文件（建议收藏）

    看好多人不懂在.NET CORE中如何读取配置文件,我这里分两篇,这一篇介绍怎样通过appsettings.json配置读取文件信息.这里我会教大家两种方式: 第一种直接放到通用类库,那里想调往那调. ...

  4. SAP记账期间变式

        记帐期间变式能够控制每个公司代码中打开的记账期间,包括正常记账期间和特别记账期间.可以为企业组织架构中的每个公司代码定义一个归其单独使用的记账期间变式.      记账期间变式独立于会计年度变 ...

  5. Android8.1 源码修改之通过黑名单屏蔽系统短信功能和来电功能

    前言 之前写过一篇Android6.0 的屏蔽系统短信功能和来电功能,具体看这里 同样的最近有个新需求,需要将8.1 设备的来电功能和短信功能都屏蔽掉,特殊产品就是特殊定制,那就开始吧. 屏蔽短信功能 ...

  6. oracle12.2RAC之OGG安装配置（一）

    前面配置了ACFS用于ogg目录. 上传软件并解压安装: unzip 123014_fbo_ggs_Linux_x64_shiphome.zip cd fbo_ggs_Linux_x64_shipho ...

  7. OMM机制（占位）

    由于没有swap分区,导致系统启动omm机制,把mysql干掉

  8. 201871010123-吴丽丽《面向对象程序设计（Java）》第一周学习总结

                                                                            201871010123-吴丽丽<面向对象程序设计 ...

  9. 201871010124 王生涛《面向对象程序设计JAVA》第一周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://edu.cnblogs.com/campus/xbsf/ ...

  10. acwing 7 混合背包

    习题地址  https://www.acwing.com/problem/content/description/7/ 题目描述有 N 种物品和一个容量是 V 的背包. 物品一共有三类: 第一类物品只 ...