【2017-03-20】HTML基础知识,标记,表格,表格嵌套及布局,超链接
一、HTML 网站(站点),网页基础知识
HTML是一门编程语言的名字:超文本标记语言
可以理解为:超越了文本的范畴,可以有图片、视频、音频、动画特效等其他内容,用标记的方法进行编程的计算机语言
基本格式:
<html>
<title>标题名称</title>
<head>
网页渲染,特效
</head>
<body>
网页内容
</body>
</html>
二、标记
添加注释:<!--注释内容-->
1.文字标记
文字加粗:<b>文字</b> 或 <strong>文字<strong>
文字倾斜:<i>文字</i>
文字下划线:<u>文字</u>
文字颜色,字号,字体:<font color="" size="" face="">文字</font>
color可以为颜色的英文名称,也可以为色号,即#+(A-F)之间任意3个字母 (http://tool.oschina.net/commons?type=3)
size=1-7其中一个数字 1最小,7最大
face直接写字体的中文名称即可
2.图片标记
<img src="图片路径" width="宽度" height="高度" title="标签" alt="文字"> (图片最好和HTML文件放在一个同一个文件夹,方便操作) ../ 向上一层
title是图片标签,显示效果:将鼠标放置到图片上会显示该图片对应的标签的内容
高跟宽设置一个即可,显示图片会按比例缩放
alt在图片无法加载时,显示文字,还可帮助搜索引擎搜索
宽度和高度可以为数值,也可以为%,width=100%即为将图片左右平铺,height=100%即为将图片上下平铺
3、常用标记
--空格
<br/> --换行
<p>段落<p> --段落上下会各空一行
<h1>内容</h1>~<h6></h6> --标题标记
<div>内容</div> --层标签(默认占一行)
<ol type="1"或"a"或"i"> --有序列表
<li>序号1</li>
<li>序号2</li>
<li>序号3</li>
</ol>
<ul type="circle"> --无序列表
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
三、表格
1.基本格式
<table> --表格
<tr> --行
<td></td> --单元格
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表示创建一个表格,第一行有3个单元格,第二行有2个单元格
2.属性
border="" --边框粗细,0或1
width="" --宽度, px或%
height="" --高度, px或%
align="" --水平排列格式,center/left/right
valign="" --垂直排列格式,middle/top/bottom
bgcolor="" --背景色
background="" --背景图片
cellspacing="" --单元格之间的间距 外间距
cellpadding="" --单元格与内容的间距 内间距
3.去掉浏览器界面中表格四周的空白边框
在<head></head>输入如下代码:
<style type="text/css">
*{
padding:0px;
margin:0px;
}
</style>
四、超链接
<a href="链接地址">图片/文字</a> --点击图片/文字直接从本页面跳转到链接页面
注:链接地址如果是本地地址,填写相对路径即可;链接地址如果是公共网址,则必须加http://
<a href="链接地址" target="_blank">图片/文字</a> --点击图片/文字,会新建网页跳转到链接页面
【2017-03-20】HTML基础知识,标记,表格,表格嵌套及布局,超链接的更多相关文章
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 做好SEO需要掌握的20个基础知识
作为一个网站优化者,有一些基础seo知识点是大家必须要掌握的,网站排名的好快,和这些基础的SEO优化知识有没做好,有没做到位,有着直接的关系!今天,伟伟SEO就把我前面讲的SEO优化基础知识做个总结, ...
- 1.20 Python基础知识 - python常用模块-1
一.time和datetime 1.time模块 1)time.process_time() >>> import time >>> time.process_ti ...
- 20.Nodejs基础知识(上)——2019年12月16日
2019年12月16日18:58:55 2019年10月04日12:20:59 1. nodejs简介 Node.js是一个让JavaScript运行在服务器端的开发平台,它让JavaScript的触 ...
- 2017/05/20 java 基础 随笔
static 关键字的特点 1.随着类的加载而加载 2.优先于对象存在 3.被类的所有对象共享 如果某个成员变量是被所有对象共享的,那么他就应该定义为静态的 4.可以通过类名调用 其实它本身也可以通过 ...
- CSS3 网格布局(grid layout)基础知识 - 隐式网格自己主动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)
网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道.构成显式网格. 当网格项目定位在这些界限之外.网格容器通过添加隐式网格线生成隐式网格轨道. 这些隐 ...
- 【2017-03-20】HTML基础知识、文字标记、图片标记、空格换行、表格、表格嵌套及布局、超链接
一.HTML基础知识 HTML: 网站(站点) - 网页 网站是由一个或者多个网页组合起来的 HTML作为文件后缀名,可以把文件变为网页 HTML是一门编程语言的名字:超文本标记语言 超越了文字的范畴 ...
- Java学习-033-JavaWeb_002 -- 网页标记语言JSP基础知识
JSP 是 Sun 公司提倡的一门网页技术标准.在 HTML 文件中,加入 Java 代码就构成了 JSP 网页,当 Web 服务器访问 JSP 请求的时候,首先执行其中的 Java 程序源码,然后以 ...
- html基础知识2(有序无序列表,表格)2017-03-08
摘要:php 基础知识2 重点:有序无序列表:<a>标签:<table>标签 内容容器 1.段落标签 <p></p> 注: 执行前后换行,并空一行 ...
随机推荐
- oracle中,将两个select语句的结果作为一个整体显示出来
如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来.union和union ...
- shell分析日志常用指令合集
数据分析对于网站运营人员是个非常重要的技能,日志分析是其中的一个.日志分析可以用专门的工具进行分析,也可以用原生的shell脚本执行,下面就随ytkah看看shell分析日志常用指令有哪些吧.(log ...
- The iOS Simulator deployment target is set to 6.0
XCODE警告 Showing All Messages :-1: The iOS Simulator deployment target is set to 6.0, but the range o ...
- vuex 子组件传值
以下是基础的使用方法,详细且深入使用方法详细见博客:https://segmentfault.com/a/1190000015782272 Vuex官网地址:https://vuex.vuejs.or ...
- log4j。日志输出
log4j.rootLogger = debug , stdout , D , E log4j.appender.stdout = org.apache.log4j.ConsoleAppender l ...
- 在Linux直接运行安卓程序
Linux上的软件少得可怜,要是能够直接运行安卓程序,那将是意见很酷的事情. 方法原理:首先这个方法不需要开启安卓虚拟机,是直接在Linux上运行的. 谷歌在很早之前提出了archon的方案,能够直接 ...
- linux下禁止root远程登录和添加新用户
https://www.cnblogs.com/jianz/p/7979250.html 一.添加和root权限一样的用户 1. adduser admin passwd admin (修改密码) ...
- api-gateway-engine知识点(2)
GroupVersion实现engine本地缓存 package com.inspur.cloud.apigw.engine.cache; import java.util.Map;import ja ...
- 使用Python监控Linux系统
一.Python编写的监控工具 一.多功能系统资源统计工具dstat 1.dstat介绍 dstat是一个用Python语言实现的多功能系统资源统计工具,用来取代Linux下的vmstat.iosta ...
- react 基本配置使用
react入门的一些配置 安装和启动 npm install -g create-react-app create-react-app my-app cd my-app npm start 创建 t ...