第一讲 html概述

1、认识HTML

<! DOCTYPE html>

<html>

<style></style>

<head><title></title></head>

<body>

<h1></h1>

//

<p></p>

</body>

</html>

2、图片路径

怎么加载图片 主要是写路径

<../ images/002.jpg>

几层几个../

<../../../201.gif>

这种指的是把链路地址跳出来

Alt 弹出框、

属性：宽高背景 透明度 内边距 外边距

为了保持图片的自然比例一般只改变宽度或者高度

不要写属性默认的单位

Title属性可以表示题目可以表示鼠标放在图片时所显示的文本

也可以表示弹出title=”小姐姐”

图片中的路径问题

相对路径：参照自身的位置定义的路径

绝对路径：在计算机里面的路径

3、行内元素、块元素、行内块元素的比较

块元素：p <br/> h1~h6 li ol dl dd dt div <hr/> form

行内块级元素  img  input button

行内元素 <b></b>  <strong></strong>  <i></i> lable <em ></em> sup sub

第二讲 标签的使用

HTML文字排版标记

1、常见的标签：

<p></p>  双标记元素

<br/>     单标记标签

<h1>~<h6> 双标记元素

列表

<ul></ul>  无序列列表

<ol></ol>   有序列表

<li></li>    列表项

<dl></dl>  定义列表  定义列表至少有一条说明

<dt></dt>  表明术语要说明的对象

<dd></dd>  三个都是双标记元素

2、标签属性

Ul 的属性type=square可以把小圆点变成实心的方形

Ul 的属性type=circle可以把小圆点变成空心的小圆点

Ul 的属性type=none可以把前缀去掉

<strong></strong> <b></b> 都是加粗，但是第一个具有强调的意思

<div></div>是一个块级元素，

3、元素之间的嵌套

标签和标签的嵌套：块级元素里面可以嵌套任何的元素

块级元素里可以嵌套块级元素 <div><h3></h3></div>

块级元素可以嵌套行内元素   <div><strong></strong></div>

块级元素里面可以嵌套行内块级元素  <div><img src=””/></div>

行内元素可以嵌套任何元素，除了块级元素。

行内元素嵌套行内元素 <b><i></i></b>

行内元素可以嵌套行内块级元素 <a href=”#” ></a>

<hr/>是一个水平线

4、<div></div>

1. 是一个块级元素

2. 占据一行

3. 高度、行高、外边距和内边距都可以控制

4. 宽度始终与浏览器一样，与内容无关

5. 没有自带样式

5、<span></span>

1. 行内元素

2. 与其他元素在一行上、

3. 高、行高以及外边距内边距都可以改变、

4.. 宽度只与内容有关

5. 没有自带的样式是行内元素之容纳文本或者其他行内元素

6. 表现性元素

<big ></big><small></small>

6、特殊标签和结束标签

< sup></sup> 上标

<sub></sub>  下标

H4被淘汰的标签：center、 font 、 big、small\

特殊文字符号的使用

空格

<      <

>      >

©   版权

第三讲 链接的使用

1、超链接

1）超链接概述

a超练级的 href属性值是url路径

Target 目标 在新窗口中打开用属性值 _blank

