前端三件套知识点

html

常用插件

image-20220221133817436

文件比较

image-20220221135039515

image-20220221135103433

常用快捷键

ctrl +f 查找当前页面的内容

!后按table 或者 html:5 代码模板快捷键

alt+b调试快捷键

ctrl+k ctrl+t改颜色主题

alt+shift+a注释快捷键

image-20220223084004307

image-20220221135746947

html基础概念

image-20220221143256453

一、 WEB标准的概念及组成

WEB标准不是某一个标准,而是一系列标准的集合。

网页主要由三部分组成:结构、表现和行为。

结构:html
表现:css
行为:script

html------hyper text markup language 超 文本 标记 语言
css----cascading style sheet 层叠 样式 表
js-----javascript 第二阶段

对应的标准也分三方面:

结构化标准语言主要包括HTML(超文本标记语言)和XML(可扩展标记语言,主要用于传输数据),
hyper text markup language

表现标准语言主要包括CSS,

行为标准主要包括文档对象模型DOM、ECMAScript等。

W3C( World Wide Web Consortium )万维网联盟,创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C( World Wide Web Consortium 万维网联盟)制定的结构和表现的标准;

结构:(html)

表现:(css)

ECMA(欧洲电脑场商联合会)制定的行为的标准;

行为 (DOM ,ECMAScript)

二、 HTML及相关概念的介绍

​ HTML 指的是 超文本标记语言 (Hyper Text Markup Language)

​ XHTML 指可扩展超文本标记语言(EXtensible HyperText Markup Language)。

并没有引入任何新标签或属性,唯一得区别是语法,XHTML有着更严格语法
(比如:不允许大写字母,标签必须闭合等严格规范。)

​ XHTML2 不向前兼容,乃至不兼容之前得 HTML。
​ 它是一种全新得语言,赤条条来去无牵挂。这着实是一场灾祸

​ 超文本应用技术事变组(WHATWG)。

​ WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

HTML5 指的是HTML的第五次重大修改(第5个版本)
​ 2004年提出草案,2008年正式发布;
​ HTML5 既支持疏松语法,也支持 XHTML 1.0 版本的严格语法。

html结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pygILHJ6-1649006857347)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220221144316227.png)]

所有标签在body里面写 有开始和结束标签

image-20220221144736780

html语法

1.写在<>中的第一个单词叫做标记,标签,元素。

2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”内。

3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。

4.空标记没有结束标签,但是必须关闭,用“/”代替。

5.一个属性可以有多个属性值,多个属性值之间用空格隔开,不分先后顺序。

例如

叫标记,也叫标签,也叫元素
class 属性/类

image-20220221150539687

image-20220221150645291

标签

常规标记(双标记) (标签 标记 元素)

<标签 属性=“属性值” 属性=“属性值 属性值”></标签>

空标记(单标记)

<标签 属性=“属性值” 属性=“属性值”/>

image-20220302133914810

image-20220302133936213

image-20220302134004534

image-20220302134039997

标题标签

段落标签

* 段落§

段落文本内容

标识一个段落(段落与段落之间有段间距) 语义化标签

image-20220221152020775

斜体标签

image-20220221152114827

空格标签

* 空格 ( ) 
(所占位置没有一个确定的值,这与当前字体字号浏览器都有关系)

image-20220221152440985

加粗标签

image-20220222082145686

行内标签
  <!-- <span>我们的displa值inline 并且不能设置宽高 由字体大小 长度决定 只能
       设置左右margin 和左右padding</span> -->

image-20220222084108325

image-20220222084604182

超链接标签

image-20220222090108550

超链接锚点
<!-- 超链接锚点 -->
    <a href="#one">星期一</a>
    <a href="#two">星期二</a>
    <a href="#three">星期三</a>
    <a href="#four">星期四</a>
    <a href="#five">星期五</a>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <a name="one">锅包肉</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="two">红烧肉</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="three">红烧排骨</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="four">小鸡炖蘑菇</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="five">火锅</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

image-20220222091644792

9)超链接的应用

语法:

<a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片</a>

属性:target 页面打开方式
属性值:_blank 新窗口打开 ;  _self 当前窗口打开

<a href="#" target="_blank">新页面打开</a> 
<a href="#">链接</a>   空链接

拓展:

定义书签:<a href="#box">第一处</a>
                 <a name="box">我在这^_^</a>
邮箱跳转:<a href="mailto:906823104@qq.com">906823104@qq.com</a>
其他标签

<hr/>一条横线

<br/>强制换行

小结1

一、 WEB标准的概念及组成
WEB标准不是某一个标准,而是一系列标准的集合。

网页主要由三部分组成:结构、表现和行为。

html------hyper  text   markup   language    超 文本 标记 语言
css----cascading   style   sheet    层叠  样式  表
js-----javascript   第二阶段

对应的标准也分三方面:

结构化标准语言主要包括HTML(超文本标记语言)和XML(可扩展标记语言,主要用于传输数据),
hyper   text   markup   language

表现标准语言主要包括CSS,

行为标准主要包括文档对象模型DOM、ECMAScript等。

W3C( World Wide Web Consortium )万维网联盟,创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C( World Wide Web Consortium 万维网联盟)制定的结构和表现的标准;

结构:(html)

表现:(css)

ECMA(欧洲电脑场商联合会)制定的行为的标准;

