HTML(超文本标记语言)

1、HTML的作用：

2、文档结构：

3、基础标签：

4、字符实体：

5、五大主流浏览器：

1、HTML的作用：

是专门给文本添加语义的，而不是修改文本形式，这些用于描述其他文本语义的文本，我们称之为标签，这些标签在浏览器中不会被显示，所以被称为超文本标记语言。

2、文档结构：

<html>标签：用于告之浏览器这是一个网页

注意点：其他所有的标签都必须写在html标签里面

<head>标签：用于给网站添加一些配置信息

例如：指定网站的标题/指定网站的小图片/指定网站关键字/指定网站的描述信息等

注意点：一般情况下，写在head标签内部的内容不会显示给用户看

<title>标签：专门用于指定网站的标题

注意：title标签必须写在head标签里面

<body>标签：专门用于定义html文档中需要给用户查看的内容

3、基础标签：

H系列标签作用：用于给文本添加标题语义

格式：<h1>XXX</h1> H标签一共有6个，从h1到h6，超过6无效被H系列标签包裹的内容会独占一行，h1最大,h6最小

p标签作用：告诉浏览器哪些文字是一个段落

格式：<p>xxx</p> 注意点：在浏览器中会独占一行

hr标签作用：在浏览器上实现一条分割线格式<hr/>

注意点：在浏览器中会单独占一行，hr标签可以写/也可以不写前者是按HTML规范，后者是XHTML规范

br标签作用：换行格式<br> 注意点：可以连续使用

img标签格式：<img src="" alt="提示信息" title="名">

作用：告诉浏览器需要显示一张图片，src是需要显示的图片地址属性：width：宽度 height：高度 title：当鼠标悬停在图片上时，需要弹出的描述框显示内容 alt: alternate的缩写，告诉浏览器当图片找不到时所显示的内容

<!-- 绝对路径：（Windows）盘符：/文件夹名/..../文件名

图像文件在另一台主机上：绝对路径：协议://主机/地址/文件名

（有问题，图像文件换一个位置，原来的绝对路径失效）

相对路径：./:当前文件夹 ../:当前文件夹的上一个文件夹

c:\www\site\pages\test.html

c:\www\site\images\girl.jpg

在test.html页面中显示girl.jpg图像

相对路径：../images/girl.jpg

绝对路径：c:\www\site\images\girl.jpg

-->

路径问题

1、相对路径赋值；每次都从.html文件所在的文件夹开始查找

a.同级：即图片和HTML文件存储在同一个文件夹中格式：src=”xxx.jpg” 图片名称

b.下级：即存储图片的文件夹和.html文件在同一个文件夹中格式：src=”xxx/xx.jpg” 存储图片文件夹名称/图片名称

c.上级：存储图片的位置和存储代码的文件夹在同一个文件夹中格式：src=”../xxx.jpg” 找到.html文件所在文件夹的上一级文件夹，再从该文件夹中找到xxx.jpg图片

2、绝对路径赋值：每次都从指定盘开始查找格式：src=”C:\xx\xx\xx\xx\...”

a标签：定义超链接，用于从一张页面链接到另一张页面

格式：<a href=”指定需要跳转目标界面”>需要展示内容</a>

a标签最重要的属性是 href 属性，它指示链接的目标。

target属性：用于控制如何跳转

_self:在当前选项卡中跳转，即不新建界面跳转，默认就是_self

_blank:在新的选项卡中跳转

title属性：与img标签中的title一样，都是用来控制鼠标悬停时显示的文本

base标签：专门用来同一指定当前网页中所有超链接如何打开

注意点：必须写在head标签中间，如果即在base标签又在a标签中指定了target属性，那么浏览器会按照a标签中指定的执行

假链接：就是点击之后不会跳转的链接我们称之为假链接

假链接的格式: 1.# 2.javascript:

区别：#的假链接会自动回到网页的顶部, 而javascript:的假链接不会自动回到网页顶部

锚链接：要想通过a标签跳转到指定的位置

