文档章节

2014-06-28 Web-Front的学习(1)-----HTML

查封炉台
 查封炉台
发布于 2014/06/28 22:23
字数 2562
阅读 16
收藏 0
点赞 0
评论 0

1.HTML概述

   HTML全称为HyperText MarkUp Languaue,翻译是超文本标记语言.不是编程语言,是一中描述性的标记语言.用于描述超文本内容的显示方式.比如字体大小,颜色等.在HTML中主要是各种描述文本的标签.HTML中标签发展的趋势如图:

   其中的话,XHTML1.0是开发中常用版本号,HTML5则是未来发展的趋势.

   专业的HTML前端开发工具:DreamWeaver CS6.

2.HTML常见的格式

<html>
   <head>
      <title>简单的HTML<title>
      <!--CSS样式---->
      <!--javascript代码块--->
   <head>
   <body>
     页面主体内容
  </body>
</html>

  打开记事本,将上述文本框内容填写记事本中,保存为普通格式.html.然后就可以用浏览器解释执行.注意:HTML文档中可以不区分大小写.关于HTML相关标签,可以翻阅W3C文档.

3.排版标签

 3.1注释标签                            

     <!-- 注释-->                                

 3.2 段落标记

     <p>文本内容</p>,属性:align=属性值.属性值有三种,分别为left,center,right.

 3.3 换行标记

     <br/>

 3.4 水平线标记

      <hr/>

属性:
1.align=""
      设定线条置放位置,可选择:left;right;center 三种设定值。 
2.size="2" 
      设定线条厚度,以像素作单位,内定为 2。
3.width="70%" 
       设定线条长度,可以是绝对值或相对值,内定为100%。
4.color="#0000FF" 『只适用于IE』 
5.noshade 
       设定线条为平面显示,若删去则具阴影或立体,这是内定值。

4.字体标记

 4.1 <font></font>标签

属性:
 color:颜色
设置方式:单词 \  #ff00cc \   rgb(0,0,255)
 size:字号 取值(1-7)  
       设置:用’+2’代表值是5 或直接给值
 face:字体类型

 4.2 标题标记

     <h1>.................<h6>,其中一级标题最大,逐渐减小,h6最小.不存在<h7>标签.

 4.3 特殊字符

<小于号
>大于号
 空格
&copy;版权号
™商标

5.图片标签

<img src=”图片存在的URL” width=100 height=112 border=0 alt=”请点击”>
 
在图片中使用热点区域:
<img src="../源码/imgs/10.jpg" align="top" width="400px" height="400" alt="请点击" usemap="#MyMap"/>
<map name="MyMap">
    <area shape="circle" coords="100,100,32" href="../源码/2.gif">
</map>


6.清单列表标签

  6.1 有序列表(ol标签)

<ol> 
    <li> HTML是一门脚本语言</li>
<ol type="A">
<li>不对</li>
<li>对</li>
<li>不确定</li>
<li>你猜</li>
</ol>
</ol>
type属性:A,a,I,i,1.默认是阿拉伯数字1
start(控制序号开始的值)默认开始值为1

  6.2 无序标签(ul标签)

<ul type=”square”>
  <li>周星驰</li>
  <li>周星驰</li>
  <li>周星驰</li>
  <li>周星驰</li>
</ul>
type属性:空心圆circle 、实心圆disc 、实心方块  square ,默认disc.

  6.3 定义标签(dl标签)

<DL>称为定义清单标记.
<DT> 用以标示定义条目,
<DD> 则用以标示定义内容。 
所谓定义清单就是一种分二层的项目清单,其不故符号及数目.
三个标记都没有常用的参数.而 <DT> <DD> 可以独立使用,只是一些旧的浏览器不怎么支持,常用的如 <DD> 标记可用以制造段落第一个字前面的空白.
<dl> 
<dt>How to use Definition List 
<dd>First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML. 
<dt>Other things to know 
<dd>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags. 
</dl>

7.超链接标签的使用

a href="http://www.baidu.com" target="_blank" name="top">百度</a><br/>
<a href="mailto:lisx156@sina.com">打开邮箱</a><br/>
<a href="../源码/imgs.rar">下载</a><br/>
<a href="../源码/02.html">打开网页</a><br/>
<a href="#top">回到顶部</a>
<a>标签中有三个属性:

8.表格标签