Title(标题） 鼠标放在超链接上的时候 显示的文超链接了；里面没有#的话表示刷新本页面

任何标签都可以有id 但是id的值是唯一的

回到哪个地方 就是#ID 锚点

2）伪类

伪类： a:link:

a:visited

a:hover:

a:active:

LOVE HATE 爱恨原则

3）href的值

Href的值

1、另一个页面的值 相对路径和绝对路径

2、锚点  #ID 或者是  # name

3、值为空  刷新本页面

4）target的属性

Target 的属性 目标

1、_blank  在新窗口中打开

2、_top  在窗口顶部打开

4、-self  自己窗口打开

5、 _parrent 后三种在窗口中都是吧原来的窗口覆盖了

鼠标放在超链接上面显示的文本  title

所有的标签都可以加的属性：id

ID 唯一的

Style  行内样式 值是由冒号引出值是由多个属性名和属性值构成的，用分好个跨

使用电子邮件链接

<a href=”mailto”></a>

网页中图片的分类

1、内容图片

2、修饰图片

三种格式

1. Gif 动图 支持透明 修饰类

2. Jpg jpeg ---色彩多不支持动图也不支持透明，是网页内容图片的首选

3. Png  内容或者修饰  支持透明效果最好 （考点）

2、热区的创 建<map>和<area> 难点要点

1）为图片的特定区域建立链接

Shape的取值

Circle

Rect

Poly

<area shape=”circle” coords/>

<img src="2.png" usemap="#mymap"/>

<map id="mymap" name="mymap">

<area shape="circle" coords="100,100,50" href="girl.html"/>

</map>

2）Map 必须有的属 id name

Map 必须有的属 id name

3）Area 必须有三个属性

确定形状 Shape

确定位置 coords

确定链接 href

3、框架的使用

1）行内框架

<iframe></iframe>

在body里面

2）框架集

只要用框架集不要再用body 或者不要在body里面写内容

<frameset  cols / rows =” ”>

<frame src=”” name=” ”/>

<frame src= “ ”/>

</frameset>

<frameset  cols =”20%, * ”> 剩多少 *就是多少

<frame src=”” name=” ”/>

<frame src= “ ”/>

</frameset>

不加边框 不加滚动条 不可移动

<frameset  rows="200px,300px,*" frameborder=0 >

<frame src= "re.html" / scrolling="no">

　　<frame src="girl.html" noresize/>

　　<frame src= "jin.html"/>

</frameset>

第四讲 软件和表格

1、Sublime软件的安装和快捷方法

1）快捷方法

生成html文档 点击纯文本 选择html 按英文的叹号 + tab

生成单个标签  标签名字+Tab

生成多个标签  标签名*个数 + tab

注释：选中要注释的内容 control+/

浏览的话就点击右键 会有在浏览器中打开 或者找路径

生成id为top的元素 <div id=”top”></div>  div#top  + tab

生成后代元素 用父元素名>子标签 + tab <div><a href=""></a></div>

Div*3>a tab

<div><a href=""></a></div>

<div><a href=""></a></div>

<div><a href=""></a></div>

Div>a*3 tab

<div>

<a href=""></a>

<a href=""></a>

<a href=""></a>

</div>

有汉字用大括号

Div*3>a{hello}

<ul>

<li><a href="">hello</a></li>

<li><a href="">hello</a></li>

<li><a href="">hello</a></li>

</ul>

Ul>li*3>a{hello$} TAB

<ul>

<li><a href="">hello1</a></li>

<li><a href="">hello2</a></li>

<li><a href="">hello3</a></li>

</ul>

注意光标在最后面 全部是英文

倒序

Td*3>{hello$@-}

<tr>

<td>world5</td>

<td>world4</td>

<td>world3</td>

<td>world2</td>

<td>world1</td>

</tr>

Th*3>{hello$$$} tab

<th>hell0001</th>

<th>hell0002</th>

<th>hell0003</th>

<th>hell0004</th>

<th>hell0005</th>

回顾内容

超链接的属性 href的三个值 相对路径 锚点 值为空

Target的值

Title

所有的标签都可以加属性

嵌入式样式

1）Sublime Text 3 快捷键精华版

Ctrl+X：删除当前行

Ctrl+N：新建窗口

Ctrl+K+B：开关侧栏

Ctrl+/：注释当前行

Ctrl+Shift+/：当前位置插入注释

F11：全屏

Shift+F11：全屏免打扰模式，只编辑当前文件

Alt+F3：选择所有相同的词

Ctrl+Z 撤销。r

Ctrl+Y 恢复撤销。

2、表格

1）表格的基本结构

<table></table>

定义表格的基本框架

<tr></tr>

定义表格的行

<td></td>

定义表格中行内的单元格

<th></th>

定义表格中行内的单元格（标题），自动将文本加粗，居中对齐

2）合并单元格

Colspan  rowspan

3）完整的表格标记

<thead></thead>

定义表头部分

<tfoot></tfoot>

定义表格脚注

<tbody></tbody>

定义表格主体

注意：<thead>和<tfoot>的内容要用<tr><td>要表示，不推荐直接表示

属性：

表格默认没有border 边框  如果要有的话就border

Cellspacing 单元格与单元格之间的距离

Th默认样式 加粗 水平居中 垂直居中

Td默认样式是左对齐 竖直方向垂直居中

Cellpadding  内边距

border

align

Bgcolor

<style=” 背景颜色怎么加

Alig n left center right

Valign top/ middle/bottom

第五讲 表单的的综合使用

Class不唯一 用 .

Div 唯一 用#

如果文本居中的话用 text-align:center

如果一块居中的话用 margin-right:auto;

Margin-left:auto;

1、表单

1）表单的概念及作用 （重难点）

表单是用来采集用户输入的数据，然后将数据提交给服务器

2）一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 Action 属性  定义明文还是密文

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮：

包括提交按钮（提交到服务器）、复位按钮（重置）和一般按钮 （一般是没有东西

可以自定义）

表单标签 <from></from>

定义采集数据的范围

所有的标签都写到form表单里面

Url一般是服务器上面的某一个接口

<form action="url" method="get" ></form>

action=“”  服务器地址

method=“”  get  /  post

Get提交 密码 用户名 都是明文 不安全 大小有限制 （ajax)

