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. opencv——pcb上找圆mark点（模板匹配）

    #include "stdafx.h" #include <cv.h> #include <highgui.h> #include <cxcore.h ...

  2. jquery实现简单抽奖功能

    一直纠结要怎么用jquery实现抽奖功能,看别人很多都是用flash制作的,找了很多资料,最终找到一个比较适合需求的,我做了些许调整,以下是代码展示(复制下来可以直接使用). 先上图:

  3. uni-app开发踩坑记录

    大部分问题是我在h5端看不到而在android.iOS平台上暴露出来的,不包含小程序 1.:class="['defaultStyle', dynamicStyle]" 不支持直接 ...

  4. [C#]合并单元格(行、列)

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明:控件ID指的是页面上面的Grid ...

  5. 造个轮子之基于 Netty 实现自己的 RPC 框架

    原文地址: haifeiWu和他朋友们的博客 博客地址:www.hchstudio.cn 欢迎转载,转载请注明作者及出处,谢谢! 服务端开发都会或多或少的涉及到 RPC 的使用,当然如果止步于会用,对 ...

  6. HDU - 6215 2017 ACM/ICPC Asia Regional Qingdao Online J - Brute Force Sorting

    Brute Force Sorting Time Limit: 1 Sec  Memory Limit: 128 MB 题目连接 http://acm.hdu.edu.cn/showproblem.p ...

  7. 【07】循序渐进学 docker：数据持久化

    写在前面的话 学到这里相信有心的朋友都发现问题了,我们每次都会去删掉容器,在创建新的容器.那数据怎么办?岂不删库跑路了? 就算不是数据库,假设公司有日志保留的需求,那每一次发布岂不日志都被干掉了? D ...

  8. “全栈2019”Java第十一章：标识符

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

  9. THUSC2017酱油记

    啊..酱油记三连发.. 果然SHTSC用掉太多RP了.. 其实感觉没什么好写的..都被考懵逼了.. 但还是写一下吧.. DAY0 月考完提前一天到了..什么也没发生 DAY1 先考试再开幕式..好奇怪 ...

  10. CentOS下TFTP服务安装

    CentOS下TFTP服务安装 今天和同学做交换机恢复DCN操作系统的任务,然后需要用到tftp,然后就开始研究.这里对TFTP服务进行介绍以及安装. tftp 比 ftp 更易于管理 tftp 比 ...