简单的学习一下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. SpringBoot中Tomcat和SpringMVC整合源码分析

    概述 ​ SpringBoot中集成官方的第三方组件是通过在POM文件中添加组件的starter的Maven依赖来完成的.添加相关的Maven依赖之后,会引入具体的jar包,在SpringBoot启动 ...

  2. HashSet存储自定义数据类型和LinkedHashSet集合

    HashSet存储自定义数据类型 public class Test{ /** * HashSet存储自定义数据类型 * set集合保证元素唯一:存储的元素(String,Integer,Studen ...

  3. Vue3：不常用的Composition API && Fragment、Teleport、Suspense && 与Vue2对比的一些变化

    1 # 一.Vue3不常用的Composition API 2 # 1.shallowReactive与shallowRef 3 .shallowReactive: 只处理对象最外层属性的响应式(浅响 ...

  4. 技术分享 | 简单测试MySQL 8.0.26 vs GreatSQL 8.0.25的MGR稳定性表现

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

  5. 基于vue2.0原理-自己实现MVVM框架之computed计算属性

    基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...

  6. 《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(12)-Fiddler设置IOS手机抓包，你知多少？？？

    1.简介 Fiddler不但能截获各种浏览器发出的 HTTP 请求,也可以截获各种智能手机发出的HTTP/ HTTPS 请求. Fiddler 能捕获Android 和 Windows Phone 等 ...

  7. django中的forms组件

    form介绍 用户需要向后端提交一些数据时,我们常常把这些数据放在一个form表单里,采用form标签,里面包含一些input等标签把用户的数据提交给后端. 在给后端提交数据的时候,我们常常也需要对于 ...

  8. BZOJ3295/Luogu3157 [CQOI2011]动态逆序对 (CDQ or 树套树 )

    /* Dear friend, wanna learn CDQ? As a surprice, this code is totally wrong. You may ask, then why yo ...

  9. Python逆向爬虫之scrapy框架,非常详细

    爬虫系列目录 目录 Python逆向爬虫之scrapy框架,非常详细 一.爬虫入门 1.1 定义需求 1.2 需求分析 1.2.1 下载某个页面上所有的图片 1.2.2 分页 1.2.3 进行下载图片 ...

  10. 2步就可以压缩PPT大小，再也不怕C盘飘红了！

    在座哪位小朋友的C盘已经红了,举个手让我看看! 嗯......还真不少啊! 经常做PPT的同学已经开始抱怨了:领导给的图片一张就10M起,一个PPT里面百来张图,文件大小都快1个G了. 如果是文秘岗, ...