html

1.HTML快速入门

 1.1 什么是HTML

 

HTML:HyperText Markup Language 超文本标记语言

a 普通文本

<a></a>超文本标记

具有自己的功能

语言:有语法结构

1.2 HTML的特点

1.以.html或.htm为后缀

2.由浏览解析执行

3.用带有尖括号的"标记"来标识

4.可以在网页中执行js脚本

1.3 HTML的基础语法

(1)标签的分类

1.双标记(封闭类型)

 <关键字></关键字>

 双标记必须成对出现,有开始就有结束  <p></p>

2.单标记(非封闭类型)

  <关键字>或者<关键字/>

 

(2)标签的嵌套

1.什么是嵌套

一对标记中出现另一个(对)标记,形成了层级。

<div>

  <p></p>

</div>

2.语法

<关键字1>

  <关键字2>

    <关键字3></关键字3>

  </关键字2>

</关键字1>

 

(3).属性和值

允许通过属性和值对标记进行修饰

属性用来设置标签中的内容如何显示

属性不能瞎写,应该根据文档中的规定来编写,

有些属性有属性值,有些没有。如果有属性值,属性值应该使用引号引起来

语法:

1.属性和值必须声明在开始标记中

 <关键字 属性="值"></关键字>

2.多个属性之间用空格分开

 <关键字 属性1="值1"  属性2="值2"  ...></关键字>

3.标准属性(通用属性)

所有的元素都支持的属性

id 定义此元素在页面中的唯一标识

title 鼠标悬停在元素上时,显示的文本

style css中,定义行内样式

class css 中,引用类选择器

 

(4)注释

语法:<!--注释内容-->

注意:注释不能嵌套注释,注释也不能出现在标记中

 

 

2.HTML的文档结构

1.文档类型的声明

<!DOCTYPE html>告诉浏览器,我这篇html使用h5的规则解析

2.网页的结构

<!doctype html>

<html>

  <head></head>

  <body></body>

</html>

<html></html>表示网页的开头和结束

在html中包含两个标签

<head></head> 网页的头部,定义全局的信息

<body></body> 网页的主题,展示的内容

3.head元素是其他头元素的容器<head></head>

<title></title>  网页的标题并且title标签的内容会作为搜索结果的超链接上的文字显示 。

<meta/> 主要用于设置网页中的一些元数据,元数据不是给用户看的。

 

用来设置网页的字符集,避免乱码问题

<meta charset="utf-8">

chrome 62以上的版本,自动识别中文

 

Name:指定数据名称     concent:指定数据内容

 

Name的取值:

Keywords:表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开。为搜索引擎提供服务。

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,相机,数码,京东"/>

 

description 用于指定网站的描述

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>

网站的描述会显示在搜索引擎的搜索的结果中。

 

<meta name="Keywords" content="关键词的内容"> 

<meta name="description" content="描述的内容">

 

<style><style>定义网页的内部样式

<script></script>定义或者引用js文件

<link/> 引用外部样式文件

4.body元素

定义网页的主体

body的属性

bgcolor 背景颜色

text   字体颜色

取值:合法的颜色值---->颜色的应为单词

3.文本标记

3.1 标题元素

作用:在页面中以醒目的方式显示文本

语法 <h1></h1>一级标题  <hn></hn> n:1~6

      ...

     <h6></h6>六级标题

特点:

1.文本加粗

2.字号发生变化

3.独占一行,上下有垂直间距

 

从h1~h6重要性递减,h1最重要,h6最不重要

h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1

一般情况下标题标签只会使用到h1~h3,h4~h6很少用

标题标签都是块元素

 

属性align 设置标签内容水平方向对齐方式

取值:left/center/right

 

hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup

 

<hgroup>

<h1>回乡偶书二首</h1>

<h2>其一</h2>

</hgroup>

3.2 段落标记paragraph

语法:<p></p>

作用:突出的表示一段文字

特点:独立成行,上下有垂直的间距

p也是一个块元素

属性:align

3.3.换行标记

<br>或者<br/>

3.4.水平线(分割线)

<hr>或者<hr/>

width="50%" 表示水平线的宽度,取值为%或者px为单位的数字

size="5px" 表示水平线的尺寸(粗细),取值为%或者px为单位的数字

align="left" 对齐方式

color="red" 设置水平线的颜色

3.5.预格式化标签

<pre></pre>

使标签内部的文本,保留其格式,在页面上显示

