《一、HTML 基础结构》

<html>
________________________________
<head>
<title>无标题文档</title>
</head>
________________________________
<body>
</body>
________________________________
</html>

HTML的常用标记:

1.文档结构标记
用来指明一个Html文档的基本结构。
（1）文档标记：<Html>...<Html> 整个HTML文档内容均在此标记之中。

（2）头部标记：<HEAD>...</HEAD>
凡是在从此标记之内的内容，例如标题等，均属于头部信息。头部信息不显示在Web页中。

（3）标题标记：<TITLE>...</TITLE> 此标记之间的内容将作为文档标题显示在浏览器的标题栏中。
注意：<TITLE>...</TITLE>标记只能放在<HEAD>...</HEAD>标记之间。

（4）主体标记：<BODY>...</BODY>主体是Web页的主要部分，在<BODY>...</BODY>标记之间的内容将显示在Web页中。

_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________

《二、文本标记》

（1）标题标记： <hn></hn>(n的范围为1-6)
<h1></h1>是最大的标题
<h2>使用h2的标题</h2>
<h3>使用h3的标题</h3>
<h4>使用h4的标题</h4>
<h5>使用h5的标题</h5><h6></h6>是最小的标题。
注意：被标示的文字将以粗体的方式显示在页面中。

（2）字体标记：<b></b>、<i></i>、<u></u>、<s></s>
<b></b> 之间的文本以黑体字的形式输出
<i></i> 之间的文本以斜体字的形式输出
<u></u> 之间的文本以加下划线的形式输出
<s></s>之间的文本以删除线的形式输出

（3）斜体和加重标记：<em></em>,<strong></strong>
1.<em></em>用来输出需要强调的文本（通常是斜体）
2.<strong></strong>则用来输出加重文本（通常是黑体）

（4）字型标记：<font></font>
此标记通常用来控制文字的字型，大小，颜色。它主要有3个属性face，size，color。
1.face属性用来指定文字的字型，如果指定的字型不存在于系统中，将使用默认字型。
2.size属性用来指定文字的大小，可以取值1-6，-1—-6，1-7,7为最大字体
3.color属性用来指定文字的颜色，颜色的取值可以是预设的颜色名称或者十六进制的RGB颜色码。
例如：<font face="黑体" size="5" color="red">写文字内容</font>

（5）
1、<sup>...</sup>标签可定义上标文本。 （全称：superscript - sup）
包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。
提示：这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用，就可以创建出很好的超链接脚注。

2、<sub>...</sub>标签可定义下标文本。 （全称：subscript - sub）
包含在 <sub> 标签和其结束标签 </sub> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。
提示：无论是 <sub> 标签还是和它对应的 <sup> 标签，在数学等式、科学符号和化学公式中都非常有用。

________________________________________________________________________________________________
________________________________________________________________________________________________

《三、格式标记》

（1）段落标记：<p>...</p>
此标记用来创建一个段落，在此标记之间的文本讲按照段落的格式显示。

（2）换行标记：</br>
此标记没有结束标记，用来创建一个换行。

(3) 项目列表标记：<dl></dl>,<dt><dd>
1.<dl></dl>用来创建项目列表
2.<dt>用来创建列表中的上层项目
3.<dd>用来创建列表中的下层项目
<dt>和<dd>都必须放在<dl></dl>标记之间。

（4）有/无序号列表标记：<ol></ol>,<ul></ul>,<li>
1.<ol></ol>标记用来创建有序号列表
2.<ul></ul>标记用来创建无序号列表
3.<li>标记只能在<ol></ol>或<ul></ul>标记之间使用，用来创建列表项。
注意：若<li>放在<ol></ol>之间，则每个列表项前有一个数字：
若放在<ul></ul>之间，则每个列表项前有一个圆点。

《有序号样式如下》
（5）<ol type=“1”>阿拉伯数字（有序列表的默认效果）
（6）<ol type="a">小写字母显示
（7）<ol type="A">大写字母显示
（8）<ol type="i">小写罗马数字显示
（9）<ol type="I">大写罗马数字显示

《无序号样式如下》
（10）<ul type="disc">实心圆显示（无序列表默认效果）
（11）<ul type="circle">空心圆显示
（12）<ul type="square">实心矩形显示

有序/无序号列表标记示例=====================

