html基础
　　（1）什么是html？超文本标记语言
　　　　用于开发网页的语言，由浏览器解释执行
　　（2）html文件的基本结构
　　<html>
　　　　<head>
　　　　<title></title>
　　　　　　<!--用于模拟http消息头-->
　　　　　　<!--比如以下消息头的作用，是告诉浏览器，返回的是一个html，并应该以utf-8的编码来显示该页面-->
　　　　　　<!--html文件保存的编码应该与meta声明的编码一致-->
　　　　　　<meta http-equiv="content-type" content="text/html;charset=utf-8">
　　　　　　<!--引入脚本-->
　　　　<script>
　　　　　　<!--定义样式-->
　　　　<style>
　　　　　　<!--引入外部样式-->
　　　　<link>
　　　　</head>
　　　　<body>
　　　　　　<!--页面显示的数据-->
　　　　</body>
　　</html>
　　（3）web开发标准
　　　　　　w3c建议，开发一个页面，应该这样设计：页面的结构（包括了数据），由html文档来负责；
　　　　　　页面的外观，由css文档来负责；
　　　　　　页面的行为，由javascript文档来负责。
　　（4）链接
　　　　a、基本使用：<a href="url地址" target="_blank">链接的描述</a>
　　　　　　　target="_blank"在一个新的空白的页面打开
　　　　　　　target="_self"在当前窗口打开（默认的）
　　　　b、使用图片作为链接
　　　　　　<img src="图片地址" width="" height="" border=""/>
　　　　c、使用热点
　　　　　　<img XXXX usemap="#Map">
　　　　　　<map name="Map">
　　　　　　　　<area shape="rect" coords="1,1,1,1",href="url地址">
　　　　　　</map>
　　　　　　当shape=“rect”（矩形）时，coords的值为左右个顶点的值，当shape=“circle”　圆形时，一个坐标一个半径长度
　　　　d、使用锚点:再用一个页面内部跳转
　　　　　　<a name="top"></a>
　　　　　　举例:
　　　　　　　　<a name="top">some data...</a>
　　　　　　　　<div style="height:900px;"></div>
　　　　　　　　<a href="#top">to Top</a>
　　　　e、发送邮件
　　　　　　<a href="mailto:邮箱地址?subject=hello"></a>
　　　　f、链接中的伪样式（css中再讲）
　　（5）列表
　　　　a、无序列表
　　　　　　<ul>
　　　　　　　　<li><a href="test.html">1</a></li>
　　　　　　　　<li><a href="#">2</a></li>
　　　　　　　　<!--#表示当前页面-->
　　　　　　　　<li>3</li>
　　　　　　</ul>
　　　　b、有序列表
　　　　　　<ol>
　　　　　　　　<li><a href="test.html">1</a></li>
　　　　　　　　<li><a href="#">2</a></li>
　　　　　　　　<li>3</li>
　　　　　　</ol>
　　　　c、列表嵌套
　　　　　　<ul>
　　　　　　　　<li><a href="test.html">item1</a></li>
　　　　　　　　<ul>
　　　　　　　　　　<li><a href="#">item2</a></li>
　　　　　　　　　　<li>item3</li>
　　　　　　　　</ul>
　　　　　　　　<li>item3</li>
　　　　　　</ul>
（6）表格
　　　　a、基本使用：<tr>:行 <td>；列
　　　　　　<table border="3px" width="40%" cellpadding="3" cellspacing="10">
　　　　　　　　<tr>
　　　　　　　　　　<td align="center">id</td>
　　　　　　　　　　<td>name</td>
　　　　　　　　　　<td>sal</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td>001</td>
　　　　　　　　　　<td>java</td>
　　　　　　　　　　<td>20.00</td>
　　　　　　　　</tr>
　　　　　　</table>
　　　　　　border:边框的宽度
　　　　　　cellpadding：单元格里面的数据与单元格边框之间的距离
　　　　　　cellspacing：单元格之间的距离
　　　　　　width：50%或者500，宽度
　　　　　　align:left、center、right,水平位置
　　　　　　valign：top、middle、bottom ，垂直位置
　　　　b、不规则的表格
　　　　　　cospan：跨列合并
　　　　　　rowspan：跨行合并
　　　　　　举例：
　　　　　　　　<table border="3px" width="40%" cellpadding="3" cellspacing="0">
　　　　　　　　　　<tr>
　　　　　　　　　　　　<td colspan="2" align="center">单元格1</td>
　　　　　　　　　　</tr>
　　　　　　　　　　<tr>
　　　　　　　　　　　　<td rowspan="2" align="center" valign="top">单元格2</td>
　　　　　　　　　　　　<td>单元格3</td>
　　　　　　　　　　</tr>
　　　　　　　　　　<tr>
　　　　　　　　　　　　<td>单元格4</td>
　　　　　　　　　　</tr>
　　　　　　　　</table>
　　　　c、表格的另一种写法：
　　　　　　　　<table>
　　　　　　　　　　<caption>标题</caption>
　　　　　　　　　　<thead></thead>
　　　　　　　　　　<tfoot></tfoot>
　　　　　　　　　　<tbody></tbody>
　　　　　　　　　　<tbody></tbody>
　　　　　　　　</table>
　　　　　　　　thead：表头，0/1
　　　　　　　　tfoot:表脚，0/1
　　　　　　　　fbody：表体，1/n
　　　　　　d、表格可以嵌套
　　　　　　　　<table border="3px" width="40%" cellpadding="3" cellspacing="0">
　　　　　　　　　　<tr>
　　　　　　　　　　　　<td>abc</td>
　　　　　　　　　　　　<td>abc2</td>
　　　　　　　　　　</tr>
　　　　　　　　　　<tr>
　　　　　　　　　　　　<td>abc3</td>
　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　<table border="1" width="80% cellpadding="3" cellspacing="0">

