HTML入门笔记案例展示(1)
一：
html标签&html书写规则
Html 的标签 分为如下 这两种 :
单标签: 单标签一般 用于特殊的含义, 例如 : <br/> 表示换行, <hr/> 水平线
双标签: 双标签一般用来 封装数据 , 展示特定的样式 , 例如 : <font>欢迎学习HTML</font>
l 标签的书写规则
在html 中 不管是单标签还是双标签, 都必须要 正确 关闭,
对于任何一个 html页面来说 , 都会有 一个 固定的 内容 :
Html 必须是以 html 做为 根标签, 然后 下面有 head 和 body 标签, 一般 head中 去写 标签 title 标签以及 meta 标签, 其中title 设置
Html页面的 标题内容. Meta 用于指定 html页面的 特定的属性信息.
扩展名: .html, .htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="5">
<title>这是我的第一个html实例</title>
</head>
<body>
<font color="red" size="20">亲, 你 </font>今天 duang 了 吗 ?
<br />
<font color="black" size="20">亲, 欢迎学习html技术 </font>
<font color="blue" size="30">我是杨道龙，你好吗？</font>
<br /> xxx <!-- html 中的注释 --> <!-- ctrl+shift + / : 注释
ctrl+shift + \ : 撤销注释
ctrl+z : 快速 反悔 -->
<!-- 李开复的撒娇路口附近的萨拉开发进度上来看 -->
</body>
</html>
二：
html中的常用标签
1、字体标签
Font 标签 : 双标签
<font></font>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body> <!-- font 标签中 常用到的属性 : face: 设置 字形
size: 大写 , 默认大小是 3, 设置 5 表示 比3 大两个字号 , 还可以 设置 +2, 与 直接设置 5 是同一个效果
color: 颜色值 , red , 还可以写 #十六进制的值 red, purple, gray,
#rgb : #000000 -->
<font color="#FFFF00">xxxx</font>
<font color="#808000">yyyy</font>
<hr/> ® 己注册
© 版权
™ 商标
半方大的空白
全方大的空白
</body>
</html>
2、html特殊字符
例如, 你现在有这种需求, 你就要在 页面 上 使用标签的时候 显示 一个 < > , 转义
3、列表标签：
就是清单标签 .
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>清单标签</title>
</head>
<body>
<!-- 有序清单 type用于 指定 序号的 样式 , 有5 种值 :
1, a,A, i, I
start 用于指定 从几开始, 就是阿拉伯数字 -->
<ol type="1" start="3">
<li>小丽</li>
<li>小明</li>
<li>敏敏</li>
<li>二球</li>
<li>二蛋</li>
<li>二万</li>
<li>二货</li>
<li>二狗</li>
</ol> <hr/>
<!-- 无序 清单
即没有序号排序，这是与ol有序清单的主要区别。 使用 ul 声明是无序清单, li 表示 清单中 每一项 type用于 设置清单项的显示样式, 有三种值
disc: 实心圆
circle: 空心圆
square: 方块
-->
<ul type="circle">
<li>java</li>
<li>javascript</li>
<li>c</li>
<li>c++</li>
<li>php</li>
<li>c#</li>
<li>o-c</li>
<li>python</li>
<li>luna</li>
<li>shell</li>
</ul>
<hr/>
<!--
自定义 清单 :
dl --- defined list dt: defined title ---- 用于 写 标题
dd: defiled document --用于写文档内容 -->
</body>
</html>
5、表格标签(重要)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 表格 标签的使用 :
table: 用于放置 tr, td
table
tr
td
tr: 代表 行,写一个tr就代表一行
td: 代表列 tr 中 每写 一个td 就表示 一个 列 ctrl+m ---- 全屏 给table 标签 添加 属性 :
cellspacing：定义单元格内容（内容一般是内表格）与单元格边框之间的距离。单元格里面其实还是表格，这里代表内部表格与外表格边框的距离。
cellpadding：单元格内文字与边框的间距。这时候的边框是内表格的边框。
border:用于指定 表框的 大小。图片或者图表的边框厚度
background="3.jpg"设置背景图片 tr: td:
colspan="5" ----- >> 指定 占用的 列
该一储存格向右打通的栏数。 rowspan="4" ----- >> 指定占用的行
该一储存格向下打通的列数。 --> <!-- 在<table border="2" width="50%" align="center" cellspacing="5" cellpadding="10">里面的algin的center属性是表总体位于浏览器的中间位置 -->
<!-- width="50%,表示表格始终都占浏览器页面屏幕的50% -->
<table border="2" width="50%" align="center" cellspacing="5" cellpadding="10" background="3.jpg">
<tr align="center"><!-- 设置第一行的内容文字为居中 -->
<td>1第一列</td>
<td>1第二列</td>
<td>1第三列</td>
</tr>
<tr align="right">
<td>2第一列</td>
<td>2第二列</td>
<td>2第三列</td>
</tr>
<tr>
<td>3第一列</td>
<td>3第二列</td>
<td>3第三列</td>
</tr>
<tr>
<td>4第一列</td>
<td>4第二列</td>
<td>4第三列</td>
</tr>
</table>
<hr/>
<!-- 实现 跨行跨列的 表格
都是在 td 里使用 colspan : 占 用的行
rowspan: 占用的列 colspan="2"---------》》 占用 2 列
rowspan="2"---------》》 占用 2行 在表格 中 , 有时候, 写 表格所占用的 宽度的 时候, 不会写 绝对的值 多宽 width="60%" ---》》 表示 表格的 宽度 为《相对值》, 随着表格的 宽度 变化而变化, 占用 整个 页面 宽度的 60% -->
<table border="10" align="center" width="60%">
<tr align="center">
<td colspan="2">1第一列</td>
<td>1第二列</td>
</tr>
<tr>
<td rowspan="2">2第一列</td>
<td>2第二列</td>
<td>2第三列</td>
</tr>
<tr>
<td>3第一列</td>
<td>3第二列</td>
</tr>
<tr align="center">
<td>4第一列</td>
<td>4第二列</td>
<td>4第三列</td>
</tr>
</table> </body>
</html>
入门笔记（2）见下一篇：http://blog.csdn.net/qq_32059827/article/details/51399344
HTML入门笔记案例展示(1)的更多相关文章
- HTML入门笔记案例展示(2)
结上一篇(1)http://blog.csdn.net/qq_32059827/article/details/51399288 6.超链接(重要): 超链接标签 就是 a 标签 <!-- 超链 ...
- 嵌入式OS入门笔记-以RTX为案例：六.RTX的任务调度
嵌入式OS入门笔记-以RTX为案例:六.RTX的任务调度 上一篇笔记介绍了一些绕开排程器(或调度程序,scheduler)来进行时间管理的一些小方法.这一篇详细介绍RTX的任务调度原理. RTX主要有 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- MySQL入门笔记
MySQL入门笔记 版本选择: 5.x.20 以上版本比较稳定 一．MySQL的三种安装方式: 安装MySQL的方式常见的有三种: · rpm包形式 · 通用二进制 ...
- golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web
micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go- ...
- Ruby小白入门笔记之 <Gemfile 文件>
因为初学Ruby,四处查资料无果,才来的贴出亲自试过的操作,覆盖整个个人入门笔记博客中,故所有的操作,都以最明了的方式阐述,当你创建完一个新的Rails应用后,你发现JAVA中我们可以编写maven聚 ...
- Blazor入门笔记（6）-组件间通信
1.环境 VS2019 16.5.1.NET Core SDK 3.1.200Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.简介 在使用B ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
随机推荐
- python脚本批量生成数据
在平时的工作中,经常会遇到造数据,特别是性能测试的时候更是需要大量的数据.如果一条条的插入数据库或者一条条的创建数据,效率未免有点低.如何快速的造大量的测试数据呢?在不熟悉存储过程的情况下,今天给大家 ...
- webpack4.1.1的使用详细教程
安装全局webpack cnpm install -g webpack 安装全局webpack-cli npm install -g webpack-cli 初始化:生成package.json文件 ...
- Node.js Query Strings
Query String 稳定性: 3 - 稳定 这个模块提供了一些处理 query strings 的工具,包括以下方法: querystring.stringify(obj[, sep][, eq ...
- 使用Spring实现定时任务
一．分类 从实现的技术上来分类,目前主要有三种技术(或者说有三种产品): Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可 ...
- Objective-C中的消息发送总结
关于OC中的消息发送的实现,在去年也看过一次,当时有点不太理解,但是今年再看却很容易理解. 我想这跟知识体系的构建有关,如果你不认识有砖.水泥等这些建筑的基本组成部分,那么我们应该很难理解建筑是怎么建 ...
- 记一个万金油开源框架JHipster
本文地址:http://blog.csdn.net/sushengmiyan/article/details/53190236 百搭代码生成框架 体验新技术汇总: Spring Boot Spring ...
- JDBC线程池创建与DBCP源码阅读
创建数据库连接是一个比较消耗性能的操作,同时在并发量较大的情况下创建过多的连接对服务器形成巨大的压力.对于资源的频繁分配﹑释放所造成的问题,使用连接池技术是一种比较好的解决方式. 在Java中,连接池 ...
- 让你的代码量减少3倍！使用kotlin开发Android(四) kotlin bean背后的秘密
上一篇我们介绍了缩短五倍的java bean,不知道你在看的时候有没有一种疑问捏? 本文同步自博主的私人博客wing的地方酒馆 再来回顾一下,两种代码的对比 public class User { p ...
- Docker容器时间与宿主机时间不一致
编写Dockerfile,在其中加入: RUN /bin/cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \ && echo ' ...
- boost::asio::spawn 将一统C++网络库
boost::asio::spawn 将一统C++网络库(金庆的专栏)boost::asio::spawn()创建一个协程,使C++网络编程大大简化,个人认为这使得 asio 成为C++首选网络库.b ...