说到HTML,那么接下来说说是HTML?
HTML译为超文本标记语言,不是一种编程语言,而是一种描述性的标记语言,可用于描述超文本中要显示的内容。比如字体颜色等等。
html是一种最基础的网页语言,同时也是一种通过标签来定义的语言,代码都是由标签所组成。
HTML的基本格式
<html> // HTML文件的声明开始
<head> // HTML文件的头部部分
title:头部的标题标签。 网页标签。
meta:头部部分。网页相关信息:关键字,字符编码,内容描述
</head>
<body> //HTML文件的主体部分 body里面的内容可以显示在网页里面
</body>
</html>
<head> 头部部分中有3个要注意的点:
存放属性的信息,辅助性的信息。
进入外部加载的文件。
会最先加载。
<body> 主体部分中存放的是我们所要存放的数据
下面插入一个简单的例子的代码
<html>
<head></head>
<body>
<h1>这是我们人生中第一个文件!HELLOWORLD!</h1>
<h2>这是我们人生中第一个文件!HELLOWORLD!</h2>
<h3>这是我们人生中第一个文件!HELLOWORLD!</h3>
<h4>这是我们人生中第一个文件!HELLOWORLD!</h4>
<h5>这是我们人生中第一个文件!HELLOWORLD!</h5>
<h6>这是我们人生中第一个文件!HELLOWORLD!</h6>
</body>
</html>
在我们编写html时,应该注意以下几点:
- 多数标签只有开始和结束标签,其中个别标签只有单一功能,或者没有要修饰的内容可以在标签内结束。
- 想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
- 属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。
接下是介绍一些排版的标签,在制作网页的时候很实用:
*<br/> 表示换行标签,指切换到下一行
*<hr/> 一条水平线,表示画一条水平线
<hr/>的属性有以下几种:
clolor: 颜色属性
它的值的写法有两种:1.直接写英文的单词(例如red green blue)
2.RGB三原色(red green blue)#ffffff #然后后面是6个16进制的数
例如 <hr color="#ab1278"/>
width : 宽度属性
值的两种写法:1. 200px 就是指一个具体的值+px,px代表像素
2. 也可以写百分比 比如40%
两种写法的区别:百分比跟着浏览器的尺寸大小而改变,像素值不会
*<p></p> 段落标签
*块状元素与行内元素指在浏览器中声明一块区域,区域中放入其他(文字,字标签):
*块状元素:独占一行,有宽度和高度。 <div> </div> 块状元素,写完后有换行的作用
*行内元素:不独占一行,没有宽度和高度。<span></span> 不会换行 ,行内的元素
<font></font> 字体标签:
字体标签有以下几个属性:
1.color:颜色
2.size:字体的大小
*最大值和最小值: 最大值是7,最小是1. 值的写法:字体大小的默认值是3,值的写法: +2 和 (3+2)是一样的
3.face:字体的类型,例如隶书,楷书等等
标题标签:有<h1> </h1> 、<h2> </h2> 、<h3> </h3> 、<h4> </h4> 、<h5> </h5> 、<h6> </h6>分别表示一级标题到六级标题,从h1到h6标题大小依次减小。
*<b></b>:粗体标签 <i></i>:斜体标签
需要注意的是标签是可以嵌套的,例如 <b><i> 标签内的内容</i></b> , html不区分大小写。
特殊的字符: < 小于号 <; >大于号>; &与符号 &; 空格符号:  ; "(")
*滚动的字幕标签:<marquee scrollamount="5"></marquee> * scrollamount属性代表速度属性
列表标签:
有3种列表:定义列表、有序列表、无序列表
1.定义列表:
格式:<dl>
<dt>上层数据的内容</dt>
<dd>上层数据的内容<dd>
<dd>上层数据的内容<dd>
*有自动对齐,缩进的作用
</dl>
它得出的结果如西面所示:
上层数据的内容
下层数据的内容
下层数据的内容
2.有序列表:
格式:<ol>
<li> 数据的条目 </li>
<li> 数据的条目 </li>
</ol>
ol的属性:*type属性: 例如 type="a" 表示从a开始,像a,b,c,d这样子的
*start属性: start="" 指从哪开始
3.无序列表:
格式:<ul>
<li> 数据的条目 </li>
<li> 数据的条目 </li>
</ul>
ul的属性: *type属性: 例如type="circle" 表示圆形的列表标识符号 type="square" 表示正方形的列表标识符号
表格标签:
表格:
*表格基本结构
<table>
<tr> //表示第一行
<th>第1个单元格的内容</td> //th表示表头
<th>第2个单元格的内容</td>
……
</tr>
<tr> //表示第二行
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>
*表格基本属性
border:表格边框
cellspacing:外边距
cellpadding:内边距
align:水平位置 (center 居中 left居左 right 居右)
valign:垂直居中 (top 上 bottom 下 middle 中)
colspan:列的合并
rowspan:行的合并
bgcolor:背景颜色
图片标签<img/>:
<img/>的属性:
src属性:src="图片的地址或者说路径" 例如:<img src="image/1.jpg"/> 表示在image文件中的图片1.jpg
width属性:width="图片的显示宽"
height属性:height="图片的显示高度"
alt属性:alt="图片的说明属性" 图片加载不出来替代的文字
title属性: title="标题" 鼠标悬停时出现的图片标题
超链接标签:
写法:<a></a>
超链接的两个作用:
1.链接资源:*必须指定属性:herf="链接的地址"
*需要编写协议 例如http
*默认file文件的协议
*如果浏览器可以解析文件,默认会打开文件。
*如果浏览器不可以解析文件,弹出下载窗口
*支持自定义协议
*浏览器解析不了的协议,默认找操作系统的引用程序。
2.定义资源:
*name属性 定义锚点
超链接属性:href:跳转路径 target:_self(在本窗口打开新网页) _blank(在新窗口打开网页)
**页面间链接
**锚链接: 1.创建标记节点 <a name="top">乙位置</a>
2.href指向标记节点<a href="#top">甲位置</a>
**功能性链接:
电子邮件,QQ,MSN
<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
网页媒体元素:
视频元素: video
音频元素:audio
例如:video
<video controls|autoplay> //controls表示播放和暂停和音量的控件 //autoplay表示自动播放属性
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
例如:audio
<audio controls|autoplay>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
表单
*收集用户输入的数据
*表单的标签
<form>
*用户输入的内容
*表单的输入控件<input/>
<input type="类型" name="名称(必须要指定)" value="是否指定value">
*name属性必须指定,value看情况指定
<input type="text"> 普通的文本框
*name属性必须指定,value看情况指定
<input type="password"> 密码框
*name属性必须指定,value看情况指定
<input type="radio"> 单选按钮
*name属性必须指定,value必须指定
*name的属性,值要相同
*默认值:checked=checked或者true
<input type="checkbox"> 多选按钮
*默认值:checked=checked或者true
**name属性必须指定,value必须指定
*type="reset" 重置:恢复到最初的状态
*type="submit" 提交表单
*点击提交后,地址栏发生了变化(?sex=on)
*在普通的文本框上添加name属性 bane="username"之后,点击提交,地址栏发生了变化?username=haha&sex=on
*type="file" 选择文件
*name属性指定
*type="hidden" 隐藏组件
*name指定value指定
*type="button" 按钮
*value="显示的文字"
*和js(javascript)绑定事件
*type="image" 图片
*提交 引入外部的一个文件(图片)
*声明选择框/下拉框
*<select name="city">
<option value="none">--请选择--</option>
<option value="sj">上海</option>
<option value="bj" selected="selected">北京</option>
<option value="sz">深圳</option>
</select><br/>
*<textarea>文本页
*rows="行"
*clos="列"
</form>
表单的属性:
form的属性:
*type属性:
1.text:文本框
2.submit;提交按钮
3.password:密码框
4.radio:单选框
5.checkbox:复选框
6.button:普通按钮
7.reset:重置按钮
8.image:图片按钮
9.file:文件域
10.email:邮箱
11.number:数字
12.url:网址
13.range:滑块
14.search:搜索框
*action=“表单的提交路径”
插入上述type的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="biaodanshuxing.html" method="post">
输入姓名:<input type="text" name="username"> <br/>
输入密码: <input type="password"> <br/>
选择性别: <input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" checked="checked" value="nv">女 <br/>
选择爱好:<input type="checkbox" name="love" checked="checked" value="lq">篮球
<input type="checkbox" name="love" value="zq">足球
<input type="checkbox" name="love" value="pq">排球
<input type="checkbox" name="love" value="bq">冰球<br/>
<input type="reset" value="重置数据" />
<input type="submit" value="提交数据" />
<input type="button" value="我是按钮"/>
<input type="image" src="image/tj.png">
<input type="image" src="image/z.jpg"><br/>
上传附件:<input type="file" name=y"mfile"><br/>
隐藏组件:<input type="hidden" name="userID" value="001"><br/>
选择城市:<select size="3" multiple="">
<option value="none">--请选择--</option>
<option value="bj" selected="selected">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select><br/>
个人简介:<textarea rows="10" cols="10" >输入个人简介</textarea>
邮箱:<input type="email" name="youxiang">
<p>网址:<input type="url" name="wangzhi"></p>
<p>数字:<input type="number" name="age" min="0" max="10" step="2"></p>
<p>滑块:<input type="range" name="rge" min="0" max="50" step="10"></p>
<p>搜索框:<input type="search" name="sousuo"></p>
</form>
</body>
</html>
*“http//www.baidu.com”
*html页面
*method=“提交方式(默认是get方式)”
*form表单的提交方式有很多,常用的提交方式有两种:get和post
*post和get的区别:
get方式会把参数列表显示在地址栏上,post方式不会(请求体);*get方式说明网站级别较低,post安全级别较高。
*get方式不支持大数据,post支持大数据。
*框架标签
*对网页进行布局
<frameset rows="150,*">//上面占150,下面占所有的
<frame>代表上半部分
<frame>代表下半部分
</frameset>
*前提条件:不能写在<body>的内部和下面
frame属性:
*src=“导入的网页路径”
下面是框架的一个简单例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<frameset rows="150,*">
<frame src="biaodan.html">
<frameset cols="150,*">
<frame src="chaolianjie1.html" name="left">
<frame src="biaodanshuxing.html" name="right">
</frameset>
</frameset>
<body>
</body>
</html>
结构元素:
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容
内敛框架的两个简单例子的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内敛框架</title>
<style type="text/css">
iframe{
width: 400px;
height: 400px;
border: 1px solid green;
}
</style>
</head>
<body>
<h1>我不是网页布局</h1>
<iframe src="wangyebuju.html" name="all"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新的内联框架</title>
<style type="text/css">
iframe{
width: 600px;
height: 600px;
border: 1px;
/*solid表示实线*/
border: solid red;
}
</style>
</head>
<body>
<p><a href="http://www.baidu.com" target="main">点击打开百度</a>
<a href="http://www.taobao.com" target="main">点击打开淘宝</a>
<a href="neiliankuangjia.html">点击打开内联框架</a>
</p>
<iframe name="main" ></iframe>
</body>
</html>