<html>
<head><title>有序/无序号列表标记示例</title></head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 恢复中文乱码
<body text="#66CC00"> 网页中所有文字变色
<ol>中国城市
<li>北京
<li>上海
<li>广州
</ol>
<ul>美国城市
<li>华盛顿
<li>芝加哥
<li>纽约
</ul>
</body>
</html>

__________________________________________________________________________________________
__________________________________________________________________________________________

《四、超链接标记》

（1）<a href="目标地址">...</a>
（1）href属性用来指定链接的目标地址，可使用URL。

（2）在标记之间可指定作为超链接的文本或图像。
例如：网址链接 <a href="http://www.baidu.com">百度</a>
网址链接+导入图片 <a href="http://www.baidu.com">
<img src="图片地址">
</a>
（3）href属性的值也可以是“mailto:Email地址”的形式。
例如：<a href="mailto:xiaocai2419@126.com">联系我</a>

（4）<a></a>标记还具有target属性，此属性用来指明链接网页显示的目标窗口，
可取_self，_blank，_parent或_top四个值中的任何一个，_self为默认值。
例如：<a href="http://www.sina.com"target="_blank">新浪网</a>

各网址：
百度：http://www.baidu.com
新浪：http://www.sina.com

图像标记和多媒体标记
（1）图像标记：
<img src="图像文件存储位置与名称">
此标记用于将图像文件加载到网页文档中显示。
例如，网页文档于图像文件Whu.jpg在同一个目录下，则图像标记写成：<img src="Whu.jpg">
假如图像文件放在网页文档所在目录的一个子目录（images）下，则图像标记写成：<img src="data:images/whu.jpg">
假如图像文件放在网页文档所在目录的上层目录下，则图像标记写成：<img src="../whu.jpg">。
此外，<img>标记还有如下一些常用属性：
·alt：当浏览器不能显示指定图像时，则以指定给alt属性的字符串替代图像。
·align：对齐方式。
·border：设定图像的边框，如果值为0就表示不显示边框。
·width：设定图像宽度，单位为像素或百分比。
·height：设定图像高度，单位为像素或百分比。
·right：往右移动

___________________________________________________________________________________________________________
________________________________________________________________________________________________________

《五、添加动态文字》

·设置滚动文字
使用marquee标记可以将文字设置为动态滚动的效果。
<marquee> 滚动文字</marquee>

·设置文字的滚动方向
<marquee direction=”滚动方向”> 滚动文字</marquee>
direction包含四个值，up上、down下、left左、right右

·设置文字的滚动方式
<marquee behavior=”滚动方式”> 滚动文字</marquee>

取值 滚动的效果
alternate 来回交替进行滚动
scroll 循环滚动，默认效果
slide 只滚动一次就停止

代码如下：
<marquee direction="right" behavior="slide" scrollamount="30"> 往右滚动文字，只滚动一次就停止，慢</marquee>

<marquee direction="up" behavior="scroll" > 往上滚动文字，循环滚动（默认）</marquee>

·设置文字的滚动循环次数
<marquee loop=”循环次数”> 滚动文字</marquee>
当loop=-1表示一直滚动下去直到页面刷新。
其中默认情况是向左滚动无限次。

·设置文字的滚动速度
<marquee scrollamount=”滚动速度”> 滚动文字</marquee>
数值越大滚动的速度越快，通常不需要设定（默认速度6）。

·设置滚动文字的背景色
<marquee bgcolor=”颜色代码”> 滚动文字</marquee>

·设置滚动文字的背景面积
<marquee width=”背景宽度” height=”背景高度”> 滚动文字</marquee>

·设置空白空间
<marquee hspace=水平范围 vspace=垂直范围> 滚动文字</marquee>
_____________________________________________________________________________________________________
__________________________________________________________________________________________________________

《六、创建表格》
创建表格有以下3个标签 分别是：
<table></table> 创建表格
<tr></tr> 创建表格中的行
<td></td> 创建表格中的单元格

<table>里的属性如下：
border 表格边框线 （数值越大边框线越粗、不设置就没有边框线）
align 水平对齐方式：left靠左 center居中 right靠右（可在table、tr、td标签内添加）
cellspacing 单元格与边框间距
cellpadding 字与单元格的间距
bordercolor 边框线颜色
bgcolor 背景颜色（可在body、table、tr、td标签内添加）
background 背景图片（可在body、table、tr、td标签内添加）
colspan 横向合并单元格（在td标签内添加）
rowspan 竖向合并单元格（在td标签内添加）

代码如下：
<table border="1" >
<tr>
<td >球队</td>
<td >基本资料</td>
</tr>
</table>
__________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________