1>给目标位置的标签添加一个id属性, 然后指定一个独一无二的值

2>告诉a标签你需要跳转到的目标标签对应的值是多少，并在该值最前面加上#

    <a href="#tp">锚链接</a><!-- 点击锚链接 --><h1>标题<small>标签</small></h1>换行<br><code>&lt;header&gt;</code> <hr><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><a name="tp">锚链接续位置</a><!-- 跳转到此位置 -->

<!-- 在同一个页面不同位置之间，锚链接

在某个位置定义一个锚链接

<a name="锚名称">锚链接续位置</a>

从A.html跳转到B.html的锚名称叫full,超链接可以同时完成页面跳转和锚跳转

-->

邮件超链接：<a href="mailto:2845@qq.com">邮件超链接</a>

列表标签：作用：给一堆数据添加列表语义，就是告诉浏览器这堆数据是一个整体

分类：无序列表（最多）(unorderd list)

有序列表（最少）(ordered list)

定义列表（其次）(definition list)

1、无序列表：给一堆数据添加列表语义，并且这些数据没有先后之分

格式：<ul>

<li>需要显示的条目内容</li>

</ul> 无序列表应用场景：新闻列表，商品列表，导航

2、有序列表：给一对数据添加列表语义，数据有先后之分

格式：<ol type="A|1|a|i|Ⅰ">

</ol> 用法与无序列表大致相同

type属性取值1、A、a、i、Ⅰ

3、定义列表：给一堆数据添加列表语义，先通过dt标签定义标题，再通过dd添加描述

格式：<dl>

<dt></dt> (definition title)

<dd></dd> (definition description)

</dl>

定义列表应用场景：做网站尾部的相关信息，做图文混排

表格标签：给一堆数据添加表格语义

格式: <table>

<tr>

<td>需要显示的内容</td>

</tr>

</table>

其实表格标签中的table代表整个表格, 也就是一堆table标签就是一个表格其实表格标签中的tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行

其实表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格

注意点

1、表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框

2、表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现

3、另表格标签还有宽度与高度属性，水平对齐和垂直对齐属性，外边距和内边距属性，但仅供了解，因为样式控制一般都是用css来实现

 <!-- 表格标签 --><table><tr><th>列名称</th></tr><tr><td>列中的数据</td></tr></table><!-- 例如 --><table><tr><th>姓名</th><th>学号</th><th>性别</th></tr><tr><td>张三</td><td>01</td><td>男</td></tr></table>
<!-- 课程表制作 --><table border="1"><tr><th colspan="2">时间</th><!-- colspan合并同一行2 --><!-- <th></th> --><th>课程名称</th><th>教室</th><th>说明</th></tr><tr><td rowspan="2">上午</td><!-- rowspan合并同一列2 --><td>8点</td><td>HTML</td><td>E-405</td><td></td></tr><tr><!-- <td></td> --><td>10点</td><td>Javascript</td><td>红楼304</td><td></td></tr><tr><td rowspan="2">下午</td><td>14点</td><td>CSS</td><td>E-401</td><td></td></tr><tr><!-- <td></td> --><td>16点</td><td>自习</td><td>红楼306</td><td></td></tr></table>

效果展示：

表单标签

1.什么是表单?

表单就是在网页上用于输入信息的区域，主要功能是用来收集用户信息的

2.什么是表单元素?

2.1什么是元素?

在HTML中标签/标记/元素都是指HTML中的标签

例如: <a> a标签/a标记/a元素

表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能,表单元素一定要写在表单中;

3.表单的格式: <form action=”url地址” method=“提交方式” name=“表单名称”>

<表单元素> <!-- method常用的取值有GET和POST

GET请求用于提交非敏感数据和小数据

POST请求用于提交敏感数据和大数据-->

</form>

<!-- 表单标签

get不安全，在网页地址栏能看见

post数据封装在数据包中，抓包软件，chrome使用开发者工具查看，网络，载荷

表单元素一般要有name属性值，没有name属性值，value值不能提交-->

