01 HTML 概述

By Kevin Song

定义：HTML 超文本标记语言

特点

最基础的网页语言
代码都是由标签组成
代码不区分大小写

<html><head><title>Kevin's Homepage</title></head><body>Welcome to <font color="red" size=36>Kevin's</font> Homepage!<br>enjoy</body>
</html>

代码组成

< html>开始
- < head>头部分开始
  - 给页面增加辅助信息或者属性，最先加载
- < /head>头部分结束
- < body>体部分开始
  - 存放页面数据的地方
- < /body>体部分结束
< /html>结束

标签格式：

<标签名 属性名="属性值"> 数据内容 </标签名>
<br></br>           //换行
<hr></hr>           //横线分隔符
<font>data</font>   //字体
<标签名 属性名="属性值" />
<br/>               //换行
<hr/>               //横线分隔符
<font/>             //修改往后所有字体

标签操作思想：标签相当于一个容器，对数据进行封装，通过操作标签的属性来进行对数据的操作

常用标签

字体

<font color="#FF0000" size="+6">HelloWorld</ font>

标题

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

转义字符：&;

&lt;        <
&gt;        >
&nbsp;
&times;     ×

注释：\

列表

列表标签：< dl>< /dl>
上层项目：< dt>< /dt>
下层项目：< dd>< /dd>

<dl><dt>游戏名称</dt><dd>魔兽世界</dd><dd>星际争霸</dd><dd>守望先锋</dd><dt>部门名称</dt><dd>开发</dd><dd>美工</dd><dd>运营</dd>
</dl>

有序和无序列表

有序列表：
- < ol type=”a”>
  - < li>内容< /li>
  - < li>内容< /li>
  - < li>内容< /li>
- < /ol>

有序列表type

< ol type=”1”>//默认数字效果
1. < ol type=”i”>
  1. < ol type=”a”>

<ol><li>内容</li><li>内容</li><li>内容</li>
</ol>

无序列表：
- < ul type=”circle”>
  - < li>内容
- < li>内容
< li>内容

< /ul>

无序列表三种type

< ul type=”circle”>
- < ul type=”disc”>
  - < ul type=”square”>

<ul type="circle"><li>内容</li><li>内容</li><li>内容</li>
</ul>

<html><head><title>Kevin's Homepage</title></head><body><h1>Welcome to Kevin's Homepage!</h1><!--演示列表标签--><dl><dt>游戏名称</dt><dd>魔兽世界</dd><dd>星际争霸</dd><dd>守望先锋</dd><dt>部门名称</dt><dd>开发</dd><dd>美工</dd><dd>运营</dd></dl><hr/><!--有序和无序的项目列表--><ol><li>内容</li><li>内容</li><li>内容</li></ol><ul><li></li><li></li><li></li></ul></body>
</html>

图像标签

标签：< img>

标签属性

src：图片源
height：图片高度
width：图片宽度
border：添加边框
alt：图片描述信息

<img src="c:\1.jpg" height=920 width=1080 align="middle" border="3" alt="Helloworld" />

图像地图\

<img src="Chinese Map" alt="图片说明文字" usemap="#Map"/><map><area shape="rect" coords="50,59,116,104" href="1.html" /><area shape="circle" coords="118,203,40" href="1.html" /></map>

表格标签

组成

< caption> 标题
< th> 表头标签（加粗居中）
< tr> 行标签
< td> 单元格标签

表格属性

border：边框
bordercolor=：边框颜色
cellpadding：单元格内边距
cellspacing：单元格与单元格距离
width：宽度

<table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width><tbody><caption>表格标题</caption><tr><th>第一行第一列加粗并居中</th><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></tbody>
</table>

合并单元格

横向合并

<table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width><tbody><caption>表格标题</caption><tr><th colspan=2>第一行</th></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></tbody>
</table>

纵向合并

<table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width><tbody><caption>表格标题</caption><tr><th rowspan =2>第一行第一列加粗并居中</th><td>第一行第二列</td></tr><tr><td>第二行</td></tr></tbody>
</table>

超链接

作用：链接资源

超链接一

