本文介绍了HTML的基础标签，包括自闭合标签和对标签，详细讲解了结构标签如<html>, <head>, <body>, 行级标签如<a>、<span>、<br/>，以及块级标签如<h1>至<h6>、<ul>、<ol>等。还探讨了表单元素的使用，如<input>、<select>，并提到了文件上传、日期选择等功能。"
139470578,5055857,Ansible Kubespray源码深度解析——k8s部署实战,"['kubernetes', '容器编排', 'ansible', 'devops', '云原生']
- 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 专题块
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
