html基本结构
<!--声明文档类型--> |
head 头部标签
优先加载的一般都会写到头部
<head> |
title标签(网页标题标签)
<title>网页标题</title> |
html常见标签
meta标签
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" /> //指定网页的编码类型 |
link标签
作用:引入外部或者内部样式表(css文件),定义文档与外部资源的关系
<link href="http://www.hhh.com/1.css" rel="stylesheet" type="text/css" /> |
script标签
作用：引入外部或者内部的js文件
<script src="http://www.hhh.com/one.js" type="test/javascript"></script> |
base标签
设置整体链接的打开状态，需要写到head里面
所有链接都会默认添加target=”_blank”
target属性
taget=”_blank” 在新窗口中打开被链接文档。
target=”_self” 默认。在相同的窗口中打开被链接文档
target=”_parent” 在父框架集中打开被链接文档
target=”_top” 在整个窗口中大姐啊u被链接文档
target=”framename” 作用在指定框架打开链接
<base href="https://www.baidu.com" target="_blank" /> |
注释标签
<!--这是一段注释--> //html注释标签，注释的内部不会在浏览器实现效果 <!--hhh--> |
p标签(段落标签,文本标签)
<p>这是一个段落标签</p> //段落标签 |
标题标签
<h1-6></h1-6>
<h1>h1</h1> |
a标签链接标签
作用：用于控制页面与页面之间的跳转
href 作用用于指定链接目标的url地址,必要属性 href=”#”–>代表空链接
target属性 有
_self和_blank两个值target=”_self” 在当前页面跳转
target=”_blank” 新建页面跳转
<a href="https://www.baidu.com">百度</a> //默认在当前页面跳转 |
扩展
1.描点文本
<a name="2"><p>1111111111</p></a> |
2.图片链接
<a href="src" ><img src="#"/></a> |
3.电子邮箱链接
注意: 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"> |
img标签图片标签
src属性 eg:
src=""属性值填图片的地址; src=”#”–>代表空图片width属性 设置图片的宽度 eg:
width="10"height属性 设置图片的高度 eg:
height="10"alt属性 作用：图片不显示而替代的文字 eg:
alt="hhhhhh"title属性 作用：悬停img图片标签提示显示文字 eg:
title="hhhh"border属性 作用:给图片设置边框，默认为0 属性值 整数值 eg:
border="1"align属性 作用:设置图片在网页中的水平对齐方式,属性值有left(靠左对齐),center(居中),right(靠右对齐)
<img src="图片地址" width="10" height="10" alt="hhhh" title="hhhh" border="1"/> |
路径
路径分绝对路径和相对路径，相对路径又分同一级路径，上一级路径，下一级路径
绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
“D:\web\img\logo.gif”，或完整的网络地址，例如”http://www.itcast.cn/images/logo.gif"。
相对路径
| 路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 只需输入图像文件的名称即可，如src=’1.png’。 | |
| 下一级路径 | “/” | 图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images） 如src=’image/2.png’。 |
| 上一级路径 | “../” | 在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如src=’../3.png’。 |
列表标签
html列表有有序列表、无序列表和自定义列表
有序列表
有序列表使用ol标签，默认数字表示
type属性
type=”A” 大写字母表示
type=”a” 小写字母表示
type=”I” 大写罗马字母表示
type=”i” 小写罗马字母表示
<ol type="A"> |
无序列表
无序列表使用ul标签，粗体圆点表示
type属性
type=”square” 正方形列表
type=”circle” 圆圈列表
type=”disc” 圆点列表
<ul type="square"> |
自定义列表dl
<dl> |
html表格
表格由
<table>标签来定义。每行（由<tr>标签定义），每行的单元格（由<td>标签定义）
常见的表格框架
<table> |
table表格标签
border属性 设置表格的边框，默认为0,属性值 像素值(px)
width 属性 设置表格的宽度,属性值 像素值(px)
height属性 设置表格的高度,单位像素px 属性值 像素值(px) eg: height=”200px”
cellpadding属性 设置表格边与内容的间距 属性值 像素值(默认2px)
cellspacing属性 设置表格的间距 属性值 像素值(默认1px)
align属性 设置表格在网页中的水平对齐方式,属性值有left(靠左对齐),center(居中),right(靠右对齐)
tr标签
定义表格的每行
td标签
定义表格的每格
align属性 设置表格在网页中的水平对齐方式,属性值有left(靠左对齐),center(居中),right(靠右对齐)
表头单元格标签th
一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
<table> |
表头标题caption
一般表头标题显示在表格上面第一行的位置,并且文本居中
<table> |
合并单元格
跨行合并: rowspan=”合并单元格的个数”
跨列合并: colspan=”合并单元格的个数”
<table border="1" width="300px" height="300px" cellpadding="10" cellspacing="0" align="center"> |
合并单元格顺序
合并的顺序我们按照 先上 后下 先左 后右 的顺序
例子：
<table border="1" cellpadding="10" cellspacing="0" width="200px" height="300px"> |
换行标签br
<br /> |
换行线标签hr
<hr /> |
div标签和span标签
css中会经常使用div
<div>1</div> |
| 区别 | ||
|---|---|---|
<div></div> |
div标签 | 用来布局的，但是现在一行只能放一个div |
<span></span> |
span标签 | 用来布局的，一行上可以放好多个span |
文本属性
加粗标签
<b>加粗1</b> |
斜体标签i
<i>111</i> |
下划线标签u
<u>1</u> |
上标线标签sup
<sup>上标线</sup> |
下标线标签sub
<sub>下标线</sub> |
删除线标签del
<del>111</del> |
font标签
作用：规定字体属性
size 字体的大小
color 字体颜色
<font size="10" color="red">111</font> |
pre标签
作用：保留文本原来的格式
<pre> |
code标签
作用：保留文本的格式在同一行上输出/显示
<code> |
input标签
type属性
type=”text” 文本框
eg:
<input type="text" value="" />type=”password” 密码框
eg:
<input type="password" name="password" value="" />type=”submit” 提交按钮
eg:
<input type="submit" value="提交" />type=”reset” 重置按钮
eg:
<input type="reset" value="重置" />type=”file” 文件上传域
eg:
<input type="file" />type=”hidden” 隐藏域,不显示出来
eg:
<input type="hidden" name="tokne" value="aaaaaaa1" />//有token可以防止csrf漏洞type=”button” 普通按钮
eg：
<input type="button" name="" value="11" onclick="xx"/>//一般配合onclick调用其他函数重复提交使用type=”checkbox” 复选框
eg:
男 <input type="checkbox" />
女 <input type="checkbox" />type=”radio” 单选框
eg:
<input type="radio"/>
size属性
设置框的长度，属性值 正整数
例子：
<input type="text" name="111" size="10"/>
name属性
name属性一般给服务器接收使用的(十分重要,要是没有name属性和值,服务器就接受不到信息)
例子：
<input type="text" name="text"/>
maxlength属性
设置输入的字符长度，属性值 正整数
例子：
<input type="text" name="111" maxlength="10"/>限制输入字符长度为10
value属性
设置默认值
eg:
<input type="text" value="admin"/>
readonly属性
作用: 只能显示不能修改
Eg:
<input type="text" readonly/>
<form method="POST" action="" enctype="application/x-www-form-urlencoded"> |
form表单
method属性 可以设置提交的方法有 GET,POST
(登录和提交账号密码用post,提交搜信息使用get)
属性值有：
post 不会在浏览器显示出来
get 不会在浏览器显示出来
action属性 设置提交的地方
属性值 自定义
action=”” 属性为空时,提交的地方就是本页面
enctype属性 规定form表单的编码
属性值有
application/x-www-form-urlencoded //普通表单默认使用，url编码
multipart/form-data //上传文件时候使用
text/plain //不用进行编码使用这个
文件上传
<from method="POST" action="" enctype="multipart/form-data"> |
搜索框
<from method="POST" action="" enctype="application/x-www-form-urlencoded"> |
html特殊表单标签
下拉列表
<select>标签定义了下拉选项列表
<select>中的<option>标签定义列表中的可用选项在option 中定义 selected=”selectde”时，当前选项即为默认选项
selected属性
作用：设置选项为默认选项
属性值 selected eg:
<option selected="selected"></option>
<select> |
文本域textarea
cols、rows属性分别规定了文本区域内可见的宽度和高度。
cols 每行的字符数
rows 显示的行数
<textarea rows="30" cols="10" name="info"></textarea> |
fieldset标签
<fieldset>标签定义了一组相关的表单元素，并使用外框包含起来。
<legend>标签定义了<fieldset>元素的标题。
<form> |
案例-个人信息
<fieldset> |
内联框架iframe
src属性 属性值 url 必要属性
width属性 设置框架显示宽度 属性值 单位 像素值(px)/百分比
height属性 设置框架显示高度 属性值 单位 像素值(px)/百分比
frameborder 作用用于定义是否显示边框 默认frameborder=”1” 开启,frameborder=”0”移除边框
<iframe src="url" width="200px" height="250px" frameborder="1"></iframe> |
使用iframe 作为链接的目标(traget)
链接的target属性必须引用iframe 的name属性
示例：
<iframe src="demo_iframe.html" name="iframe_a"></iframe> |
框架frameset标签
frameset标签不能在body标签内使用
frame标签 一般都是跟frameset标签中使用
属性
cols 定义框架集中列的数目和尺寸，属性值 单位百分比
eg:
cols=”50%,40%” —> “上,下”
cols=”50%,*” //这个
*号就会把剩下的百分之几给旁边rows 定义框架集中行的数目和尺寸，属性值 单位百分比
eg:
rows=”50%,*” //这个
*号就会把剩下的百分之几给旁边rows=”50%,40%” –>”左,右”
scrolling属性 滚动条
scrolling=”auto” 在需要的情况下出现滚动条(默认)
scrolling=”yes” 始终显示滚动条(即使不需要)
scrolling=”no” 从不显示滚动条(即使需要)
<frameset cols="50%,*"> |
实战项目-后台框架
index.html
|
top.html
|
main.html
|
menu.html
|
add_news.html
|