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="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>设置文本框为圆角文本框。

__________________________________________________________________________________________________________________________________________________________________________________
_____________________________________________________________________________________________________________________________________________________________________________________

posted @ 2019-01-04 20:40 Xcsg Views(277) Comments(0) Edit 收藏举报

刷新页面返回顶部

Xcsg

做正确的事，正确的做事。

html 标签笔记

公告