行为 (DOM ,ECMAScript)  

二、 HTML及相关概念的介绍
 HTML 指的是 超文本标记语言 (Hyper Text Markup Language)

 XHTML  指可扩展超文本标记语言(EXtensible HyperText Markup Language)。

 并没有引入任何新标签或属性,唯一得区别是语法,XHTML有着更严格语法
(比如:不允许大写字母,标签必须闭合等严格规范。)

 XHTML2  不向前兼容,乃至不兼容之前得 HTML。
 它是一种全新得语言,赤条条来去无牵挂。这着实是一场灾祸

 超文本应用技术事变组(WHATWG)。

 WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

 HTML5 指的是HTML的第五次重大修改(第5个版本)
 2004年提出草案,2008年正式发布;
 HTML5 既支持疏松语法,也支持 XHTML 1.0 版本的严格语法。
三、拓展:
补充快捷键知识: 
1)方向键加shift可选中文本
2)复制Ctrl+c
3) 粘贴Ctrl+v
4) 剪切Ctrl+x
5) 关闭ctrl+w
6) delete向后删除
7)撤销Ctrl+z  
8) 输入法的切换:Ctrl+空格 
9) F2 重命名
四、 调试工具 -浏览器
1)PC端调试工具的使用 -浏览器

   测试浏览器(chrome,firefox)

   先了解,后期我们写页面了会经常使用,边用边学。
五、HTML5 基本结构 (新建一个html文件时默认有的那些代码)
<!DOCTYPE html>   文档类型声明头,DOCTYPE大小写均可
<html>  开始html文件的书写
	<head>  头部
		<meta charset="utf-8" />  字符编码	
		<title></title>  页面标题
	</head>
	<body></body>  网页主体
</html>
六、 HTML基本语法
常规标记(双标记) (标签 标记 元素)

<标签 属性=“属性值” 属性=“属性值    属性值”></标签>

空标记(单标记)

<标签 属性=“属性值” 属性=“属性值”/>

说明:

1.写在<>中的第一个单词叫做标记,标签,元素。

2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”内。

3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。

4.空标记没有结束标签,但是必须关闭,用“/”代替。 <meta     />

5.一个属性可以有多个属性值,多个属性值之间用空格隔开,不分先后顺序。

七、 HTML常用标记
1)文本标题(h1-h6)

<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6> 
2) 段落(p)

<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距) 
语义
3)空格 ( )
&nbsp;(所占位置没有一个确定的值,这与当前字体字号浏览器都有关系)
4)换行(br)
<br /> 换行是一个空标记(强制换行)
5)加粗
加粗有两个标记
1.<b>加粗内容</b>    bold
2.<strong>加粗内容</strong>  有突出强调之意
6)倾斜
倾斜标记
1.<em></em>
2.<i></i>        图标icon   italic

插入图片

在网上复制图片

image-20220222092928639

8)插入图片
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
注:所要插入的的图片必须放在站点下 
路径:绝对路径、相对路径;
绝对路径:不需要参照物,放哪里都能找到,可以跨盘符(本地的图片不可跨电脑);---本地,网络
相对路径:当前文件为参照物,从当前文件出发去寻找目标文件,不可跨盘符;
*相对路径的写法:
1)当 当前文件与目标文件在同一目录下,直接书写  目标文件(文件名+扩展名);
2)当 当前文件与目标文件所处的文件夹在同一目录下,写法如下:
     文件夹名/目标文件全称+扩展名; 
3)当 当前文件所处的文件夹和目标文件在同一目录下,写法如下:
      ../目标文件文件名+扩展名;
../../  出两层的情况
title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,
HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的
alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,
它会直接输出在原本加载图片的地方。
width  图片宽度  height  图片高度
为了保证图片不发生变形,width和height最好只写一个;

image-20220222094500719

当图片加载不出来时,显示alt的属性值

image-20220222094252029

image-20220222101800261

列表

三种:有序ol,无序ul,自定义dl

无序ul

属性type=“square(实心方块)/circle(空心圆)/disc(实心圆)”

image-20220222103311564

image-20220222103354179

有序ol

属性type=“1/a/A/i/I” start=“数字”

image-20220222110226085

image-20220222110241929

自定义dl

dt最好只写一个 类似于名词

dd类似于解释

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2mdUqP7H-1649006857365)(https://s2.loli.net/2022/02/22/oRfJvUeAjOQdGmS.png)]

image-20220222111505193

表格

bgcolor="表格的背景色"
cellspacing="单元格与单元格之间的间距"
cellpadding="单元格与内容之间的间距"
水平对齐方式:align="left/center/right"

快捷方式 table>tr*2>td*2

image-20220222132609599

 <table width="200" height="200" border="1">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

image-20220222132745235

<table width="200" height="200" border="1" cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

image-20220222132938314

<table width="200" height="200" border="1" cellpadding="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

image-20220222132827666

<table width="200" height="200" border="1" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <td align="right">1</td>
            <td bgcolor="pink">2</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

image-20220222132856111

行列合并

合并行
<p>合并行</p>
    <p>rowspan="所要合并的单元格的行数"合并行 上下合并</p>
    <table width="200" height="200" border="1" cellspacing="0" cellpadding="0">
        <tr align="center">
            <td rowspan="2">1</td>
            <td>2</td>
        </tr>
        <tr align="center">
            <td>4
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值