空格折叠现象,一个或多个空格,会被浏览器渲染成一个空格显示

              一个或多个回车,会被浏览器渲染成一个空格显示

3.6.特殊字符(实体)

空格   &nbsp;

<     &lt;   

>     &gt;

©    &copy;   

®    &reg;

¥    &yen;

x     &times;


3.7.文本样式

<!--老式写法             新式写法-->
<b>加粗</b>          <strong>加粗</strong>
<i>倾斜</i>            <em>倾斜</em>
<u>下划线</u>       <ins>下划线</ins>
<s>删除</s>          <del>删除</del>

上标  <sup></sup>

下标  <sub></sub>

补充:

1、blockquote 表示一个长引用,块元素

鲁迅说:

<blockquote>

这句话我是从来没有说过的!

</blockquote>

 

2、q表示一个短引用,行内元素

子曰<q>学而时习之,乐呵乐呵!</q>

 

3.8.分区元素

1.块分区,用于页面中布局

<div></div>

独立成行

2.行分区,处理同一行文本的不同样式

<span></span>

可以与其它的span和文字共用一行

3.9.行级元素和块级元素(元素的显示形式)

1.块级元素

在网页中,单独成行,就是块级元素

在网页中一般通过块元素来对页面进行布局

从上往下排列

常见块级元素

h1~h6

p

div

2.行内元素(行级元素)

在页面中,与其他行内元素/行内块共用一行

行内元素主要用来包裹文字

从左往右排列

页面中常见行内元素

i em b strong u sup sub span

3.行内块元素

显示的方式与行内元素相同,但是具备块级元素的特征

 

一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素

块元素中基本上什么都能放

p元素中不能放任何的块元素

 

注意:浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正,对在内存中的源码进行修正

比如:

标签写在了根元素的外部

p元素中嵌套了块元素

根元素中出现了除head和body以外的子元素

... ...

4.table

表格的宽高是由表格的内容决定的

内容多,就宽一些,高一些,

表格中所的数据都预读到内存,一次性画到页面上 

4.图像和链接

4.1.图像

1.使用

<img>或者<img/>

 

图片标签用于向当前页面中引入一个外部图片

使用img标签来引入外部图片,img标签是一个自结束标签

img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)

 

属性

src="url"  url--图片资源路径

alt:图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示。

搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所收录。

width图片的宽度(单位是像素)

height图片的高度

宽度和高度中如果只修改了一个,则另一个会等比例缩放

 

注意:

一般情况在pc端,不建议修改图片的大小,需要多大的图片就裁多大

但是在移动端,经常需要对图片进行缩放(大图缩小)

 

补充:图片的格式:

jpeg(jpg)

支持的颜色比较丰富,不支持透明效果,不支持动图

一般用来显示照片

gif

支持的颜色比较少,支持简单透明,支持动图

颜色单一的图片,动图

png

支持的颜色丰富,支持复杂透明,不支持动图

颜色丰富,复杂透明图片(专为网页而生)

webp

这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式

它具备其他图片格式的所有优点,而且文件还特别的小

缺点:兼容性不好

 

base64

将图片使用base64编码,这样可以将图片转换为字符,通过字符的形式来引入图片,一般都是一些需要和网页一起加载的图片才会使用base64

 

效果一样,用小的

效果不一样,用效果好的 

2.URL

Uniform Resource Locator 统一资源定位符  简称:路径

3.URL路径的表现形式

1.绝对路径,一个写完整的路径

通信协议+主机地址+文件目录结构+文件的具体名称

合适使用:

     1.使用网络资源的时候,使用绝对路径

       优点:不占据自己服务器的存储空间

       缺点:不稳定

     2.使用本地资源,使用绝对路径(项目中100%用不到)

       从最高盘符开始查找 C/D/E/F/G

       项目中不用

 

  2.相对路径(参照物是html本身)

    1.图片与html文件在同一个目录下,src直接引用图片名称

      src="3.jpg"

 

./表示当前文件所在的目录,可以省略

../表示当前文件所在目录的上一级目录。

 

4.2.链接

1.语法 <a href="#"></a>

<a href="http://www.tmooc.cn/">Tmooc</a>

 

超链接可以让我们从一个页面跳转到其他页面,

或者是当前页面的其他的位置

 

属性:

href指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

 

target:指定打开链接的方式

      取值:_self 默认值,在当前标签页打开新链接,新页面替换之前的页面。

              _blank 在新的标签页打开链接

 

超链接也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素

2.其它的表现形式

<!--下载  -->

<a href="1.zip">下载</a>