《七、创建表单》

<form></form>创建表单

<input> 属性

<type> 类型（类型里面有10个属性 必须记住）

value 这个值是传给后台用的。（name也是）

1.text 文本框（明文信息来表示）
输入名称：<input type="text" name="user" value="123" placeholder="请输入你的昵称"/>
<!--用户名是明文信息 input属性 type类型 text文本框 user用户名 value值（会默认） placeholder占位符-->

2.password 密码（非明文信息来表示）
输入密码：<input type="password" name="psw" value="123"/>
<!--密码是小点来标示属于非明文信息 password密码 psw非明文信息状态-->

3.radio 单选框 <!--checked标地属性（默认值）-->
选择性别：<input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv" checked="checked"/>女

注意：
单选按钮一次只能选择一个，所以我们要给它健组，把多个单选按钮放到组里面去，就会出现选择效果了，那什么叫组呢？每个单选框里加上name值 name="nan" name="nv",就行了，
但是如果你想多个单选按钮一次只能选择一个的时候必须要存到同一个组里，现在name="nan" name="nv"是2个组，
我们要把name值改为相同的就可以了，把name里面的nan或nv，改为相同的sex，name值保持一致就可实现单选效果。
如果我们遇到的是美容网址针对的只有女性没有男性就不能像现在这样选择了？我们就给它默认值，checked="checked"（这个属性称为标地属性，属性名和属性值是相同的）输入后默认这个女性单选框。

4.checkbox 复选框 tech(技术)
选择技术：<input type="checkbox" name="tech" value="JAVA"/>JAVA
<input type="checkbox" name="tech" value="HTML"/>HTML
<input type="checkbox" name="tech" value="CSS"/>CSS

5.file 文件
选择文件：<input type="file" name="file"/>

6.image 图片
一个图片：<input type="image" src="图片提交按钮2.jpg"/>
<!--image图片 图片提交按钮（跟提交数据一样但比提交数据美观）-->

7.hidden 隐藏
隐藏组件：<input type="hidden" name="myke" value="myvalue"/>
<!--后期做开发时常用，数据不需要客户端知道，但是可以将其提交到服务端知道 （客户端是用来显示的，服务端是用来记录的）-->

8.button 按钮
一个按钮：<input type="button" value="有个按钮" onclick="alert('有个按钮')"/>
<!--没有默认的点击事件源我们就来注册一个 直接注册动作-->

9.reset 重置 <input type="reset"/>
<input type="reset" value="清除数据"/>

直接打<input type="reset"/> <input type="submit"/>保存预览下，是重置和提交，我们也可以写成另一种显示，在reset重置的后面空格输入value属性名，属性值写清除数据，
在subimt提交的后面空格输入value属性名，属性值写清除数据，在保存看一下，显示的名字是不是我们设置的属性值的文字了，
把前面的选框输入点击清除数据试一下，是不是都没了？但是说清除数据的话也不太贴切，因为清除数据是把所有表单里面的属性给状态还原了，
你们看咱们设置的性别里默认女性那个属性栏，咱们状态还原后是不是显示的默认女性的属性，对吧（如果是清除的话，是不是就都清除了？）

10.submit 提交
<input type="submit" value="提交数据"/>
<!--这两个本身带有默认的点击事件效果，都有默认处理方式，-->

点击提交信息后，看你的网址位置，信息就会提交到服务端，你没有指定服务端的话它会提交到当前页面，
（sex=on数据信息会在后面跟随）看你的网址是不是只有sex=on（sex性别，但是男是女显示的吗？没有吧）其他什么都没有吧，
因为每个信息都没有标识，如果在名称里面输入ABC它知道ABC是密码？还是名称？什么都不知道吧，就是因为这个问题才会只显示sex=on，那怎么才能让他显示数据信息呢。
表单数据如果要给服务端提交的话，每个表单的组建都必须指定name和value属性，name="user"（user用户名的意思） value="123"（value默认为123是吧？）保存预览下，
现在把123删掉，直接在页面里面输入123看下你的数据信息会不会显示，一样显示对吧？name就是这个按键 value就是这个按键的值。

11、下拉菜单：
<select>
<option>--北京--</option>
<option selected="selected">--上海--</option>
<option>--深圳--</option>
</select>

12、textarea <!--文本域用于输入更多内容的-->
<textarea name="text"textarea cols="30" rows="4" style="border-radius: 5px 5px 5px 5px"></textarea>设置文本框为圆角文本框。

