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. 【小梅哥SOPC学习笔记】SOPC开发常见问题及解决办法集锦

    SOPC开发常见问题及解决办法集锦 一.Symbol 'NULL' could not be resolved 近期在评估使用NIOS II处理器进行项目的开发,我使用的软件是Quartus II 1 ...

  2. iTerm2 + Oh My Zsh 打造舒适终端体验

    iTerm2 + Oh My Zsh 打造舒适终端体验 写在前面 最终效果图: 因为powerline以及homebrew均需要安装command line tool,网络条件优越的同学在执行本文下面 ...

  3. 阿里云云主机添加swap分区与swap性能优化

    1.swap的功能与相应内核参数 Linux 将物理内存分为内存段的部分被称作“页面”.交换是指内存页面被复制到预先设定好的硬盘空间(叫做交换空间)的过程,目的是释放用于页面的内存.物理内存和交换空间 ...

  4. 20145218张晓涵 web安全基础实践

    20145218张晓涵 web安全基础实践 1.实验后回答问题 SQL注入攻击原理,如何防御 SQL注入漏洞是指在Web应用对后台数据库查询语句处理存在的安全漏洞.也就是,在输入字符串中嵌入SQL指令 ...

  5. [LeetCode 题解]: Merge k Sorted Lists

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 题 ...

  6. java 异步调用与多线程

    异步与多线程的区别 一.异步和多线程有什么区别?其实,异步是目的,而多 线程是实现这个目的的方法.异步是说,A发起一个操作后(一般都是比较耗时的操作,如果不耗时的操作 就没有必要异步了),可以继续自顾 ...

  7. ArrayList用法详解与源码分析

    说明 此文章分两部分,1.ArrayList用法.2.源码分析.先用法后分析是为了以后忘了查阅起来方便-- ArrayList 基本用法 1.创建ArrayList对象 //创建默认容量的数组列表(默 ...

  8. C#多线程学习(三) 生产者和消费者

    前面说过,每个线程都有自己的资源,但是代码区是共享的,即每个线程都可以执行相同的函数.这可能带来的问题就是几个线程同时执行一个函数,导致数据的混乱,产生不可预料的结果,因此我们必须避免这种情况的发生. ...

  9. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  10. Android应用-底部导航栏的使用

    目录 1. 设计底部导航栏页面 1.1. 创建必须的文件夹 1.2. 设计主页面 2. 设计逻辑函数 3. 项目展示 底部导航栏是基于Bottom Navigation Bar 插件使用的 这个插件包 ...