　　　　　　　　　　　　　　　　<tr><td>1</td><td>2</td></tr>
　　　　　　　　　　　　　　　　<tr><td>3</td><td>4</td></tr>
　　　　　　　　　　　　　　</table>
　　　　　　　　　　　　</td>
　　　　　　　　　　</tr>
　　　　　　　　</table>
　（7）表单：用于收集用户的信息，比如登陆表单，可以让用户输入用户名、密码，这些信息会提交给服务器做验证
　　　　　　<form>
　　　　　　　　<input type="text"/>
　　　　　　</form>
　　　　input标记：
　　　　　　type="text":文本输入框
　　　　　　type="submit":提交按钮
　　　　　　type="reset":重置按钮
　　　　　　type="password":密码输入框
　　　　　　type="radio":单选
　　　　　　type="checkbox":多选
　　　　　　type="file":上传文件(给form添加一个属性 enctype=”multipart/form-data“)
　　　　　　type="hidden":隐藏域
　　　　非input标记：
　　　　　　<textarea>:多行文本输入框
　　　　　　<select>:下拉列表/多选框
（8）框架
　　什么是框架：用来将一个窗口划分成多个子窗口
　　a、<frameset>,<frame>
　　　　注意：frameset不能写在<body>里，可以嵌套使用。
　　b、<iframe>
　　　　可以使用在<body>里，表示嵌入一个子窗口
（9）其他标记
　　<h1>...<h6>:标题
　　行内标记：不单独占一行的标记----<span></span>、<strong></strong>
　　块级标记：另起一行的标记----<h1>...<h6>、<table>、<form>、<p></p>、<div>
（10）实体
　　在html页面中，出现了空格、>、<、"、& 应该用实体来代替
　　&nbsp; 空格
　　&gt; >
　　&lt; <
　　&quot; "
　　&amp; &
（11）html/xhtml：
　　xhtml：扩展的超文本标记语言

