html 标签笔记

《一、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="请输入你的昵称"/>

2.password 密码（非明文信息来表示）
输入密码：<input type="password" name="psw" value="123"/>

3.radio 单选框 
选择性别：<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"/>

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 标签笔记的更多相关文章

django 模版标签笔记
一.模板变量笔记:1.在模版中使用变量,需要将变量放到‘{{}}’中.'{{ 变量 }}'2.如果想访问对象的属性,可以通过'对象.属性名'的方式访问3.如果想要访问一个字典的key对应的value, ...
看Web视频整理标签笔记
原来观看web视频,初学html的时候发现记忆不太深刻,所以自己整理了一些笔记,加深记忆且方便忘记时查看.html的规范(遵循)1.一个html文件开始标签和结束标签<html></ ...
OpenERP QWeb模板标签笔记
在OpenERP中,通过QWeb来对模板进行渲染后加载到浏览器中,而模板中有许多的标签来定制各种需求变化,在这里记录学习过程中碰到的标签定义,以方便查询. 模板中的标签统一都是以"t-&qu ...
移动端 meta 标签笔记
(转自http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html,版权归原作者所有!) 移动平台对 meta 标签的定义一.meta 标签分 ...
html》meta标签笔记
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
HTML标签笔记
换行符:<br/> 首部: <!DOCTYPE>: 说明html文档使用的标准, 在HTML5中仅为 <!DOCTYPE html>1.头标签 <head&g ...
使用select多选标签笔记
之前一直用checkbox做多选,其实 select也可以多选,只要多给一个属性即可.标签属性 http://www.w3school.com.cn/tags/att_select_multiple. ...
DEDECMS标签笔记
注意点: 1.dede的标签不可以嵌套(除了channelartlist里面可以嵌套指定的标签),那么当需要使用{dede:global.cfg_webname/}dede标签的时候我们需要转换成[f ...
scope标签笔记
scope的几个属性详解: 1.compile:默认值他表示被依赖项目需要参与当前项目的编译,还有后续的测试,运行周期也参与其中,是一个比较强的依赖.打包的时候通常需要包含进去. 2.test: ...

随机推荐

android 软键盘自动弹出和关闭
一.布局中软键盘自动弹出 bargain_dialog_offer_edit.requestFocus(); bargain_dialog_offer_edit.setFocusable(true) ...
python加快数据处理的方法
1.一切数据库操作最好使用内网连接, 2.使用批量操作接口操作数据库,而不是多线程频繁操作单条数据 3.如果python进程的cpu使用率达到100%了,需要开启多进程.java单个进程cpu使用率在 ...
通信原理之TCP/IP基本概念（二）
本来想写写,但发现有人写的很好了,不造轮子了! 直接转了一.为什么会有TCP/IP协议在世界上各地,各种各样的电脑运行着各自不同的操作系统为大家服务,这些电脑在表达同一种信息的时候所使用的方法是 ...
C语言的标准库和系统调用
http://blog.csdn.net/yusiguyuan/article/details/23181327 Linux系统调用这部分经常出现两个词:libc库和封装函数,不知道你是否清楚它们的含 ...
java调用删除文件的方法删除文件，却删除不干净
场景: 程序中在做数据下载时,生成了一个临时文件夹.夹子里面有一些txt和其他格式文件. 数据下载完毕后,需要删除这个临时文件夹,但是一直删除不干净,总会有一下文件残留. 网搜到了这个问题的原因: 内 ...
OpenGL——旋转的六边形（动画）
代码: #include<iostream> #include <math.h> #include<Windows.h> #include <GL/glut. ...
H5网页适配 iPhoneX，就是这么简单（转）
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...
C#实现二叉树--二叉链表结构
二叉树的简单介绍关于二叉树的介绍请看这里 : 二叉树的简单介绍 http://www.cnblogs.com/JiYF/p/7048785.html 二叉链表存储结构: 二叉树的链式存储结构是指,用 ...
使用Python3.7.0搭建简易服务器
一.下载并安装Python 官网地址二.新建start_server.bat 在需要搭建服务器的根目录位置,新建一个start_server.bat文件内容 python -m http.serv ...
subordinate clause/从句
What Is a Subordinate Clause? (with Examples)A subordinate clause (or dependent clause) is a clause ...

html 标签笔记

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

随机推荐

热门专题