Web前端学习——HTML
HTML其实还是蛮容易学习的，无非就是一些标签、格式的填写，大学的时候也做过网站设计，所以这里主要记录一些常用的HTML标签、属性以及书写方法等。
一、常见HTML格式
主要包含文件type，html标签、head标签、body标签三个主题标签，其中Head主要包含字符集、描述、关键字等信息，而Body标签里是HTML的主要内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> </body>
</html>
二、head标签
1、自闭合标签
（1）<meta>标签
<meta charset="UTF-8"> ##设置html内容字符集
<meta http-equiv="refresh" content="3"> ##每隔3秒刷新一次
<meta http-equiv="refresh" content="3;Url=http://www.hao123.com"> ##隔3秒刷新并跳转值url指定网页
<meta name="keywords" content="测试网页,网页头部"> ##指定网页关键字，利于SEO，网页搜索排序
<meta name="description" content="描述信息"> ##指定网页描述信息
（2）link
<link rel="shortcut icon" href="image/fac.ico"> ##头部图标
（3）stype
（4）script
2、主动闭合标签
（1）title
<title>网页头部标题内容</title> ##网页头部显示内容
三、body标签
1、a标签：
定义超链接，最重要的属性为href,超链接和锚使用
##普通超链接
<a href="http://www.hao123.com" target="_blank"> 中国人</a> ##通过a标签做锚点
<a href="#id1" > 第一章 </a>
<a href="#id2"> 第二章 </a>
<a href="#id3"> 第三章 </a> <div id="id1" style="height:100px"> 第一章内容 </div>
<p id="id2"style="height:300px"> 第二章内容 </p>
<div id="id3"style="height:500px"> 第三章内容 </div>
2、p标签：
定义段落，不换行,段落段落之间有间距
<p> 段落标签，不换行</p>
3、br标签：
换行标签
<p>段落标签，不<br>换行</p>
4、h标签：
标题标签，从h1-h6表示字体从大到小，加粗显示
<h1>中国人</h1>
<h2>中国人</h2>
<h3>中国人</h3>
<h4>中国人</h4>
<h5>中国人</h5>
<h6>中国人</h6>
5、span标签
白板，行内标签，段与段之间只有空格，不换行
<span>中国人</span>
<span>中国人</span>
<span>中国人</span>
6、div标签
白板，块级标签
<div>中国人</div>
<div>中国人</div>
<div>中国人</div>
7、input标签
标准输入框
<input type="text" name="username" value="Tom" ><br>
<input type="password" name="pwd" value="123456" >
<input type="button" value="注册" >
<input type="submit" value="提交" >
<input type="reset" value="重置" >
<input type="checkbox" name="双选" value="1" checked="checkted" >
<input type="radio" name="单选" value="1" checked="checkted" >
<input type="file" name="fname" enctype="multipart/form-data" >
8、form标签
表单使用,get方式提交数据拼接显示在url，post方式提交数据不拼接显示在url上（更安全）
<form action="http://www.hao123.com" method="get">
<input type="text" name="username" value="Tom" ><br>
<input type="password" name="pwd" value="123456" >
<input type="button" value="注册" >
<input type="submit" value="提交" >
<input type="checkbox" name="双选" value="1" >
<input type="radio" name="单选" value="1" >
</form>
9、textarea标签
接受多行文本输入，其中可以输入多行数据
<textarea name="username" >默认值</textarea>
10、select标签
下拉框标签，通过option指定下拉框内容
<select name="city" >
<option value="1" selected="selected">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
</select> <select name="city" size=10 mutiple="mutiple">
<option value="1" selected="selected">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
</select> <select name="city">
<optgroup label="省分">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
</optgroup>
</select>
11、img标签
图片标签
<img src="C:\Users\Desktop\001.jpg" style="height: 200px;width: 200px" >
<img src="file:///C:/Users/Desktop/001.jpg"> <a href="http://www.hao123.com">
<img src="001.jpg" style="height: 200px;width: 200px" title="名称" alt="描述">
</a>
12、ul标签
无序列表，对应的li标签标记列表行
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
13、ol标签
有序列表，对应的li标签标记列表
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
14、dl标签
分层列表，用dt标签表示标题，用dd标签表示列表内容
<dl>
<dt>第一层</dt>
<dd>1.第一层列表</dd>
<dd>2.第一层列表</dd>
<dd>3.第一层列表</dd>
<dt>第二层</dt>
<dd>1.第二层列表</dd>
<dd>2.第二层列表</dd>
<dd>3.第二层列表</dd>
</dl>
15、table标签
表格标签，通过tr表示行，td表示单表格
（1）第一种table写法
<table border="1.5">
<tr>
<td>第一个行第一个表格</td>
<td>第一个行第二个表格</td>
<td>第一个行第三个表格</td>
<td>第一个行第四个表格</td>
</tr>
<tr>
<td>第二个行第一个表格</td>
<td>第二个行第二个表格</td>
<td>第二个行第三个表格</td>
<td>第二个行第四个表格</td>
</tr>
</table>
（2）第二种table写法
<table border="1.2">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一列数据</td>
<td>第二列数据</td>
<td>第三列数据</td>
<td>第四列数据</td>
</tr>
<tr>
<td>第一列数据</td>
<td>第二列数据</td>
<td>第三列数据</td>
<td>第四列数据</td>
</tr>
</tbody>
</table>
<td colspan="2">第一个行第二个表格</td> ##横向合并合并单元格
<td rowspan="2">第一个行第四个表格</td> ##纵向合并单元格
16、lable标签
用于标记文本输入
<label for="username"> 用户名: </label>
<input id="username"type="text" >
17、fieldset标签
用于文本框
<fieldset>
<legend>
登陆
</legend>
<label for="username"> 用户名: </label>
<input id="username"type="text" ><br>
<label for="password"> 密 码: </label>
<input id="password"type="password" >
</fieldset>
Web前端学习——HTML的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 立方体旋转 【web前端学习部落22群120342833】
效果: HTML部分: <body class="body"> <div class="rect-wrap"> <!-- // ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- 2015 WEB前端学习路线图
2015 WEB前端学习路线图,欢迎小伙伴补充 @落雨
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
随机推荐
- .12-Vue源码之patch（2）
快完事咯! 简单看了下patch函数,虽然不长,但是实际上很长很长,慢慢来吧, 首先来个总览: // line-5250 // oldVnode => 原生DOM节点 // vnode => ...
- 学习UML --用例图
用例图用于描述系统提供的系列功能.使用用例图的主要目的是帮助开发团队以一种可视化的方式理解系统的功能需求.用例图对系统的实现不做任何说明,仅仅是系统功能的描述. 用例图主要在需求分析阶段使用,用于描述 ...
- CodeForces - 556B Case of Fake Numbers
//////////////////////////////////////////////////////////////////////////////////////////////////// ...
- 2017 ICPC 广西邀请赛1005 CS Course
CS Course Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- zookeeper详解
ZooKeeper 1.Zookeeper(***必须掌握***) 官方网址:http://zookeeper.apache.org/ Ø 什么是Zookeeper? l Zookeeper 是 G ...
- gulp learning note
为啥写这一片文章呢? 主要是为了温故而知新和分享,也是为了更加促进自己的学习! 前端自动化工具很多 有grunt gulp webpack 等 这次主要分享下gulp的学习经验,让自己更好的总结 ...
- Hive安装和部署
在root的用户下搭建的 构建hive之前必须要先搭建好hadoop才可以. hive定义了一种类似SQL查询语言--HQL 类似SQL ,但是不完全相同 Hive是一个数据仓库,它部署在Hadoop ...
- Nginx Location 匹配
location匹配命令 ~ #波浪线表示执行一个正则匹配,区分大小写~* #表示执行一个正则匹配,不区分大小写^~ #^~表示普通字符匹配,如果该选项匹配,只匹配该选项,不匹配 ...
- 取得 iframe 容器的 URL
检测所在窗口是否为最外层的窗口,若不是则跳脱包含它的框架 if( window !== window.top ) { window.top.location = location; } top ...
- linux中安装Python3.x
首先了解几句Linux命令是必须的.例如 ls, vi, wget, rm, mv, cd, su, sudo, chmod, tar等等一些常用的语句命令是有必要知道它的用法的. 安装Python3 ...