简单的学习一下HTML
学习HTML采用在www.runoob.com上学习的方法。
而且该网站还提供在线编辑器。
然后HTML编辑器使用Notepad++
记得上Emmet的官网http://emmet.io下载适合Notepad++的Emmet来增加代码编辑速度。
<!DOCTYPE html><html><head><meta charset="utf-8"> ??<!-- 用来描述HTML页面的编码 --><title>文档标题</title></head><body></body></html>
这是一个标准的HTML页面模板
头部元素
<base>
base标签可以描述HTML文档中所有链接的默认链接,并且可以指定HTML中所有链接的跳转方式,即target
<head><base href="http://www.runoob.com/images/" target="_blank"></head>
<link>
link标签定义了HTML文档与外部资源之间的关系,比如说链接到哪个CSS样式表。
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<style>
style元素中可以直接添加样式来渲染HTML页面
<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head>
<mate>
mate元素可以指定网页的描述,关键词,修改时间,作者,编码,刷新间隔时间等
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> #定义关键词<meta name="description" content="免费 Web & 编程 教程"> #定义描述<meta name="author" content="jack-peng"> ?#定义作者<meta http-equiv="refresh" content="30"> ?#每30秒刷新一次页面
<meta charset="utf-8"> ???????????????????#定义编码
一些常用的标签/元素
超链接<a>:
<a href="http://连接url地址" target="_blank">链接</a> ?
<!-- target="_blank" 表示会在新窗口中打开链接 -->
<!-- 假如链接的位置是在框架中,target="_top" 会帮助你跳出框架 ?target="_blank"也有同样的效果,但是会在新的窗口中打开,原来的窗口不动。-->
图片<img>:
<img src="/images/logo.png" width="258" height="39" border="0"/>
border属性会定义图片的边框
表格<table>:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title></head><body>
???<table border="1"> ???????????<tr> ???????<th>账号</th> ???????<th>密码</th> ?????</tr> ???????????<tr> ?????<th rowspan="2">vip</th> ?????<td>5768</td> ?????</tr> ???????????<tr> ?????<td>4567</td> ?????</tr> ???????????<tr> ???????<td>jack</td> ???????<td>123437</td> ?????</tr> ???????????<tr> ???????<td>alex</td> ???????<td>123123</td> ?????</tr> ????????????<tr> ???????<td>alex</td> ???????<td>123123</td> ?????</tr> ???????????????<tr> ???????<td colspan=2 >制表人:XXX</td> ?????</tr> ???????</table></body></html>
表格使用标签<table>来进行创建,border属性是表格的边框,一般我们不创建边框为0的表格,因为这根本就不是表格了。
<tr>代表表格的每一行,可以理解成table row,一个tr就是表格的一行,每一行有多个列,用td标签来表示列。
不能单独使用<td>标签,<tr>标签是<td>标签的容器。<td>标签实际上是表格里面的单元格更为贴切。
<tr>标签中除了<td>还有<th>,th代表表头,实际上就是<td>的加粗显示,可以作为第一行,也可以作为整个表格的第一列。
跨行和跨列显示,跨行和跨列显示只能在td或者th中去进行设置,因为这是单元格的操作,td和th才是单元格。
tr不是单元格,它是一整个行。
另外还有单元格的间距、边距等都可以设置,这里不再讨论了。
一些常用的空元素
<br> 换行,多个换行符叠加有效
<hr> 水平线
元素/标签的常用属性:
class ?为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id ????定义元素的唯一id
style ?规定元素的行内样式(inline style)
titl ??描述了元素的额外信息 (作为工具条使用)
PHP全栈开发(四): HTML 学习(1.基础标签+表格标签)
原文地址:https://www.cnblogs.com/sparrow32/p/9424870.html