4.常见的表单元素

input标签, input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了 input标签的功能和外观不同。

type取值：

text:文本框

password：密码

radio：单选框

checkbox：复选框

submit：提交

reset；重置

button：按钮

file：文件

hidden：隐藏

input 标签type属性的取值

1、明文输入框：<input type="text">

2、暗文输入框：<input type="password">

3、设置默认值：<input type="xxx" value="xxx">

4、单选框：<input type="radio" >

注意点:

1）默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值

2）要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性

5、多选框：<input type="checkbox">

6、定义一个普通按钮例：<input type="button" value="xxx" οnclick="xxx)">

作用:配合JS完成一些操作

7、定义一个图片按钮例： <input type="image" src="xxx" οnclick="xxx">

8、定义重置按钮 <input type="reset" value="清空">

作用:清空表单中的数据

注意点: 重置按钮有默认的按钮标题, 默认叫做重置也可以通过value属性来修改默认标题

9、定义提交按钮；

作用:将表单中的数据提交到远程服务器

注意点: 要想把表单中的数据提交到远程服务器,必须满足两个条件

1）告诉表单需要提交到哪个服务器,可以通过form标签的action属性来告诉表单,需要提交到那个服务器

2）告诉表单,表单中的哪些数据需要提交，即加上name属性

label标签:

1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 要想让输入框和文字绑定在一起, 那么我们可以使用Label标签

2.绑定的格式:

2.1将文字利用label标签包裹起来

2.2给输入框添加一个id属性

2.3在label标签中通过for属性和输入框中的id进行绑定即可

例：<label for="account">账号:</label><input type="text" id="account">

textarea标签：定义一个多行输入框可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入

例：<textarea cols="30" rows="10"></textarea>

datalist标签:给输入框绑定待选项

格式：<datalist>

<option>待选项内容</option>

</datalist>

如何给输入框绑定待选列表

1.写一个输入框

2.写一个datalist列表

3.给datalist列表标签添加一个id

4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

select标签：用于定义下拉列表

格式: <select>

</optgroup>

</select>

注意点:

1.下拉列表不能输入内容, 但是可以直接在列表中选择内容

2.可以通过给option标签添加一个selected属性来指定列表的默认值

3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

<fieldset> 标签：定义围绕表单中元素的边框

格式：<form>

</fieldset>

</form>

多媒体标签:

video标签：播放视频

格式：<video src=””></video>

属性： src:需要播放的视频地址

autoplay:自动播放的视频

controls:显示控制条

poster:视频没有播放前的占位图片

loop：一般用于做广告视频，循环播放

preload:预加载视频

muted：静音

width：宽度

height：高度

第二个格式：<video>

</video>

三种视频格式 :

audio标签：播放音频

格式：<audio src=””></audio>

和vedio使用基本一样，但有三个属性不能用：height/width/poster

详情和概要标签

格式: <details>

详情信息

</details>

作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息默认情况下是折叠展示, 想看见详情必须点击

4、字符实体：

在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体

  空格, 一个 就是一个空格

< 小于符号 < (less than)

> 大于符号 > (greater than)

注释格式：<!-- xxx --!>

快捷键：ctrl+/

另补充一些常用快捷键：

选中全部：ctrl+A

快速删除光标所在行(剪切)：ctrl+X

快速搜索：ctrl+F

撤回上一步操作：ctrl+Z

让光标在多行闪烁，按alt键不放，再按鼠标左键

5、五大主流浏览器：

1）Internet Explorer 简称ie，微软公司旗下浏览器

2）google chrome，google旗下浏览器，追求简洁、快速、安全

3）firefox浏览器，简称FF浏览器，mozilla公司旗下浏览器

4）safari浏览器，苹果公司旗下浏览器

5）opera浏览器，挪威厂商opera旗下浏览器

浏览器内核：浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，以及页面的格式信息

1）IE浏览器内核：Trident内核，也是俗称的IE内核；

2）Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3）Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4）Safari浏览器内核：Webkit内核；

5）Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；