本文详细介绍了HTML的学习，包括基础标签、图片处理、CSS样式选择器、盒子模型等内容。从网页标准模板到字体样式，涵盖font、span、p、a等标签的用法，以及img标签的属性和路径知识。还讲解了CSS选择器、列表、表格、框架和字体样式，如行内元素与块级元素的区别、浮动和定位机制。同时，文章还涉及了内联框架iframe、表格table的使用及CSS中的背景设置和定位机制。
01目录,资料,工具,规范
HTML学习01目录,资料,工具,规范本文格式规范在线文档查询老师个人网站课程录播百度网盘02基础标签网页标准模板font标签span标签p标签a标签图片的相对路径-relative图片的绝对路径-absolute标签页内锚记,锚点定位特殊字符表示pre标签,这个标签内可以输入各种原生文字!!上标下标marquee标签03重要的图片标签-img图片的格式知识排列图片背景图片给图片加上超链接的方法排列图片浮动图像空链接04清单,表格,frame列表有序标签ol,无序标剑ul表格frame与框架一类的东西标签性质基础标签的单双，复合标签块级元素与行内元素Id与name的区别表单的使用-from-labelinput标签--数据交互重要标签label标签表格table 框架05css样式初学+选择器css选择器常用选择器 class id name属性选择器特殊选择器伪类伪元素打style类的指法,玩将分号打出来!!关于颜色style里面如何注释!!(h6代表小知识点)class类的命名如何进行?06-div盒子模型body的字体默认设置,设计的行业标准布置鼠标悬浮时的样式盒子模型margin与padding的用途body的margin与padding的默认设置css中的定位才是核心中的核心,必须好好学习css定位机制,非常重要----普通流,浮动.定位.float属性--脱离文档流,不占空间07字体样式细讲相对单位em与h1标签,h2标签字体大小的原理机制(默认大小,绝对大小,相对大小)标准默认字规范08backgroundjs00问题汇总
本文格式规范
H1 上课节数+具体内容 编号标记为哪一节课相关知识点 H6 知识点,能显示在大纲里的最小单位,用来放一些知识点的标题(尽量让大纲渗透每一个知识点) 跟据前后的标题级别决定当前知识点标题级别 右键可以快速调节标题级别 00最后一类是问题汇总,在这里将搞不明白的问题向老师资询,同时自己标注出来,有时间进行查询与询问答疑老师. ing...
在线文档查询
http://www.w3school.com.cn/tags/html_ref_language_codes.asp
02基础标签
网页标准模板
国际化网页标准模板
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码），utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--声明当前页面的三要素：标题，关键词，描述-->
<title>国际化标准网页模板 （小于31个字）</title>
<meta name="keywords" content="关键词，关键词，关键词">
<meta name="description" content="简介与描述，80个字内">
<!--css/js-->
</head>
<body>
</body>
</html>
这节课，学习了一些基本的标签
在做作业的时候，才发现简单的页面也会有许多的问题
-
标题类标签自带margin
比如<h1></h1>标签，是自带margin的，当要将别的，诸如div元素想要紧贴带有<h1>标签的<div>时，无法贴合，这种细节只有练习的时候才能知道，所以要多多练习。
font标签
<font size="6" face"微软雅黑">文字</font>
span标签
p标签
a标签
图片的相对路径-relative
<img src="../../images/1.jpg"/> 两个点,代表返回上一层文件夹
图片的绝对路径-absolute
<img src="C:\work\Java\course\vip\Arry精英战队\JavaWeb\chapter04\chapter04\images\bc.jpg" />标签页内锚记,锚点定位
<h3>矛点定位</h3>
<a href="#haha">点我可以跳转到标题栏</a>可以用来做页内定位,用来做页内导航,目录.
特殊字符表示
pre标签,这个标签内可以输入各种原生文字!!
上标下标
H<sub>2</sub>CO<sub>3</sub> = H<sub>2</sub>O + CO<sub>2</sub>
2<sup>3</sup> + 3<sup>3</sup> = 35
<a href="#">这是一个超链</a>
将href=#是指联接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击关闭时，会执行window.close()代码。
marquee标签
<marquee>移动的文字<marquee>
03重要的图片标签-img
图片的格式知识
-
不同格式的图片
-
jpg
-
通用最多
-
-
gif
-
动图
-
-
png
-
高清+透明
-
图片标签的四要素 width height src alt
<img src="" alt="" width="" height="">标签内的属性都是用双引号隔开彼此
样式内都是用分号来隔开彼此
还有title属性,用来将鼠标放在上面的时候显示的文字
<img src="http://p0.qhimgs4.com/t01a10bc4aece0e5061.webp" alt="图片我找不到了" title="这是马云" width="300px" height="400px">图片的路径
-
.. 代表返回上一层文件夹
-
绝对路径与相对路径
-
正斜框向左偏,反斜杠向右偏
-
绝对路径用正斜杠,相 对路径用反斜杠
-
-
Img标签路径
img标签里，关于引入文件路径，课堂上并没有讲本地路径如何链接。还有以前记得有一个相对路径的概念。回来自己再查查资料
· 图片大小调节，这里还是有点迷，回来再仔细的研究一下
· 适配问题
关于img 与div 的适配
div与 浏览器的适配
这些排版的细节，概念不是很懂，碰到具体问题自己在想一下。
排列图片
背景图片
怎么做到不重复
怎么居中
给图片加上超链接的方法
<a href=""><img src="" alt="" width="" height="" /></a>标签内用双引号隔开属性
排列图片
（align="bottom / middle / top"）;
浮动图像
（带有图像的一个段落，图像的 align 属性设置为 "left"图像将浮动到文本的左侧）;
空链接
<a href="#">哈哈哈</a>
<a href="###">哈哈哈</a>
<a href="javascript:void(0)">哈哈哈</a>
04清单,表格,frame
列表
-
是块级元素
列表标签
<dl>
<dt>编程语言</dt>
<dd>java</dd>
<dd>c++</dd>
<dd>python</dd>
<dd>web</dd>
<dd>html</dd>
</dl>
-
在导航栏应用较多
-
一些标签在哪会用到，实际上的结合了！！
-
有序标签ol,无序标剑ul
-
ol---- orderlist
ul---- unorderlist
<h2>无序列表</h2> <ul> <li>翱翔</li> <li>喵星人</li> <li>jazc侠</li> <li>Duckjoe</li> <li>无名</li> </ul>
最低0.47元/天 解锁文章
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
