一.html整体结构
<!DOCTYPE html>
<html>
<head>
<title>新浪首页</title>
//只能是纯文本,任何标记都会原封不动的显示
<meta charset="utf-8"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
//老版本
<meta name="keywords" content="手机,电脑,数码"/>
设置网站的关键字,用于搜索
<meta name="description" content="sh61第一个程序" />
设置网站的描述
<meta http-equiv="refresh" content="3,url=www.baidu.com" />
重定向
<link rel="stylesheet" type="text/css" href="css.css">
//链接样式
<script type="text/javascript" src="js.js"></script>
//链接JS
<style>写css样式</style>
</head>
<body>
网页正文……
</body>
</html>
l 功能:告诉浏览器,如何翻译汉字。
l http-equiv:模拟http协议的文件头原信息,主要目的是服务器向客户端返回时,用什么格式显示。
l Content-type:内容类型。
l Content:详细内容类型介绍。
l Text/html:网页是text格式,html是文本中的小格式。
l Charset:字符集,主要控制汉字如何显示。
l Utf-8:多国语言编码,什么国家的语言都可以正常显示。
二.格式标签:
<hr>
:水平线 <br>
:换行 <p>
:段落
<pre>
:原样输出,不支持标签直接输出 <center>
:居中
<ol 有序列表 style start reversed(倒序)>
例:(ol type=”A”,start=”3”)
<ul 无序列表 [type] 样式 disc circle square>
:
<li>
:列表中的项目
释义列表:<dl 定义列表><dt列表标题><dd详情></dd></dt></dl>
//一般用在网页最下面
三.文本标签
<h1>-<h6> 标题 / <b><i><u>
粗 斜 下划线 /
<sub><sup>上下标/<font face(字体) size(1-7) color>; / <s>
:中划线(del)
四.a标签
<a href=""
可以是URL,也可以绝对路径和相对路径
绝对路径: D:\wamp\www\tz.php
相对路径: ./ 当前目录 ../ 上级目录 /根目录 “\”代表本地分割符“/”网络分割符
target: 打开方式(_self 当前窗口/_blank 新窗口/_top (这个目标使得文档载入包含这个超链接的窗口)在顶层窗口打开/ _parent 父级窗口打开)
title:鼠标停留时的提示文字
name:名字(定义锚点时配合#用)
例:1.<a href='user/index.php' target='main'>
跳转到index,在mian中打开。
2.<a href="./demo06.html#bottom">
跳到底部</a>
<a name="bottom">底部</a>
img标签
<img src="URL" width height title(提示文字) alt(替代图像的文本,无法加载时)>
image:图片按钮 有提交功能,再套个标签。
五.表格标签
结构
<table><caption><tr><th><td>
<table>
:表格
属性: width:宽度/height:高度/border:边框/bgcolor:背景颜色/
background: 背景图片
cellspacing:单元格间距(外间距)/cellpadding:单元格与内容间距(内间距)
align:当对于外边的水平对齐方式
<caption>
:表格标题
<tr>
代表HTML表格中的一行
属性: height/bgcolor
align:水平对齐方式 left|center|right
valign:垂直对齐方式 top|middle|bottom
| 代表单独的格子 (单独的给一个设置宽高即影响整行整列)
属性: width/height/bgcolor/align/valign
colspan:合并列(横向合并)
rowspan:合并行(纵向合并)
注意:tr没有宽度
反色原理:
<table border="0" cellspacing="1" bgcolor="black"> <tr bgcolor="white">
六.form表单相关标签
<form>
action:接收的脚本地址
method:提交的方式(get|post)
enctype=”multipart/form-data” (表单文件二进制编码)
application/x-www-urlencoeded 默认
<input>
:type:类型/name:名字/value:值/size:大小(可以设置框的长度) width/height
disabled:禁止(无值属性)/checked:选中(默认)/readonly:只读(无值属性)
placeholder:提示文字(html5)
其中type属性的值:
text:文本框 (name为下标,value为默认值,不设置值的话只要下标,然后输入值)
password:密码框 required(非空)
radio:单选框 ( 同一组radio的name值必须相同)
checkbox:复选框 (name的值后面要加[ ] 相当于数组)
submit:提交按钮 有提交功能
button:普通按钮 没有提交功能 /reset:重置
file:文件域 multiple(一次上传多张(无值属性))
hidden:隐藏域(传递不让用户看见的数据,name value必须有)
select:下拉框
name:名字 / size:下拉个数
disabled:禁止(无值属性)
option:选项(不设置value,也可以提交,就是option中间的文字)
value:值/ disabled:禁止(无值属性)/selected:(默认选中项)
textarea:多行文本域
name:名字 /cols:列数 /rows:行数
disabled:禁止(无值属性)/readonly:只读(无值属性)/maxlength:最大可输入长度
两个提交按钮的区别:
submit具有提交功能,button一般需要和JS套用
七.frameset框架
frameset
cols:分列的定义 可以用百分比或者像素,值用英文的逗号隔开(,) *表示剩下的所有
rows:分行的定义
border:边框
frameborder:是否显示边框 yes | no
<iframe name="main" frameborder="0" style="width:800px;height:400px;">
这是另一个框架,可以和body一起使用
frame
href:显示的页面url地址
name:名字
scrolling:是否显示滚动条 yes|no
noresize:禁止拖动 (定框架)
例: <frameset rows="100, 600, *">
<frame src="./top.html" noresize/>
<frameset cols="200,*">
<frame src="menu.html" name="left" noresize/>
<frame src="content.html" name="right" noresize/>
src是这个帧中显示的内容,name就是取名字,
</frameset>
<frame src="footer.html" noresize/>
</frameset>
menu.html文件中
- 用户列表
-
一点击用户列表,在右边出现userlist.html文件内容(先给帧名字,在用target去跳转)
注意事项:frameset不能和body标签一起使用。
八.HTML5新标签(语义化标签)
1、 可以将写在form标签外面的表单元素提交到指定文件中 Password不在form标签里面
<form action="./demo.php" id="formdata" method=""></form>
<input type="password" name="password" value="" form="formdata">
2、 设置提交按钮指定的文件位置
<input type="submit" value="提交"formaction="./1.php" formmethod="get">
3、 为文本输入框,添加下拉选择项
<input type="text" list="datalist" name="search" />
<datalist id="datalist">
<option>PHP</option>
- 时间日期
<input type="date" name=""> <br/>
<input type="month" name=""> <br/>
<input type="week" name=""> <br/>
选取一年中的第几周<input type="time" name=""> <br/>
邮箱:
<input type="email" name=""> <br/>
网址:
<input type="url" name=""> <br/>
数字:
<input type="number" name="" max="10" min="1" step="2"> <br/>
数字:
<input type="range" name="" min="1" max="10" step="2"> <br/>
5.视频 音频
<video src="./media/fun.mp4" loop controls poster="./1.jpg" width="200"height="200"></video>
<audio src="./media/_WStyle.mp3" controls autoplay loop hidden></audio>
Autoplay:自动播放
Loop:循环播放
Hidden:隐藏标签
九.实体符号
” ” / & & < < / > >
空格 / © © × × / ¥ ¥ &hearts 心型
十.滚动字幕
<marquee direction="up" scrollAmount="10" scrollDelay="100" width="600" height="400" >滚动的内容</marquee>
scrollAmount (值越大,滚动越快)
scrollDelay(两步之间的停留时间)
Direction:滚动方向,取值:up、down、left、right
loop:循环滚动的次数
<mark></mark>
给文字加亮<legend>新增用户</legend>
新中夹框标签