HTML简介:
超文本标记语言,不是一种变成语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。比如字体什么颜色,大小等。是最基础的网页语言。通过标签来定义的语言,代码都是由标签所组成。
基本格式:
<html>
<head>
属性信息,辅助性的信息
引入外部的文件(css、js)
先加载
</head>
<body>
真正的数据内容(展示用户的数据)
</body>
</html>
HTML的规范:
1,多数标签都是由开始标签和结束标签的,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。
2,想要对被标签修饰的内容进行更加丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
3,属性与属性值之间用”=”连接,属性值可以用双引号或者单引号或者不用引号,一般都会用双引号。或公司规定书写规范。
HTML的标签:
排版标签
<br / > 换行
  空格
<hr / > 水平线
<p></p> 段落标签
<div></div>
<span></span>
字体标签
<font></font>
*color:颜色
*size:字体的大小
*最大值:7
*最小值:1
*face:字体
*粗体标签 <b></b>
*斜体标签 <i></i>
*滚动字幕 <marquee></marquee>
标题标签
<h1></h1>
........
<h6></h6>
特殊字符
< <
> >
& &
列表标签
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>(特点:缩进并且自动对齐)
</dl>
有序列表和无序列表
有序:
<ol type = "a" start = 3>//用abc标号,从c开始
//type还可以是1,默认是实心圆
<li></li>
<li></li>
<li></li>
</ol>
无序:
<ul>
<li></li>
<li></li>
<li></li>
...
<ul>
图片标签
<img />
属性:
src = "图片的地址"
width = ""
height = ""
alt :图片的说明文字
超链接标签
写法:<a></a>
* 链接资源
必须要指定属性:href = ""
* 需要编写协议
http
* 默认file文件的协议
如果浏览器可以解析文件,默认会打开文件
如果浏览器不能解析文件,弹出下载窗口
* 支持自定义协议
* 定位资源
* 通过name 定义锚点
* 返回需要使用href="#锚点的名称"
表格标签
<table>:声明表格的范围
<caption></caption>:表格的标题
<tr>:行
<th></th>:单元格 自动居中加粗
</tr>
<tr>
<td></td>:单元格
</tr>
</table>
table的属性:
border:1 边框
width:宽度
height:高度
tr的属性:
align:中间文字的对其方式
td与th区别:
th中间的内容粗体显示
th中间的内容默认居中
th一般用来表格的表头
td的属性
width 宽度
height 高度
合并单元格(值得写法:合并几个单元格,值就写几个)
行合并 rowspan = ""
列合并 colspan = ""
表单标签
<form>
*form的属性
action = "表单的提交路径"
http://www.baidu.com
html页面
method = "提交方式"(面试题)
*form表单的提交方式有哪些(get post区别)
*post与get区别
*默认方式是get
*get方式会把参数列表显示在地址栏上,post方式不会。(请求体)
*get方式说明网站的安全级别比较低,post安全级别比较高。
*get方式不支持大数据,post方式支持大数据。
*推荐使用post方式
*get方式是避免不了的 因为有的不可以设置提交方式都默认为get
*用户输入的内容
<input type = "类型" />
type = "text" 普通的文本框
type = "password" 密码框
type = "radio" 单选按钮
name的属性,值要相同
默认值: checked = checked or true
type = "checkbox" 多选按钮
默认值:checked = checked or true
type = "file" 选择文件
name属性指定
type = "hidden" 隐藏组件
name属性指定 value指定
type = "button" 按钮
value = "显示的文字"
和js 绑定事件
type = "reset" value = "重置"
type = "submit" value = "提交"
type = "image" src = "" 图片
<textarea>文本域
rows 行
cols 列
name属性指定
</textarea>
*声明选择框
<select name= “”>
<option value = ""></option>
<option>></option>
</select>
//例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "demo07.html" method = "post">
输入姓名:<input type = "text" name = "username" /><br/>
输入密码:<input type = "password" name = "password" /><br/>
选择性别: <input type = "radio" name = "sex" value = "nan" />男
<input type = "radio" checked=checked name = "sex" value = "nv"/>女 <br/>
选择爱好:<input type = "checkbox" name = "love" value = "lanqiu" /> 篮球
<input type = "checkbox" name = "love" value = "zuqiu"/> 足球
<input type = "checkbox" name = "love" value = "paiqiu"/> 排球
<input type = "checkbox" name = "love" value = "wangqiu"/> 网球 <br />
上传附件:<input type = "file" name = "myfile" /><br / >
隐藏组件:<input type= "hidden" name = "userId" value = "001" /><br / >
选择城市:<select name = "city">
<option value = "none">--请选择--</option>
<option value = "bj" selected = selected>北京</option>
<option value = "sh">上海</option>
<option value = "tj">天津</option>
<option value = "xm">厦门</option>
</select>
<br/>
个人简介:<textarea rows = "10" cols = "10" name = "desc"></textarea><br/>
<input type = "reset" />
<input type = "submit" />
<input type = "button" value = "删除" /><br/>
<input type = "image" src = "../imgs/th.png" /> <br/>
</form>
</body>
</html>
框架标签
<frameset rows = "150,*">
<frame src = "链接html" name = "top">
<frame src = "链接html" name = "left">
</frameset>
//例子:
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows = "150,*">
<frame name = "top" src = "top.html">
<frameset cols = "150,*">
<frame name = "left" src = "left.html">
<frame name = "right" src = "right.html">
</frameset>
</frameset>
<body>
</body>
</html>
多媒体文件的使用
//多媒体文件的链接
单击<a href="zxmzf.mp3">最炫名族风</a><br />
单击<a href="jw.wmv">最炫名族风</a>
//多媒体文件的嵌入
<embed src="zxmzf.mp3" width="300" height="300" autostart="true" loop="true"></embed>
<embed src="jw.wmv" width="300" height="300" autostart="true" loop="true"></embed>
src:指定嵌入多媒体文件的名称
width:播放器的宽度
height:播放器的高度
autostart:是否自动播放。默认为no
loop:设置播放次数。为true时,无限制的重复播放。直到离开此网页或者单击停止。
//在网页中加入背景音乐
<bgsound src="zxmzf.mp3" loop="-1" />
Loop 播放次数,0或1都为播放一次,-1循环播放