<table>,<tr>,<td>这三个标签是定义表格的最重要的标记
<table>是一个容器标签,表示HTML页面中的一个表格.
<tr>用以表示表的一行
<td>用以表示表中的单元格。
表格的标题 <caption>
<th>与<td>同样是标示一个储存格,唯一不同的是<th>所标示的储存格中的文字是以粗 体出现,通常用于表格第一列以标示栏目。它的用法是取代<td>的位置便可以,其参数 设定请参考<td>。 
表格中单元格的合并(rowspan,colspan)
表格的分块和嵌套
<thead> <tbody>  <tfoot>
其他详细参数属性可以查阅W3C关于表格的文档.

9.框架集的使用

在HTML中,我们使用<frameset>和<frame>来搭建框架,在HTML5中,好像这种方式是不可行的.一般框架集标签是与<a>超链接配合使用.
窗口属性:
  rows 水平分割
  cols 垂直分割
  frameborder:0 或1 隐藏或显示边框 
  scrolling=“no”  yes 是否可以滚动
  noresize 不可以改变窗口大小

代码示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>框架集</title>
</head>
<frameset rows="80,*,10%">
  <frame src="01html.html"</frame>
  <frameset cols="50,*">
    <frame src="02.html"></frame>
    <frame src="02.html" name="MainFrame"></frame>
  </frameset>
  <frame src="03font.html"</frame>
</frameset>
</html>

10.iframe标签的使用

<iframe src="../code/1.jpg" width="400" height="300"/>
属性:
name=“mainFrame“ 窗口名称
width=“800px“  宽度
height=“150px”   高度
scrolling=“yes”  是否允许滚动
src=“subframe/the_second.html“ 链接的网页

代码示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> iframe标签使用</title>
 </head>
 <body>
    <a href="subframe/the_first.html" target="mainFrame">第一个网页</a><br/>
    <a href="subframe/the_second.html" target="mainFrame">第二个网页</a><br/>
<a href="subframe/the_third.html" target="mainFrame">第三个网页</a><br/>
<iframe src="subframe/the_first.html" name="mainFrame"></iframe>
 </body>
</html>

11.表单标签的使用

A:form标签中常见的属性定义:
action:指定表单组件数据发送的位置。如果没有定义action属性,那么默认提交到当前页面
method:定义表单提交的方式。只有两种常用 get post.如果没有指定method,默认就是get提交方式
B:input标签中type的类型如下
    属性size,maxlength, readonly disabled
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。
单选框 radio 如:性别选择。
复选框 checkbox 如:兴趣选择。
隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值。
按钮 button 可以为其自定义事件。
文件上传 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。
图片image 也可以提交数据,功能类似于sumbit
C:两个特殊的标签
    <select>:选择标签 提供用户选择内容。如:用户所在的省市。size 属性为显示项目个数。<option>:选择标签的子项标签 属性 selected 没有属性值,加在子项上,其中一个子项上,子项就变成默认被选项。 
    <textarea>:多行文本框。如:个人信息描述。cols   rows
D:form表单的两种提交方式的区别
1.
get:会将提交的信息显示在地址栏上。
post:不会将提交的信息显示在地址栏。
2.
get:对于敏感信息不安全。因为显示在地址栏。
post:对于敏感信息安全。因为不显示
3.
get:因为显示在地址栏,而地址栏的信息数据量是有限的,所以不可以提交大数据。
post:可以提交大体积的数据。
4.
get:会将信息封装到请求行,也就是http请求消息头之前。
post:会将信息封装到请求体,也就是http请求消息头之后。请求体和请求头之间是通过空行来进行分隔的。
综上所述:以后在进行表单 提交时:建议使用post提交。

13.语义化的表单—扩展

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>表单语义化</title>
  <base href="http://www.sina.com"></base>
 </head>

 <body>
	<form>
		<fieldset>
			<legend>用户必填信息</legend>
			<table>
				<tr>
				   <td><label for="usernameqqqqqq">用户名</label></td>
				   <td><input type="text" id="usernameqqqqqq" name="username"/></td>
				</tr>
				<tr>
				   <td><label for="pwd">密码</label></td>
				   <td><input type="password" id="pwd" name="password"/></td>
				</tr>
			</table>
			<legend>用户选填信息</legend>
			<table>
				<tr>
				   <td></td>
				   <td><label for="male">男</label><input type="radio" id="male" name="sex" value="male"/><label for="female">女</label><input type="radio" id="female" name="sex" value="female"/></td>
				</tr>
				<tr>
				   <td><label for="pwd">密码</label></td>
				   <td><input type="password" id="pwd" name="password"/></td>
				</tr>
			</table>
		</fieldset>
		<a href="news.html">新浪新闻</a>
		<a href="video.html">新浪视频</a>
	</form>
 </body>