<a href="http://www.baidu.com" target="窗体名">百度</a>

href属性需要指定协议，如果没有指定协议，则默认使用file协议

超链接类型

http 网页
imgs 图片
mailto 邮箱
thunder等自定义协议
自定义超链接功能

<a href="http://www.baidu.com">百度</a>

<a href="imgs/1.jpg">图片</a>

<a href="mailto:Kevin.Song@gmail.com">邮件</a>

<!--下载文件-->
<a href="http://www.xunlei.com/movies/avengers.avi">复仇者联盟</a><br/>
<!--迅雷下载-->
<a href="thunder://www.xunlei.com/movies/avengers.avi">复仇者联盟</a>

<a href="javascript:void(0)" onclick="alert('你好')">自定义功能超链接</a>

超链接二

定位标记：锚

<a name="mark">Mark</a>

超链接

<a href="#mark">Back to Mark</a>

锚和超链接结合使用才有效

<html><head><title>Kevin's Homepage</title></head><body><a name=top>顶部</a><hr/>正文1<hr/><a name=center>中间</a><hr/>正文2<a href="#top">返回顶部</a><a href="#center">返回中间</a></body>
</html>

框架

框架定义在head和body之间

<html><head><title>Kevin's Homepage</title></head><frameset rows="30%,*"><frame src="1.html" name="page1"/><frameset cols="30%,*"><frame src="2.html" name="page2"/><frame src="3.html" name="page3"/></frameset></frameset><body></body>
</html>

画中画标签

<html><head><title>Kevin's Homepage</title></head><body><iframe src="1.html" height=300 width=300>这是画中画标签，如果您看到这段文字，很遗憾，你的浏览器不支持该标签</iframe></body>
</html>

笔记 HTML - 01 HTML 概述相关推荐

RN学习笔记01：概述、特点与环境搭建
RN学习笔记01:概述.特点与环境搭建一.RN概述 React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 Reac ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
【计算机网络学习笔记02】计算机网络概述（中）
[计算机网络学习笔记02]计算机网络概述(中) 计算机网络的定义.组成与分类 1计算机网络的定义 1.1 简单定义: 一些相互连接的.以共享资源为目的的.自治的计算机的集合. 1.2 通用定义: 利用 ...
iOS回顾笔记（ 01 ）-- XIB和纯代码创建应用的对比
iOS回顾笔记( 01 )-- XIB和纯代码创建应用的对比很多时候我们工作很久突然闲下来的时候,是不是也感到无聊过?这就是我现在的生活,不过闲一段时间也挺好,可以好好回顾一下自己以前学习iOS路 ...
PyQt5笔记（01） -- 创建空白窗体
目录 PyQt5笔记(01) – 创建空白窗体 PyQt5笔记(02) – 按钮点击事件 PyQt5笔记(03) – 消息框 PyQt5笔记(04) – 文本框的使用 PyQt5笔记(05) – 绝对 ...
IOS学习笔记02---语言发展概述,计算机语言简介.
IOS学习笔记02---语言发展概述,计算机语言简介. ------------------------------------------------------------------------ ...
GTK+图形化应用程序开发学习笔记（一）—概述
GTK+图形化应用程序开发学习笔记(一)-概述一.什么是GNOME. GNOME的意思是"GNU Network Object Model Environment"(GNU网络对 ...
深度学习笔记：01快速构建一个手写数字识别系统以及张量的概念
深度学习笔记:01快速构建一个手写数字识别系统神经网络代码最好运行在GPU中,但是对于初学者来说运行在GPU上成本太高了,所以先运行在CPU中,就是慢一些. 一.安装keras框架使用管理员模式打 ...
【模型】【课程笔记】01+02+03 金融风险管理导论
本文为课程<金融风险管理>第1-3章学习笔记,用于知识点总结和复习,对应教材<Quantitative Risk Management(2015)>,标号为原版书公式以便查阅. ...

笔记 HTML - 01 HTML 概述

01 HTML 概述

常用标签

列表

图像标签

表格标签

超链接

框架

笔记 HTML - 01 HTML 概述相关推荐

最新文章

热门文章