Post 是密文

高都是行内块级元素

<!-- action 是服务器上的某一个地址 表单要提交的路径

method 表单提交的方式 值：get post

get 不安全 大小有限制

post 安全 大小无限制

placehoder 默认的提示

type="text" 表示的文本类型

maxlength="3" 限制输入文本的长度单位是字数

size 表示大小 不用了解

form是块级元素

其他的可以加宽和高都是行内块级元素

name具有记忆功能

写提交按钮的时候 value的值最好写上，不同的软件显示不一样

关于method的不一样 地址栏会显示不一样的内容 get会有显示 post则不具有

-->

<!-- 文本框 type="text" -->

表单域对象

包含文本框 多行文本框登

文本框

文本框是一种让访问自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

代码格式：

＜input type="text" name="..." size="..." maxlength="..." value="..."＞

多行文本框

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

代码格式：＜textarea name="..." cols="..." rows="..." ＞＜/textarea＞

密码框

是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

代码格式：＜input type="password" name="..." size="..." maxlength="...“/＞

隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式：＜input type="hidden" name="..." value="..."＞

复选框

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

代码格式：＜input type="checkbox" name="..." value="..."＞

单选框

当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。

代码格式：＜input type="radio" name="..." value="..."＞

必须写上相同的name值才能每次选中一个

文件上传框

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。

代码格式：＜input type="file" name="..." size="15" maxlength="100"＞

下拉选择框

下拉选择框允许你在一个有限的空间设置多种选项。

代码格式：

＜select name="..." size="..." multiple＞

＜option value="..." selected＞...＜/option＞

...

＜/select＞

表单按钮  表单按钮控制表单的运作

提交按钮  提交按钮用来将输入的信息提交到服务器。

代码格式：＜input type="submit" name="..." value="..."＞

复位按钮  复位按钮用来重置表单。

代码格式：＜input type="reset" name="..." value="..."＞

一般按钮 一般按钮用来控制其他定义了处理脚本的处理工作。

代码格式：＜input type="button" name="..." value="..."  onclick="..."＞

3）Post和get概述

Post 大小无限制 安全

Get大小有限制 不安全

