HTML基础之HTML标签
前端的三把利器
HTML：赤裸的一个人
CSS：华丽的衣服
JS/JavaScript：赋予这个人的行为，也就是动起来
HTML（超文本标记语言）
html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。html代码就是一大长串字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面。
后端与前端交互方式
1、后端通过直接返回浏览器能够识别的html代码
2、后端返回数据，前端替换html种的指定数据
HTML标签
<!DOCTYPE html> <!--标准的html规则，类似于Python的解释器-->
<html lang="en"> <!--html标签(只能一个)，指定语言en-->
<head> <!-- html head标签的开始 -->
</head> <!-- html head标签的结束 -->
<body> <!-- html body标签的开始 -->
<a href="http://www.cnblogs.com/feng0815">跳转到我的博客</a> <!--类似有很多href这种的叫做标签内部属性-->
</body> <!-- html body标签的结束 -->
</html>
注释的写法 <!-- -->
html head
1、自闭和标签
<meta charset="UTF-8">
只有开头标签，没有结尾标签
2、主动闭合标签
<a></a>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 指定编码 -->
<meta charset="UTF-8">
<!-- 每3秒中刷新一次 -->
<meta http-equiv="refresh" content="1">
<!-- 3秒后跳转页面 -->
<meta http-equiv="refresh" content="1;Url=http://www.cnblogs.com/feng0815">
<!-- 关键字检索 -->
<meta name="keywords" content="尘世风">
<!-- 网站描述-->
<meta name="description" content="尘世风是名低调的测试工程师">
<!-- ie打开时以最高的兼容模式打开 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title-->
<title>尘世风的博客</title>
<!-- 前方高能预警，***重要*** -->
<!-- title的图标 -->
<link rel="shortcut icon" href="tubiao.ico">
<!-- 引入css -->
<link rel="stylesheet" href="tmp.css">
<!-- css样式-->
<style></style>
<!-- 引入js和编写js -->
<script src="tmp.js">
</script>
</head>
<body>
</body>
</html>
html body
符号
<a href="http://www.cnblogs.com/feng0815">尘 世 风</a>
<a href="http://www.cnblogs.com/feng0815"><a></a>
空格：  大于号：> 小于号 < 记住常用的这三个，其他的用时百度
块级标签：H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)
行内标签：SPAN标签(白板)
p、br
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- p标签称之为段落标签，占满一整行，段落之间有空行 想换行需要通过<br />标签 自闭合标签建议自己写上/作为区分-->
<p>年轻,就是拿来折腾的。<br />让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。</p>
<p>别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！</p>
<p>你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。</p>
<p>不要为了户口丢掉生活，为了稳定丢掉青春，为了平淡丢掉梦想，因为你所谓的稳定，不过实在浪费生命。</p>
<p>真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。</p>
<p>只有等现实的日子富足了，能力够强了，才可以去追求那些美好的生活状态，才该去追求那些伟大的梦。否则那些梦幻般的生活，都只是空中阁楼，不堪一击。</p>
<p>生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？</p>
</body>
</html>
h、form、div、span、input、label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 标题标签 h1最大 h6最小 只需要记住先出生最大 自带属性 -->
<h1>尘世风</h1>
<h2>尘世风</h2>
<h3>尘世风</h3>
<h4>尘世风</h4>
<h5>尘世风</h5>
<h6>尘世风</h6> <!-- 行内标签的代表 什么属性都不带-->
<span>尘世风</span>
<!-- 块级标签的代表 什么属性都不带，html代码中出场率最高-->
<div>尘世风</div> <!-- 登录页面 -->
<!-- 表单标签 可以理解为载体 纸 input 就是写在纸上的文字-->
<form action="/login" method="post">
<!-- 文本输入框 -->
<input type="text" name="username"/>
<!-- 密码输入框 -->
<input type="password" name="passwd"/>
<!-- 按钮 点击什么用也没有 需要结合js绑定事件 -->
<input type="button" value="登录"/>
<!-- 提交 提交表单需要用submit -->
<input type="submit" value="提交"/>
</form>
<!-- get与post区别提交 -->
<form action="/login" method="get" enctype="multipart/form-data">
<!-- 文本输入框 text-->
<input type="text" name="username" value="默认值"/>
<!-- 密码输入框 password-->
<input type="password" name="passwd"/>
<!-- 按钮 点击什么用也没有 需要结合js绑定事件 -->
<input type="button" value="登录"/> <!-- 多选框 checkbox {"name"：[1,2,3]} 默认值checked=checked-->
<p>女朋友的选择标准</p>
<input type="checkbox" name="check" value="1" checked="checked"><span>大长腿</span>
<input type="checkbox" name="check" value="2"><span>长头发</span>
<input type="checkbox" name="check" value="3"><span>36C</span>
<!-- 单选框 radio name相同 勾选是互斥-->
<input type="radio" name="sax" value="1" checked="checked"><span>男</span>
<input type="radio" name="sax" value="2"><span>女</span>
<!-- 文件类 file 如果上传文件一定要在form中添加特殊属性 enctype="multipart/form-data" 意思是一点一点的发给服务器-->
<p>上传文件</p>
<input type="file" name="file"/>
<!-- 提交 提交表单需要用submit -->
<input type="submit" value="提交"/>
<!-- reset 还原表单中填写的数据到默认 -->
<input type="reset" value="重置">
</form> <!-- label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id-->
<label for="username">用户名</label>
<input id="username" type="text"/>
</body>
</html>
textarea、select、option、optgroup、a、img、ul、li、ol、dl、dt、dd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="t1">描述</p>
<!-- 多行文本 textarea 默认值在标签之间-->
<textarea name="meno">默认值</textarea>
<p>省市</p>
<!-- select option 默认选择在option上增加selected size属性显示多少个 多选属性：multiple-->
<select name="city" size="3" multiple="multiple">
<option value="1">黑龙江</option>
<option value="2" selected="selected">辽宁</option>
<option value="3">北京</option>
<option value="4">四川</option>
</select>
<!-- optgroup 分组 label 组的名字 -->
<select name="city" size="3" multiple="multiple">
<optgroup label="黑龙江省">
<option value="1">哈尔滨</option>
<option value="2">牡丹江</option>
</optgroup>
<optgroup label="北京省">
<option value="3">北京</option>
</optgroup>
</select> <!-- 超链接标签 a href：跳转的链接 target="_blank" 新tab打开页面 -->
<p>超链接</p>
<a href="http://www.baidu.com" target="_blank">尘世风</a>
<!-- a标签 锚的链接 通过id进行对应关系的映射 例子回到顶部-->
<div style="height: 500px;">文章</div>
<a style="position: fixed;right: 0;bottom: 0" href="#t1">回到顶部</a> <!-- img 图片标签 src：图片的位置 图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字-->
<a href="http://www.cnblogs.com/feng0815"><img src="1.png" style="height: 200px;width: 200px;" alt="html" title="尘世风html"></a> <!-- 列表 ul li 点-->
<ul>
<li>第一列</li>
<li>第二列</li>
</ul> <!-- 列表 ol li 数字 -->
<ol>
<li>第一列</li>
<li>第二列</li>
</ol> <!-- 分层列表 dl dd内层 dt外层 -->
<dl>
<dt>黑龙江</dt>
<dd>哈尔滨</dd>
<dd>牡丹江</dd>
</dl>
<dl>
<dt>北京</dt>
<dd>北京</dd>
</dl> </body>
</html>
table、thead、tr、th、tbody、tr、td
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列-->
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>用例名称</th>
<th>执行人</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>table表格测试</td>
<td>尘世风</td>
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
</tr>
<tr>
<td>1</td>
< !-- colspan等于几就占几列-->
<td colspan="2">table表格测试</td>
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
</tr> <tr >
<td>1</td>
<!-- rowspan等于几就占几行-->
<td rowspan="2">table表格测试</td>
<td>尘世风</td>
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
</tr>
<tr>
<td>1</td>
<td>尘世风</td>
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
</tr>
</tbody>
</table> </body>
</html>
HTML基础之HTML标签的更多相关文章
- iOS系列 基础篇 06 标签和按钮 (Label & Button)
iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single Vi ...
- Bootstrap<基础二十> 标签
Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...
- HTML基础及一般标签
HTML 内容 Hyper Text Markup Language 超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...
- HTML基础：<a>标签 编写个人收藏夹
编写个人收藏夹 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- JavaScript基础插曲—获取标签，插入元素，操作样式
Js基础 1:document.write() 这个是动态创建元素内容,利用js.这个可以利用js来创建元素,文本,标签等,document.write()与document.writeln()的区别 ...
- 【HTML】 HTML基础知识 一些标签
额..是这样的,去年为了学习web框架,自己开发了一个zbx配置管理的二次开发系统,当时从零开始接触web开发,也第一次接触到了前端的一些知识.其中最基础的就是html/css了.我把那部分笔记整理上 ...
- HTML基础篇（标签和属性整--已剔除不被浏览器支持的部分）
行内元素有:a b span img input select strong 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p HTML 参考手册- (HTML5 标 ...
- css的基础用法之标签选择
一.css的4种引入方式 #.内联式 <p style="color: red;font-size: 50px;text-align: center">Egon是一个非 ...
- css基础 引用方式 标签选择器 优先级 各式布局
今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...
- 前端基础：HTML标签(下)
前端基础HTML标签(下) 1.表单 表单的功能主要用于向服务器传输数据,从而实现客户端与Web服务器的交互.表单能够包含input系列标签,比如:文本字段.复选框.单选按钮.提交按钮等:表单还包含t ...
随机推荐
- JS中的“==”符号及布尔值转换规则
what are the rules for how == converts types? 关于"=="的比较规则: 1. Comparing numbers and string ...
- 在 Azure 中创建通用 VM 的托管映像
可以从在存储帐户中存储为托管磁盘或非托管磁盘的通用 VM 中创建托管映像资源. 然后可以使用该映像创建多个 VM. 使用 Sysprep 通用化 Windows VM Sysprep 将删除所有个人帐 ...
- “由于这台计算机没有终端服务器客户端访问许可证”解决方案
由于windows2003默认仅支持2个终端用户的登陆.当"终端连接超出了最大连接"的情况出现导致不能登录. 1.在另外一台Windows2003的机器上运行"tsmmc ...
- Oracle EBS OM 登记订单
DECLARE l_header_rec OE_ORDER_PUB.Header_Rec_Type; l_line_tbl OE_ORDER_PUB.Line_Tbl_Type; l_action_r ...
- trait代码复用
在面对对象编程中我们经常通过继承来解决部分代码多次出现的问题 php支持单继承,有时候由于不相关联的两个类的方法相同我们需要进行继承操作, trait可以实现不继承的情况下复用代码 trait的使用类 ...
- 浏览器加载和渲染html的顺序-css渲染效率的探究（转载）
1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...
- python: 用pygments给markdown文档染色
首先你需要一个markdown解析器 比如有常见的markdown和markdown2,其他的可以参考这个网站的评价 我选择了mistune,自己继承写一个渲染的Renderer mistune的do ...
- SQL Server：INFORMATION_SCHEMA.columns 与sys.columns 与 syscolumns对比
sys.columns视图 sys.columns是SQL Server从2005版本起引入的新的系统级视图.相关链接如下: Mapping SQL Server 2000 System Tables ...
- 详解coredump
一,什么是coredump 我们经常听到大家说到程序core掉了,需要定位解决,这里说的大部分是指对应程序由于各种异常或者bug导致在运行过程中异常退出或者中止,并且在满足一定条件下(这里为什么说需要 ...
- MySQL数据库常用操作和技巧
MySQL数据库可以说是DBA们最常见和常用的数据库之一,MySQL的广泛应用,也使更多的人加入到学习它的行列之中.下面是老MySQL DBA总结的MySQL数据库最常见和最常使用的一些经验和技巧,分 ...