简单的学习一下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.基础标签+表格标签）的更多相关文章

  1. python 全栈开发，Day45（html介绍和head标签，body标签中相关标签）

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来指定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  2. Python 全栈开发四 python基础 函数

    一.函数的基本语法和特性 函数的定义 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的.函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数 ...

  3. python全栈开发_day15_模块学习

    一:模块 1)什么是模块 每一个py文件就是一个模块 导入模块,会编译执行 1.形成一个对应的pyc文件 2.产生该模块自己的店全局名称空间 3.在使用该模块的全局名称空间中产生一个名字(导入的模块名 ...

  4. Python全栈开发——Linux命令学习

    Linux -- 一切皆文件 pwd: 查看当前所在目录 '/' :根目录 cd : 切换目录   eg.cd /    切换到根目录 ls:查看当前根目录下有几块盘.几个文件 ls -l:查看详细信 ...

  5. 巨蟒python全栈开发数据库前端1:HTML基础

    1.HTML介绍 什么是前端? 前端就是我们打开浏览器的页面.,很多公司都有自己的浏览器的页面,这个阶段学习的就是浏览器界面 比如京东的界面:https://www.jd.com/ 引子 例1 soc ...

  6. 巨蟒python全栈开发数据库前端3:CSS基础2

    1.文本属性 2.背景属性 3.边框属性 4.display属性 5.盒子模型

  7. 巨蟒python全栈开发数据库前端4:CSS基础3

    1.float浮动 清除浮动 2.position定位&overflow溢出&z-index属性 3.定位补充 4.导航栏

  8. python全栈开发目录

    python全栈开发目录 Linux系列 python基础 前端~HTML~CSS~JavaScript~JQuery~Vue web框架们~Django~Flask~Tornado 数据库们~MyS ...

  9. python全栈开发中级班全程笔记（第二模块、第四章）（常用模块导入）

    python全栈开发笔记第二模块 第四章 :常用模块(第二部分)     一.os 模块的 详解 1.os.getcwd()    :得到当前工作目录,即当前python解释器所在目录路径 impor ...

  10. .NET全栈开发工程师学习路径

    PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ...

随机推荐

  1. 【docker专栏7】容器自启动与守护进程停止后容器保活

    本文为大家介绍容器自启动以及docker 守护进程挂掉或者docker升级的情况下,如何保证容器服务的正常运行.主要包含三个部分 一.守护进程开机自启 在我们安装docker的时候,介绍过启动dock ...

  2. Azure Devops(十四) 使用Azure的私有Nuget仓库

    哈喽大家好,最近因为工作的原因没有时间写文章,断更了俩月,今天我们开始继续研究Azure上的功能. 今天我们开始研究一下Azure的制品仓库,在之前的流水线的相关文章中,我们都使用到了制品仓库用来保存 ...

  3. 第二天python3 set常用方法

    set set的元素要求set的元素必须可hash,目前学过的不可hash的类型有list.set: 1.元素不可以被索引 可变的.无序的.不重复的元素的集合 2.set可以被迭代 set增加 add ...

  4. 智慧文旅IOC大数据可视化建设方案

    一.建设背景 自2020年以来,疫情对各行各业的都造成了不同程度的影响,对依赖人口消费实现商业价值的文旅行业更是受到了更大的冲击,因此在疫情当下以及科技发达的今天,如何利用科技的手段赋能文旅行业进行数 ...

  5. 技术分享 | load data导致主键丢失的神秘问题

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 1 ...

  6. vue2自定义指令-加载指令v-loading和占位图指令v-showimg

    了解自定义指令的钩子函数 bind(){}:每当指令绑定到元素上的时候,就会立刻执行bind这个函数.只调用一次. 和css相关的操作,可以放在这个钩子函数中. inserted(){}:元素插入到D ...

  7. vue脚手架创建项目后使用路由报错Object(...) is not a function问题

    在这之前我做过的vue项目没有这种问题,今天突然出现这个问题,也检查了很久的代码,最后解决我也不知道我是哪一步做错了 首先我是创建的vue2项目,基本操作跟平常一样,在运用路由跳转的时候遇到这个问题 ...

  8. vue自定义switch开关，使用less支持换肤

    实际项目用到了,记录一下,也方便以后使用,这样也可以避免为了使用一个switch,引入整个外部web框架: 也可以方便更好的理解是和使用less. 基础代码使用的是网上的,然后自己添加了less换肤, ...

  9. HCIA-Datacom 3.2 实验二：生成树基础实验

    实验介绍 以太网交换网络中为了进行链路备份,提高网络可靠性,通常会使用冗余链路.但是使用冗余链路会在交换网络上产生环路,引发广播风暴以及MAC地址表不稳定等故障现象,从而导致用户通信质量较差,甚至通信 ...

  10. SecureCRT 和 Xshell 连接ENSP 教程

    前言:很多人问我说想尝试使用 CRT和Xshell连接 ENSP的某台设备,以模拟现网中的工作状态,所以出了这篇随笔. ENSP版本: Xshell 连接教程 Xshell 7 评估版(其他版本没测试 ...