视频笔记
HTML：超文本标记语言
双标签：
-
<html></html>:超文本标签，规定了在标签内的文本为超文本。
-
<head></head>:网页头标签，用来定义网页头。
-
<title></title>:网页标题标签，用来定义网页标题。
-
<body></body>:网页主题标签，网页内容全部包含在body内。
- 属性：bgcolor="背景颜色（英语/#6位16进制数#RGB）"
六位数，两位表示一个颜色，R代表red红色；G代表green绿色；B代表blue蓝色。
一般表示00~FF 不同的值代表的是不同的颜色配比。
例如：#FF0000 代表红色为F，绿色为0，蓝色为0
和 #00FF00 代表绿色；#0000FF 代表蓝色
使用工具：
1.在线颜色选择器
2.RGM颜色查询对照表
backgroung="背景图片"
<body bgcolor="#0000FF" backgroung="abc.jpg">
</body>
结果显示：
图片设为背景色的实际情况
设置为页面背景颜色为蓝色，背景图片为abc.jpg，此时图片为多个图片平铺在页面上。如果想一张图片平铺在背景页面上，需要将body加上style属性。
<body background="div-1-1.png" style=" background-repeat:no-repeat ;background-size:100% 100%; background-attachment: fixed;"
>
</body>
结果显示：
设置100%之后的实际情况
实验结论：如果全部设置为100%图片的画面会被改变，这需要一定的图片大小，足够支撑整个页面。背景size是可以改变大小的，用百分比进行调节就可以。
-
<h1></h1>~<h6></h6> 标题标签
-
<font> </font> 字体标签
属性： size(字体大小);color（字体颜色）;face（字体类型）
查看字体类型方法：个性化设置-控制面板-字体
打开后里面显示很多很多字体，可以输入中文英文进行切换的变化。
一些特殊符号：用&进行编写
例如：
空格（ ）
双引号（"）（“”）
小于号（<）（<）
大于号（>）(>)
版权号（©）(©)
工具：HTML特殊符号速查表
-
<p></p>段落标签
属性：align 对齐（正常默认左对齐）
<p align="right"> 右对齐</p>
<p align="center"> j居中</p>
<p align="left"> 左对齐</p> -
<ul></ul> 无序标签; <ol> </ol> 有序标签；<li></li>列表项
属性：
type“列表样式”
start 列表起始值
有序列表中：
type="A" 代表英文大写，
type="a" 代表英文小写，
type="Ⅰ"代表罗马数字大写，
type="ⅰ"罗马数字小写
type="1"阿拉伯数字（默认）
无序列表中属性：
type="square" 方格黑色
type="cycle" 黑色圆点
type="circle"空心圆圈
type="dise"默认格式（黑色圆点）
<ol start="4" type="A">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
显示如图：
有序列表从英文字母第四项D开始的英文大写序号标签
<ul start="4" type="circle">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
图像显示：
空心圆圈无序列表
<ul start="4" type="disc">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
图像显示：
disc无序列表
<ul start="4" type="square">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
图片显示：
square无序列表显示
<ul start="4" type="disc">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
图片显示：
默认无序列表
-
<pre></pre>预格式文本标签
采用预格式文本标签，可以直接固定文本的格式，这样省去了排版的操作
<pre>
xxxxxxx 大家好 xxxxxxxx
xxxxxxxxx x xxxxxxxxx
在这里可以在任意的位置进行输入
不用怕显示不出来哈哈哈
</pre>
显示如图：
实际显示和输入格式一样
-
<a></a>超链接标签
属性：
href:导入链接路径
name:锚名
超链接不同的位置，产生的作用也不同
例如：
<ul type="disc">
<a href="http://www.baidu.com"> <li>软件测试</li></a>
<li> <a href="http://www.baidu.com">软件开发</a></li>
</ul>
如图显示：
不同形式显示
软件测试前面的圆点是蓝色可以点链接的，因为是对<li>列表内容进行了超链接。
但软件开发前面的点是黑色不可以点，因为只对软件开发这个字进行了超链接。
超链接可以是网页地址，也可以是文件，比如超链接一个excel表格等都是可以的，它代表了打开文件的命令。
相对路径 <a href="文件">
绝对路径 <a href="file:///D://">
name锚名 指定动作
<a name="abc"> abc</a>
输入内容
<a href="#abc">回到顶部</a>
把<a name="abc"> abc</a>这个命令放在什么位置则会回到哪个位置，如果放在中间，则可以为回到中间，或者回到底部。
特殊的锚：top
直接就可以链接进行回到顶部，不需要编辑
<a href="#top">回到顶部</a>
也可以做回到中间和回到底部，若想回到顶部，底部则在相应的位置写<a name="名字">标签，然后用<a href="# 名字 ">进行规定动作
<a href="#bottom">回到底部</a>
上部分
<a name="middle">这里是页面中间 </a>
下部分
<a href="#middle">回到中间</a>
<a href="#top">回到顶部</a>
<a name="#bottom"></a>
显示如图：
显示基本框架
-
<marquee></marqyee>滚动标签
属性：
scrolldelay：滚动延时
direction：滚动方向
onmouseover：鼠标覆盖后效果
onmouseout：鼠标移开后效果
scrolldelay：单位毫秒，数字大越慢，数字越小越快，建议写100
direction：（四个方向up，down，left，right）
可以同时设置两个方向，但是方向不能相对，否则会不动。
可以设置left和up同时，这样会向斜方向移动。
<marquee scrolldelay="100" direction="up" onmouseover="this.stop()" onmouseout="this.start()">
<marquee scrolldelay="100" direction="right" onmouseover="this.stop()" onmouseout="this.start()">
<a href="http://www.baidu.com">
<img src="img/div-1-1.jpg"/>
</a>
</marquee>
</marquee>
几种情况演示：
1.如果只写onmouseover，不写onmouseout，那么鼠标移开后不会继续移动了
2.一般onmouseover后面写stop，onmouseout 后面写start，如果两者反着写，那么也可以，不建议这样操作，因为需要鼠标一直跟着图片才会移动。
-
<table></table>表格标签
属性：
border：表格线粗细
bgcolor：背景色
width：表格宽度
height：表格高度
align：表格在网页位置
<tr></tr>行标签
属性：bgcolor，width，height，align，valign
<tr></tr>单元格标签
属性：bgcolor，width，height，align，valign
<th></th>单元格标题
caption：表格标题
<table border="1">
<caption>人员统计</caption>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>January</td>
<td>male</td>
</tr>
</table>
表格
-
<form></form>表单标签
属性：
action：提交地址
method：提交方式（get，post）
id：编号
name：名称
class：CSS选择器
<input>：表单控件标签
属性：type：控件标签（默认text）
id，name，class
<select></select>下拉框控件
属性：
size：显示多少=“1”显示一个，=“2”显示两个
<option></option>：下拉列表项
属性：value，selected=selected
text：单行文本框
属性：
size：字符量
maxlength：最大字符容量
value：显示值
readonly：只读
password：密码框
属性：size，maxlength，value，readonly
radio：单选按钮
属性：name，value，checked=checked
checkbox：复选框
属性：name，value，checked=checked
submit：提交
属性：value，size
reset：重置按钮
属性：size，value，type=“reset” 清空所写
button：普通按钮
属性：onclick type="button onclick="alert('点我')"
<input type="submit" value="确定" name="ok">
<input type="reset" value="取消" name="cancel">
<input type="button" value="帮助" name="help" onclick="alert('请点我')">
实际显示
<textarea></textarea> 多行文本框（应用于用户协议）
属性：
row：hang
cols：列
readonly：只读
<form>
<textarea rows="10" cols="20" readonly="readonly">
用户协议：
</textarea>
<br/>
<input type="submit" value="确定" name="ok" style="background-color: red;" >
<input type="reset" value="取消" name="cancel">
<input type="button" value="帮助" name="help" onclick="alert('请点我')">
</form>
多行文本框
<b>/<strong>:加粗
<u>:下划线
<i>:斜体
<center>:居中标签
单标签：
-
< br > 换行标签
-
图像标签<img>
属性 :
src(source)
width(宽)
height(高)
alt(图片不显示时候的文字)
title(光标处显示内容)
align(代表图片后面的文字的对齐方式，top,middle,buttom)
关于p标签和img标签中align的对比
<img>中代表图像后面文字的对齐方式
<p>标签中代表段落的位置
-
分割线标签
属性:
color(颜色)
width(宽 用px像素或者百分比表示)
size(粗细)px 关于size不同浏览器显示不同，搜狐浏览器显示的分割线就有圆弧，别的浏览器就是长条的。
关于width中像素px和百分比的区别
1.首先建议用百分比，因为会随着浏览器对话框的大小进行调整
2.百分比一直都是居中显示，比较方便，而像素px显示不会变化。
小结：以上为视频系统笔记，和之前相比对于html的掌握更加的系统一些，清楚一些！！！
网友评论