HTML基础笔记的更多相关文章

  1. Java基础笔记 – Annotation注解的介绍和使用 自定义注解

    Java基础笔记 – Annotation注解的介绍和使用 自定义注解 本文由arthinking发表于5年前 | Java基础 | 评论数 7 |  被围观 25,969 views+ 1.Anno ...

  2. php代码审计基础笔记

    出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...

  3. MYSQL基础笔记（六）- 数据类型一

    数据类型(列类型) 所谓数据烈性,就是对数据进行统一的分类.从系统角度出发时为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中讲数据类型分成三大类:1.数值类型,2.字符串类型和时间日期 ...

  4. MYSQL基础笔记（五）- 练习作业：站点统计练习

    作业:站点统计 1.将用户的访问信息记录到文件中,独占一行,记录IP地址 <?php //站点统计 header('Content-type:text/html;charset=utf-8'); ...

  5. MYSQL基础笔记（四）-数据基本操作

    数据操作 新增数据:两种方案. 1.方案一,给全表字段插入数据,不需要指定字段列表,要求数据的值出现的顺序必须与表中设计的字段出现的顺序一致.凡是非数值数据,到需要使用引号(建议使用单引号)包裹. i ...

  6. MYSQL基础笔记(三)-表操作基础

    数据表的操作 表与字段是密不可分的. 新增数据表 Create table [if not exists] 表名( 字段名 数据类型, 字段名 数据类型, 字段n 数据类型 --最后一行不需要加逗号 ...

  7. MYSQL基础笔记（二）-SQL基本操作

    SQL基本操作 基本操作:CRUD,增删改查 将SQL的基本操作根据操作对象进行分类: 1.库操作 2.表操作 3.数据操作 库操作: 对数据库的增删改查 新增数据库: 基本语法: Create da ...

  8. MYSQL基础笔记(一)

    关系型数据库概念: 1.什么是关系型数据库? 关系型数据库:是一种建立在关系模型(数学模型)上的数据库 关系模型:一种所谓建立在关系上的模型. 关系模型包含三个方面: 1.数据结构:数据存储的问题,二 ...

  9. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  10. JavaScript基础笔记一

    一.真假判断 真的:true.非零数字.非空字符串.非空对象 假的:false.数字零.空字符串.空对象.undefined 例: if(0){ alert(1) }else{ alert(2) } ...

随机推荐

  1. springDao的jdbctemplate

    pom文件 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http:/ ...

  2. 9、Semantic-UI之标题

    9.1 定义基础的标题样式   在Semantic-UI中定义了5种标题样式,h1~h5. 示例:基础样式定义 <h1 class="ui header">一级标题&l ...

  3. telnet ip port

    windows测试远程端口服务是否能连接上:telnet ip port windows7 系统需要手动启用telnet功能,如下图:

  4. ZKEACMS for .Net Core 深度解析

    ZKEACMS 简介 ZKEACMS.Core 是基于 .Net Core MVC 开发的开源CMS.ZKEACMS可以让用户自由规划页面布局,使用可视化编辑设计“所见即所得”,直接在页面上进行拖放添 ...

  5. win7下安装numpy

    OS: WIN7 32bit Python: 3.4 在以下网站下载: numpy-MKL-1.9.0.win32-py3.4.exe

  6. 性能测试工具Locust的介绍和使用

    内容来自网络 https://www.w3xue.com/exp/article/20191/16707.html https://blog.csdn.net/qq_36255988/article/ ...

  7. 【ocp 052又加新题了】052新加的考试题及答案整理-第13题

    13.Which two are true about AWR snapshots? A) They are stored In the SYSAUX tablespace. B) They are ...

  8. “全栈2019”Java第四十七章：继承与方法

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. is 与 == 的区别;小数据池; 编码与解码

    1, is 与 == 的区别 ==  比较的是两边的值 is   比较的是两边的地址  id () 2,小数据池(在终端中) 数字小数据池的范围 -5 ~ 256 字符串中如果有特殊字符他们的内存地址 ...

  10. mysqli扩展库应用---程序范例

    通过mysqli扩展库对用户表user1进行增删改查操作,用户表user1结构如下: 1,建立数据库操作类库mysqliTool.class.php,代码如下: <?php class mysq ...