<!--新建邮件,前提:本机必须有邮件软件的客户端  -->

<a href="mailto:chengliang@tedu.cn">新建邮件</a>

<!--执行js脚本  -->

<a href="javascript:alert(1111111)">执行js</a>

<!--返回当前页面的顶部  -->

<a href="#">返回顶部</a>

空链接: <a href = "##"></a>
#表示空链接,当写一个#时,单击a会回到顶部,##不回到顶部

 

 

注意:

    1、<!--在开发中可以将#作为超链接的路径的展位符使用-->

    <a href="#">这是一个新的超链接</a>

    2、<!--可以使用javascript:;来作为href的属性,此时点击这个超链接什么也不会发生-->

    <a href="javascript:;">这是一个新的超链接</a>

 

4.3.锚点

        锚点就是网页中的一个记号,跳转到页面的指定位置

定义锚点(指定位置)

使用a标签的name属性定义锚点

<a name="锚点名称"></a>

定义锚点(指定位置)

任意标签的id属性定义锚点

<any id="id"> </any>

链接到锚点

使用a标签链接锚点,#锚点名称

<a href="#锚点名称">回到锚点</a>

链接到锚点

使用a标签链接锚点, #id

<a href="#id">回到锚点</a>

5.列表(重点***)

默认按照从上到下的顺序来显示数据,并且可以在数据前添加标识

使用列表布局(去掉标识,从上到下,从左到右排列)

5.1.列表的组成

1.有序列表<ol></ol>   order list

2.无序列表<ul></ul>   unorder list

3.列表项  <li></li>        list item

5.2.列表属性

1.有序列表的属性 ol

 type 设置标识符的类型

 取值 : 默认值,数字

           a  A   字母

           i   I    罗马数字

 start 指定起始编号

 取值:无单位数字

2.无序列表的属性 ul

 type:设置标识

 取值   disc 默认值  实心圆

        circle 空心圆

        square 实心方块

        none  无

5.3.列表的嵌套

所有的嵌套必须只能写在li中

ul(ol)只能包含li,li里可以包含任何其他标签
 

5.4.自定义列表

1.作用

做名词解释使用,用于图文混排

<dl>

  <dt>需要被解释说明的名字</dt>

  <dd>对名词的解释内容</dd>

</dl> 10:17上课

6.表格

6.1.表格语法

<table>

  <tr>

    <td></td>

    <td></td>

    <td></td>

  </tr>

.....

</table>

 

在table中使用tr表示表格中的一行,有几个tr就有几行

在tr中使用td表示一个单元格,有几个td就有几个单元格

6.2属性

1.table标签的属性

  border:设置边框  border=“1”

  width:设置表格的宽

  height:设置表格的高

        可以设置宽高,内容小于宽高的,按宽高尺寸,内容大于宽高,按内容改变尺寸

  align:设置表格的对齐方式(table自己的水平位置)

       取值 left/center/right

  bgcolor:背景颜色

  cellpadding:设置单元格内边距(边框到内容的距离)

  cellspacing:设置单元格外边距(边框与边框之间的距离),默认是2px

 

 

2.tr的属性

  1.align设置当前行内容的水平对齐方式(设置表格内容的对齐方式)

  2.valign设置当前行内容的垂直对齐方式

         取值:top/middle/bottom

  3.bgcolor 当前行的背景颜色

3.td的属性

  width

  height

  align

  valign

  bgcolor

  colspan

  rowspan

6.3.不规则表格的使用

1.跨列

  colspan=?

从指定的单元格位置处开始,横向向右合并?个单元格(包含自己)

被合并掉的单元格,要删除

2.跨行

  rowspan=?

从指定的单元格位置处开始,纵向向下合并?个单元格(包含自己)

被合并掉的单元格,要删除

6.4.table中的可选标记

1.表格的标题

  <caption></caption>

如果设置标题,必须将<caption>放在<table>之后

2.行/列的标题

  <th></th> 代替<td></td>

加粗,居中 

6.5.表格的复杂应用

1.行分组

可以将连续几个行,划分到一个组中,进行统一管理

表头行  <thead></thead> 表格最上面一行的标题放在thead中

表主体  <tbody></tbody>允许将若干放在tbody中进行统一管理

表尾行  <tfoot></tfoot> 表格中最后一行放在tfoot中

2.表格的嵌套

  一张表格中,所有的嵌套的表格,只能放在td中

7.表单(重点********&难点***)

7.1.作用

1.提供可视化的输入控件

