第一讲 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. 打杂程序员之ftp换成外网ip咋就登陆不上？

    主动模式ftp N连接到ftp的21端口.然后客户端开端口监听,并通过N+1端口发送命令给FTP服务器.服务器反过来连接用户本地端口. 被动模式解决从服务器到客户端数据端口的入口反向连接被防火墙过滤掉 ...

  2. Set up ruby debugging environment

    Today I finally got ruby debugging working in Eclipse. Below are the major setup steps involved, as ...

  3. 別人寫的git的總結，寫自己這裡學習用

    這裡是原文,http://www.cnblogs.com/ang-/p/7352909.html 貼這裡慢慢學. git入门大全   阅读目录 前言 基本概念 文件几种状态 创建新仓库 配置 检出仓库 ...

  4. May 09th 2017 Week 19th Tuesday

    Everything you see exists together in a delicate balance. 世上所有的生命都在微妙的平衡中生存. A delicate balance? Can ...

  5. python 提取字符串中的数字组成新的字符串

    方法一 # 有一个字符串text = "aAsmr3idd4bgs7Dlsf9eAF" # 请将text字符串中的数字取出,并输出成一个新的字符串 import re text = ...

  6. expected expression __bridge

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u013020103/article/details/30491117 expected expres ...

  7. 【洛谷1494】[国家集训队] 小Z的袜子（莫队）

    点此看题面 大致题意: 有\(N\)只从\(1\sim N\)编号的袜子,告诉你每只袜子的颜色,\(M\)组询问,每组询问给你一个区间\([L\sim R]\),让你求出小Z随机抽出\(2\)只袜子时 ...

  8. ACM-ICPC(10/23)

    贪心 区间相关问题 选择不相交区间: hdu 2037 给定一些区间,选择尽量多的区间,他们互相不交叉.(活动安排问题) 分析:贪心思路是解决活动安排问题的好方案. 按照区间右端点排序,从前往后遍历, ...

  9. Uva 10217 概率

    题意: 假设一年有n天, 有一些人排队买票,会有一个人中奖,这个人是,他的生日和前面的某一个人相同: 求最佳整数位置,和最佳实数位置: 分析: 第一个人获奖的概率(他和售票员的生日相同): 1/N 第 ...

  10. POJ 1088 滑雪 【记忆化搜索经典】

    题目链接:http://poj.org/problem?id=1088 滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions:  ...