- HTML基础标签
1HTML:HyperText Markup language 超文本标记语言
2html语言编辑的文件:Xxx.html(网页:在浏览器中打开html文件)
3项目模型
①C/S Client/Server TCP/UTP 传递数据 有状态协议
②B/S Browser/Server HTTP(S) 传递超文本 无状态协议
4HTML
Ⅰ标签: 1自闭合<tad tag1=”val1”attr2 = “val2”.../>
2对标签<tad tag1=”val1”attr2 = “val2”.../>...</tag>
2基础标签
①结构标签
<html>
<head>
<meta charset="UTF-8"/>
<title>百度_首页</title>
<meta name="keyword"contnet="...."/>
<meta name = "description"content="...."/>
<link rel = "shortcou icon" type="images/x-icon" href="icon.jpg">
rel:关联类型:图标
type:内容类型:图标图片
herf:路径
</head>
<body>
常规标签
行级标签:按行显示,无宽高,也不可以设置宽高,内容决定其真实大小
a标签
超链接
<a target="显示地址的方式" href="地址" title=“内容”>提示内容</a>
target: _self 覆盖当前窗口(当前窗口打开新页面)
_blank 打开新窗口
_parent 覆盖父窗口(fromset/iframe/div)
frameName 指定框架内显示
href:目标页面地址
title:悬浮提示文本
锚链接(例如返回至开头)
<a href="页面地址#锚名" ></a>
<a name="锚名">[提示内容]</a>
<sapn>内容</span>
<br/> 换行标签
<hr/> 水平线标签
<strong>内容</strong> 粗体标签
<em>内容<em> 斜体标签
<i>内容<i>
行内块级标签:按行显示,有默认宽高也可以设置宽高
表单:
<form mnethod="GET/POST" action="where"enctype="">
........
</form>
method:GET:显式提交(地址栏挂载 ?key=val&key2=val2)
POST:隐式提交 流的形式
action:
后台一个方法的别名(方便+安全)
enctype:
application/x-www-form-urlencoded 文本
application/multipart-data 文件
application/xml xml格式数据
application/jason json格式数据
表单元素
name java后台取值用的键
id js前端 取值用的键
value 表单元素的值
<input type="" name="" id="" value=""/>
type:
text(autocomplete = "off"不记录以前的历史)文本框
password 密码框
radio(name必须相同 必须提供value的值) 单选按钮
(可以通过label的for属性绑定id实现拓展选择)
checkbox (同上) 复选框
date_local/datetime 日期框
number(min max step) 数字框
email 邮箱框
mobile 电话框
range 滑动块
file 文件域
下拉列表:
//根据ID给select标签添加子项,可以一直重复添加,没有限制
function addOption(){
var obj=document.getElementById('mySelect');
obj.add(new Option("2017","2017"));
obj.add(new Option("2016","2016"));
obj.add(new Option("2015","2015"));
}
//删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
//删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
//根据id获取下拉选择框当前选中值的html值
var status = $('#status option:selected').text();
console.log(status)
//获取的是当前select标签选中值得value值
var v = $("#status").val();
console.log(v)
非表单元素
<img src=””alt=””title=””/>
src图片的地址 alt图片无法正常加载的时候的替换文本 width宽height高
②块级标签:独占一行,默认宽高0*0,但可以设置宽高
标题标签:
无序列表:
<ul type=”disco”>(图形的种类)
<li>...</li>
<li>...</li>
...
</ul>
有序列表
<ol type = “1”>(a,1,Ⅰ)
<li>...</li>
<li>...</li>
...
</ol>
定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
Div
H5 快
Header 头
Footer 尾
Aside 侧边栏
Nav 导航
Ariticle 独立块
Section 专题块