__________________________________________________________________________________________________________________________________________________________________________________
_____________________________________________________________________________________________________________________________________________________________________________________

html 标签笔记的更多相关文章

  1. django 模版标签笔记

    一.模板变量笔记:1.在模版中使用变量,需要将变量放到‘{{}}’中.'{{ 变量 }}'2.如果想访问对象的属性,可以通过'对象.属性名'的方式访问3.如果想要访问一个字典的key对应的value, ...

  2. 看Web视频整理标签笔记

    原来观看web视频,初学html的时候发现记忆不太深刻,所以自己整理了一些笔记,加深记忆且方便忘记时查看.html的规范(遵循)1.一个html文件开始标签和结束标签<html></ ...

  3. OpenERP QWeb模板标签笔记

    在OpenERP中,通过QWeb来对模板进行渲染后加载到浏览器中,而模板中有许多的标签来定制各种需求变化,在这里记录学习过程中碰到的标签定义,以方便查询. 模板中的标签统一都是以"t-&qu ...

  4. 移动端 meta 标签笔记

    (转自http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html,版权归原作者所有!) 移动平台对 meta 标签的定义 一.meta 标签分 ...

  5. html》meta标签笔记

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  6. HTML标签笔记

    换行符:<br/> 首部: <!DOCTYPE>: 说明html文档使用的标准, 在HTML5中仅为 <!DOCTYPE html>1.头标签 <head&g ...

  7. 使用select多选标签笔记

    之前一直用checkbox做多选,其实 select也可以多选,只要多给一个属性即可.标签属性 http://www.w3school.com.cn/tags/att_select_multiple. ...

  8. DEDECMS标签笔记

    注意点: 1.dede的标签不可以嵌套(除了channelartlist里面可以嵌套指定的标签),那么当需要使用{dede:global.cfg_webname/}dede标签的时候我们需要转换成[f ...

  9. scope标签笔记

      scope的几个属性详解: 1.compile:默认值 他表示被依赖项目需要参与当前项目的编译,还有后续的测试,运行周期也参与其中,是一个比较强的依赖.打包的时候通常需要包含进去. 2.test: ...

随机推荐

  1. 【iCore4 双核心板】DEMO V1.0 测试程序发布

    iCore4 Demo V1.0程序说明 一.概要 本资料包含5个文件夹: 1.“arm”里是iCore4上arm的程序包,开发环境为KEIL5.17: 2.“fpga”里是iCore4上FPGA的程 ...

  2. ubuntu下使用golang、qml与ubuntu sdk开发桌面应用 (简单示例)

    找了很长时间go的gui库,试了gtk,准备试qt的时候发现了这个qml库,试了下很好用. ##准备工作 **1.Go 1.2RC1** go的版本应该不能低于这个,我是在1.2RC发布当天升级后发现 ...

  3. 要是VISUAL STUDIO 2015带这些功能就好了

    visual studio 2015 正式版立即就要出来了,事实上我原来满期待微软能出一套完美的移植的ANDROID和IOS应用的技术方案,这样WIN10正式版出来后,有一套比較好的移植框架,大家能够 ...

  4. greendao引起的NoClassDefFoundError异常解决

    在使用Android studio导入eclipse工程师报错,因为原工程引用了greendao的第三方工程包 java.lang.NoClassDefFoundError: org.greenrob ...

  5. Go 实现异常处理机制

    实例: package main import "fmt" type DevideError struct { devidee int devider int } func (de ...

  6. websphere 删除文件

    META-INF 文件夹下加入ibm-partialapp-delete.props即可 里面添加路径 如WEB-INF/xxx/xxx.xxx

  7. [UFLDL] Linear Regression & Classification

    博客内容取材于:http://www.cnblogs.com/tornadomeet/archive/2012/06/24/2560261.html Deep learning:六(regulariz ...

  8. Android ListView只加载当前屏幕内的图片（解决list滑动时加载卡顿）

    最近在做ListView分页显示,其中包括图片 和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也 ...

  9. 单元测试以文件流的形势传参调用api进行测试

    [TestMethod] public void Test() { byte[] buffer;//文件转换为二进制流 string path = @"E:\aaa"; Encod ...

  10. rx.js 的冷和热观察

    http://cn.rx.js.org/manual/overview.html#h213 https://rxjs-cn.github.io/rxjs5-ultimate-cn/content/ho ...