HTML基础全荟的更多相关文章

  1. CSS基础全荟

    一.CSS概述 1.css是什么?? 层叠样式表 2.css的引入方式 1.行内样式   在标签上加属性style="属性名1:属性值1;属性名2:属性值2;..." 2.内嵌式  ...

  2. 《吃透MQ系列》核心基础全在这里了

    这是<吃透XXX>技术系列的开篇,这个系列的思路是:先找到每个技术栈最本质的东西,然后以此为出发点,逐渐延伸出其他核心知识.所以,整个系列侧重于思考力的训练,不仅仅是讲清楚 What,而是 ...

  3. JS基础-全方面掌握继承

    前言 上篇文章详细解析了原型.原型链的相关知识点,这篇文章讲的是和原型链有密切关联的继承,它是前端基础中很重要的一个知识点,它对于代码复用来说非常有用,本篇将详细解析JS中的各种继承方式和优缺点进行, ...

  4. 详解JAVA8Stream 方法引用(基础){全}

    1: Stream流 1.1 引言 1.2 流式思想概述 1.3 获取流 1.4 常用方法 1.5 练习:集合元素处理 2:方法引用 2.1 冗余的Lambda场景 2.2 方法引用符 2.3 通过对 ...

  5. Groovy脚本基础全攻略

    1 背景 Groovy脚本基于Java且拓展了Java,所以从某种程度来说掌握Java是学习Groovy的前提,故本文适用于不熟悉Groovy却想快速得到Groovy核心基础干货的Java开发者(注意 ...

  6. Gradle脚本基础全攻略

    http://blog.csdn.net/yanbober/article/details/49314255

  7. JS基础-全局内置对象

    对象 JS中有那些内置对象 数据封装类对象 String.Array.Object.Boolean.Number 其他对象 Math.Date.RegExp.Error.Function.Argume ...

  8. Spark基础全解析

    我的个人博客:https://www.luozhiyun.com/ 为什么需要Spark? MapReduce的缺陷 第一,MapReduce模型的抽象层次低,大量的底层逻辑都需要开发者手工完成. 第 ...

  9. Pandas_基础_全

    Pandas基础(全) 引言 Pandas是基于Numpy的库,但功能更加强大,Numpy专注于数值型数据的操作,而Pandas对数值型,字符串型等多种格式的表格数据都有很好的支持. 关于Numpy的 ...

随机推荐

  1. 22_AOP_切面——静态切面

    [Spring AOP 如何定位连接点] 1.增强提供了连接点的方位信息:如织入到方法前面.后面等. 2.切点描述的是织入到哪些类的哪些方法上. [切点] Spring通过org.springfram ...

  2. sql产生流水号

    一个产生流水号(年月日+5位流水号)的存储过程 现在客户有一个需求,要产生一个流水号,如090611+000001(年月日+五位流水号),此流水号在数据库表中是主键,且为varchar类 型.如果在当 ...

  3. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  4. Zookeeper的集群配置和Java测试程序

    Zookeeper是Apache下的项目之一,倾向于对大型应用的协同维护管理工作.IBM则给出了IBM对ZooKeeper的认知: Zookeeper 分布式服务框架是 Apache Hadoop 的 ...

  5. 使用VM Tools让VMware虚拟机里的ubuntu能够共享Windows系统的文件夹

    我们经常有这样的使用场景,在宿主机Windows(Linux)操作系统上通过VMware软件安装了一个Linux(Windows)的虚拟机, 然后需要在两种操作系统中通过某种介质共享数据. 一种比较麻 ...

  6. python入门23 pymssql模块（python连接sql server增删改数据 ）

    增删改数据必须connect.commit()才会生效 回滚函数 connect.rollback() 连接数据库 ''' dinghanhua sql server增删改 ''' import py ...

  7. codeforces 609E Minimum spanning tree for each edge

    E. Minimum spanning tree for each edge time limit per test 2 seconds memory limit per test 256 megab ...

  8. bzoj1264 [AHOI2006]基因匹配

    Description 基因匹配(match) 卡卡昨天晚上做梦梦见他和可可来到了另外一个星球,这个星球上生物的DNA序列由无数种碱基排列而成(地球上只有4种),而更奇怪的是,组成DNA序列的每一种碱 ...

  9. 【LOJ2461】「2018 集训队互测 Day 1」完美的队列（分块+双指针）

    点此看题面 大致题意: 让你维护\(n\)个有限定长度的队列,每次区间往队列里加数,求每次加完后的队列里剩余元素种类数. 核心思路 这道题可以用分块+双指针去搞. 考虑求出每个操作插入的元素在队列中被 ...

  10. 【LOJ6062】「2017 山东一轮集训 Day2」Pair（线段树套路题）

    点此看题面 大致题意: 给出一个长度为\(n\)的数列\(a\)和一个长度为\(m\)的数列\(b\),求\(a\)有多少个长度为\(m\)的子串与\(b\)匹配.数列匹配指存在一种方案使两个数列中的 ...