</html>


14.多媒体标签的使用

1. 多媒体文件的链接:
  <embed src="zxmzf.mp3" width="300"  height="300" autostart="true"  loop="true">
  </embed>
2. 在网页中加入背景音乐:
  <bgsound src="zxmzf.mp3" loop="-1" />
3. 跑马灯
   <marquee behavior=”alternate”>

15.HTML的头标签

头标签都放在<head></head>头部分之间。包括:title base meta link
<title>:指定浏览器的。
<base>:为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。 
<meta>:可提供有关页面的基本信息
<link>:定义文档与外部资源的关系。








© 著作权归作者所有

共有 人打赏支持
查封炉台
粉丝 49
博文 56
码字总数 138491
作品 0
景德镇
程序员
关于微信的那点帖。。。。。。(各种实例)

照惯例发帖先吐槽一下:最近看到大家发防微信功能特别的多,所以就汇总了一下,看看大家还有什么其他方面的汇总需求,回复我噢,均可满足。。。。。 (ps:有些帖子由于主观、客观还有神马原因...

程序袁_绪龙 ⋅ 2015/04/01 ⋅ 0

老男孩51CTO博客博文列表整理版20170620更新

老男孩51CTO博客博文列表整理版 (本文原自于一道考试题http://oldboy.blog.51cto.com/2561410/1860985) 老男孩教育运维脱产班35期 刘同学 2017-06-14 17:44:41 老男孩的MySQL私房菜新书视频1...

老男孩oldboy ⋅ 2016/10/14 ⋅ 0

Problem(一):开始记录下有帮助用的学习资料网址, 持续。。。

今天(2016-06-05)开始记录下有帮助用的学习资料网址, 方便收藏, 哈哈。。。。。 点赞。。。 更多学习: 2016-10-09 : 1. 正则 http://blog.csdn.net/zaifendou/article/details/5746988...

牧羊人Berg ⋅ 2016/06/05 ⋅ 2

OAuth2、Token、JWT

参考: 理解OAuth 2.0 Json web token JSON Web Token (JWT) 简介 JWT学习笔记 关于 Token,你应该知道的十件事 Token存储方式解释:详说 Cookie, LocalStorage 与 SessionStorage 一句话解释...

爬墙 ⋅ 2016/08/16 ⋅ 0

Nginx学习指南之安装与配置

Nginx学习指南之安装与配置 一、简介 Nginx [engine x]是Igor Sysoev编写的一个HTTP和反向代理服务器,另外它可以作为邮件代理服务器。Nginx已经在众多流量很大的俄罗斯网站上使用了很长时间...

晨风微凉 ⋅ 2014/05/07 ⋅ 0

Java Apache 开源项目简介

Apache Commons Apache Commons是Apache的一个开源项目,主要致力于各种可重用的Java组件。主要由以下三部分构成: - 一个可重用的Java组件库(已经开发完的项目,一般我们导入相关包就可以使...

wangxigui ⋅ 2014/08/01 ⋅ 0

每天一个linux命令(20):find命令之exec

find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了。 exec解释: -exec 参数后面跟的是command命令,它的终...

长平狐 ⋅ 2013/06/17 ⋅ 0

请教一个mysql的sql语句的写法

"rd";"nopd" "2014-07-14";"0" "2014-07-15";"0" "2014-07-18";"0" "2014-07-22";"0" "2014-07-24";"0" "2014-07-30";"0" "2014-08-04";"0" "2014-08-06";"0" "2014-08-07";"0" "2014-08-11"......

JohnnyZz ⋅ 2014/10/20 ⋅ 5

根据配置说明配置启动时候出错

@S2JH 你好,想跟你请教个问题: maven install都成功完成. 启动server还是出错启动不起来. 11:06:29,831 |-INFO in ch.qos.logback.core.db.JNDIConnectionSource@188b41 - Looking up [jav......

熊猫2014 ⋅ 2014/12/09 ⋅ 2

echarts 2.0问题

@Kener-林峰 你好,想跟你请教个问题: 出现了无柱子的情况,如下: 附option: option = { title : { text: '某地区蒸发量和降水量', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' ...

ohohmiao ⋅ 2014/07/06 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部