html
常用插件
文件比较
常用快捷键
ctrl +f
查找当前页面的内容
!
后按table
或者 html:5
代码模板快捷键
alt+b
调试快捷键
ctrl+k ctrl+t
改颜色主题
alt+shift+a
注释快捷键
html基础概念
一、 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里面写 有开始和结束标签
html语法
1.写在<>中的第一个单词叫做标记,标签,元素。
2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”内。
3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
4.空标记没有结束标签,但是必须关闭,用“/”代替。
5.一个属性可以有多个属性值,多个属性值之间用空格隔开,不分先后顺序。
例如
叫标记,也叫标签,也叫元素class 属性/类
标签
常规标记(双标记) (标签 标记 元素)
<标签 属性=“属性值” 属性=“属性值 属性值”></标签>
空标记(单标记)
<标签 属性=“属性值” 属性=“属性值”/>
标题标签
段落标签
* 段落§
段落文本内容
标识一个段落(段落与段落之间有段间距) 语义化标签
斜体标签
空格标签
* 空格 ( )
(所占位置没有一个确定的值,这与当前字体字号浏览器都有关系)
加粗标签
行内标签
<!-- <span>我们的displa值inline 并且不能设置宽高 由字体大小 长度决定 只能 设置左右margin 和左右padding</span> -->
超链接标签
超链接锚点
<!-- 超链接锚点 -->
<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>
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)空格 ( )
(所占位置没有一个确定的值,这与当前字体字号浏览器都有关系)
4)换行(br)
<br /> 换行是一个空标记(强制换行)
5)加粗
加粗有两个标记
1.<b>加粗内容</b> bold
2.<strong>加粗内容</strong> 有突出强调之意
6)倾斜
倾斜标记
1.<em></em>
2.<i></i> 图标icon italic
插入图片
在网上复制图片
8)插入图片
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
注:所要插入的的图片必须放在站点下
路径:绝对路径、相对路径;
绝对路径:不需要参照物,放哪里都能找到,可以跨盘符(本地的图片不可跨电脑);---本地,网络
相对路径:当前文件为参照物,从当前文件出发去寻找目标文件,不可跨盘符;
*相对路径的写法:
1)当 当前文件与目标文件在同一目录下,直接书写 目标文件(文件名+扩展名);
2)当 当前文件与目标文件所处的文件夹在同一目录下,写法如下:
文件夹名/目标文件全称+扩展名;
3)当 当前文件所处的文件夹和目标文件在同一目录下,写法如下:
../目标文件文件名+扩展名;
../../ 出两层的情况
title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,
HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的
alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,
它会直接输出在原本加载图片的地方。
width 图片宽度 height 图片高度
为了保证图片不发生变形,width和height最好只写一个;
当图片加载不出来时,显示alt的属性值
列表
三种:有序ol,无序ul,自定义dl
无序ul
属性type=“square(实心方块)/circle(空心圆)/disc(实心圆)”
有序ol
属性type=“1/a/A/i/I” start=“数字”
自定义dl
dt最好只写一个 类似于名词
dd类似于解释
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2mdUqP7H-1649006857365)(https://s2.loli.net/2022/02/22/oRfJvUeAjOQdGmS.png)]
表格
bgcolor="表格的背景色"
cellspacing="单元格与单元格之间的间距"
cellpadding="单元格与内容之间的间距"
水平对齐方式:align="left/center/right"
快捷方式 table>tr*2>td*2
<table width="200" height="200" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<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>
<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>
<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>
行列合并
合并行
<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