2.收集用户填写的信息并提交给服务器

 

在现实生活中表单用于提交数据

在网页中也可以使用表单,网页中的表单用于将本地的数据提交给远程的服务器

使用form标签来创建一个表单

7.2.表单的组成部分

1.前端部分

 提供表单的控件,与用户做交互的可视化控件

2.后端部分

  对提交的数据进行处理(接口)

7.3.表单

<form></form>

      属性

1.action

通常是定义服务器处理数据的地址,接口(url)

默认,提交给本页地址

2.method

指定表单数据提交的方式(方法)

  1.get(默认值)

     明文提交,提交时内容会显示在浏览器地址栏上

     提交的数据有大小限制,2kb

     向服务器要数据的时候使用get

  2.post

     提交数据无大小限制

     隐式提交,提交的数据不会显示在地址栏中

     把数据传递给服务器的时候,使用post

  3.delete

  4.put    

3.enctype 编码方式

设置表单允许将什么样的数据提交给服务器

  1.提交普通字符,不能有特殊符号

    enctype ="text/plain"

  2.允许将任意字符提交给服务器

    application/x-www-form-urlencoded

  3.允许将文件提交给服务器

    multipart/form-data

7.4.表单控件

能够与用户进行交互的可视化元素

7.4.1分类

1.input元素

2.textarea 多行文本域

3.下拉选择框

4.其它元素

7.4.2input元素

在页面中提供各种各样的输入控件,通过type属性来设置输入控件的类型

<input>或者<input/>

type  设置输入控件的类型

name 为控件定义名称,提供给服务端使用(必须值)

vaule 控件的值,提交给服务端使用

disabled 禁用控件,不能操作也不能提交,无值属性

type取值

1.文本框和密码框

type="text"  默认值

type="password"

属性

  1.maxlength 限制输入的最大字符数

  2.readonly 只读,只能看不能写,但允许被提交,无值属性

  3.placeholder 占位符,默认显示在控件上文本,只要得到焦点,文本就无效了,此文本不能提交

  4.autocomplete="off" 关闭自动补全

  5.autofocus 设置表单项自动获取焦点

2.按钮

type="submit"提交按钮

  将表单中的数据,提交给服务器

type="reset"重置按钮

  让表单内容恢复到初始化状态

type="button" 无功能按钮,可以调用js脚本

3.单选按钮和复选按钮

单选按钮

type="radio"

多选按钮

type="checkbox"

 

 

像这种选择框,必须要指定一个value属性,value属性最终会作为用户的填写的值传递给服务器,不然提交的值是on。

多个选择按钮的name属性值必须一致。除了定义控件名称,还起到分组的效果

checked:设置默认选中项,无值属性

checkbox的name要写成数组hobby[]

4.隐藏域

type="hidden"

想提交给服务器,但是不想展示给用户看的数据,使用隐藏域

5.文件选择框

type="file"

注意:

method="post"

enctype="multipart/form-data"

multiple 无值属性,可以同时上传多个文件

需要name属性值为数组

7.4.3textarea文本域

允许录入多行数据的文本框

<textarea></textarea>

name 控件的名称

readonly 只读

cols 指定文本域的列数,以英文单词为准,中文减半

rows指定文本域的行数,

7.4.4下拉选择器框

<select>  表示一个下拉选

  <option></option>  表示下拉选中的一个选项

  .......

</select>

注意:

  当option没有value属性时,提交的时候select的value为选中option的内容。

  当option有value,提交时,select的value为选中option的value。

select属性

   name选项框的名称

     size 默认为1,定义显示选项的数量。

        如果值大于1的数字。下拉选表现为滚动列表

     multiple 无值属性,可以多选,但是name要用数组

        设置了multiple之后,就算size="1"  也是滚动列表

option的属性

   value

   selected设置默认选中项   

7.5.其它元素

1.label

文本与表单控件的关联

<label></label>

属性

for:要与label中文字发生关联的form控件的id

2.为控件分组

<fieldset></fieldset>  为控件分组

<legend></legend> 分组标题

3.浮动框架

允许在一个网页中,引入另外一个网页

<iframe></iframe>

属性

src="url"

width="100%"

height="200px" 高度存在问题,需要使用js.dom来解决

scrolling="no"  不显示滚动条

frameborder="0" 不显示边框

 

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

 

html

上一篇:网页轮播图


下一篇:Apache POI 4.0.1版本 Excel导出数据案例(兼容 xls 和 xlsx)(六)