北大青鸟培训第二天：HTML初级代码和相关知识（持续更新）

HTML常用标签

<blockquote> </blockquote>
<q> </q>
<br>
<center> </center>
<div> </div><span> </span
><del> </del>
<hr>

1. <blockquote> </blockquote>引用别人说的话，常引用，会换行，是块元素运行后没有双引号。

2.<q> </q>表示短引用，有双引号。

3.<br> 换行标签，自结束标签，并且强制换行。

4.<center> </center> 居中效果。

5。<div> </div> 是块元素，用来布局的没有意义。

6.<span> </span> 没有任何语义，用来包裹文字，是行内元素。

7.<del> </del>使用del标签来表示一个删除的内容.

8.<hr> 是分割线。

（HTML 其他常用标签请在我第一天中写的看）

HTML结构标签

1. header 网页的头 <header> </header>

2. main 网页的主体部分（一般就一个) <main></main>

3. footer 网页的底部 <footer></footer>

4. nav 网页的导航 <nav></nav>

5. aside 和主体相关的内容，侧边栏 <aside></aside>

6. article 文章之类的 <article></article>

7. section 独立的区块，上面的标签都不合适，就用这个 ,也是没有任何语义，一般用来代替div

9. div 块元素 <div></div>\

一般网页布局结构为:

<header></header><main><nav></nav><aside></aside><article></article></main><footer></footer>

行内与块元素

块元素（block element）常用来布局

特点：

1、块元素会独占一行,而且从上往下依次排列

2、块元素的宽度默认是父元素的100%

3、块元素的高度默认是被内容撑开的

常用块元素：

div h1-h6  p  header  footer  nav ...

行内元素

（inline element）

特点：

1、行内元素不会独占一行,它是自左向右排列，一行排满，再另起一行，继续从左向右

2、行内元素的宽和高都是被内容撑开的

常用行内元素：

span  em  strong  a  i  ·····

行内块元素

特点：兼具块元素和行内元素的特点不会独占一行、可自定义宽高

常用行内块元素：

img

注意：

1、块元素里面什么都能放，可以放块元素、行内元素、行内块元素

2、行内元素里面一般只放行内元素，如文字，不能放块元素

3、特殊的块元素p标签，它里面一般只放文字或者图片，不能放块元素

4、特殊的行内元素a标签，它里面什么都能放，可以放块元素、行内元素、行内块元素

除了它自己

5.元素之间可以相互转换display属性

列表

列表（list）一组一组

1:有序列表用ol创建，li表示列表项 2:无序列表用ul创建 li表示列表项

3:定义列表用dl创建，dt下定义 dd解释定义

使用type属性可以更改项目符号如

<ul type='circle'><li>一</li><li>二</li><li>三</li></ul>

有序列表 1,a,A,i,I

无序列表：disc，默认值，实心的圆点

square，实心的方块

circle，空心的园

注意：

1、一般情况下，我们不会使用它的项目符号

2、列表是可以相互嵌套

图片标签

4个属性

1. src属性引入图片的路径通过./或者../开头

./ 引入图片跟你在同一个目录下

../ 跳出当前的目录，再找

2. alt属性对图片的描述，它会在图片引入不成功的时候，显示文字

它也会帮助浏览器做收录功能

3.width属性设置图片的宽度属性值里直接写数值或者带长度单位都可

4.height属性设置图片的高度

注意：一般情况下，width和height只设置一个，另一个让浏览器按比例缩放

超链接

超链接是行内元素，是特殊的行内元素，它里面什么都能放。他有两个功能，两个属性，一个补充

功能

1.可以从一个页面跳转到另一个页面

2.当前页面进行跳转

3.下载

属性

1.href 2.target

<a href=""><img src="./img/img/hg.gif" alt="">
</a>

href

填写超链接的地址

绝对地址只要填写网址，都可以经营正确的跳转，不管文件本身的影响

相对地址关文件本身位置的影响

./ 您要跳转的位置跟你在同一目录下

.. 跳出当前目录

——self 在当前页面打开跳转的超链接默认值

——blank 新开的页面打开超链接

辅助功能 ：1.回到顶部 href的属性值设置 # 即可

2.去任意的位置

第一步：给取的位置打一个标记，用id 属性设置一个id 属性值

第二步：在href 的属性值里 #id 属性值

注意：id属性值：不能是数字开头，最好不要是汉字，是独一无二的存在

 <a href="#">去顶部</a>

<a href ="#">空链接</a>
<a href ="javascript:;">空链接2</a>

北大青鸟培训第二天：HTML初级代码和相关知识（持续更新）相关推荐

北大青鸟培训第二周第二天：HTML和CSS相关知识（持续更新）
目录行间距 1.行高 (line height):文字占有的实际高度 2.单行文本在父元素中垂直居中 3.font 中也可以指定行高 font:bold italic 25px/3 s ...
北大青鸟培训第二周第三天：HTML和CSS相关知识（持续更新）
目录盒子模型举例子 1.内容区(content) 举例子盒子模型边框边框(border)元素设置边框盒子模型内边距盒子模型 1.网页中所有的元素都可以看成一个盒子,由 content + ...
[Linux]_[初级]_[用户相关命令]持续更新*
场景这里是关于操作用户账号的命令,这些命令在做一些管理,统计,定时等任务时有奇效. 1. 使用某用户运行命令语法 runuser - username -c [commands...] 例子 ru ...
北大青鸟java超市账单管理系统_北大青鸟java第二单元超市账单管理系统
[实例简介] 北大青鸟java第二单元考试项目超市账单管理系统,需要的话尽快下载,北大青鸟学习java的各个校区已经想学java的都可以拿去看 [实例截图] [核心代码] fabd4fde-6fe2- ...
女程序员/北大青鸟/培训
帮合作伙伴招人,来了三个人面试:一男两女男的来自日本公司,有些经验,但是已经习惯于日本公司的规则化做事,有点死板,没有什么灵性,有点紧张. 女1,这个MM给人的感觉很好,很活跃,个性和态度给人的感觉 ...
Vue3中使用Monaco Editor代码编辑器记录～持续更新
Vue3中使用Monaco Editor代码编辑器记录-持续更新因为毕设需要用到代码编辑器,根据调研,我选择使用monaco-editor代码编辑器前端框架使用Vue3 + elementUI m ...
北大青鸟培训第一天：HTML初级代码介绍和相关知识（持续更新）
代码解释 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
1个人70万行代码，20年持续更新，这款游戏号称开发到死，永不停更
梦晨博雯发自凹非寺量子位报道 | 公众号 QbitAI 这是一款「开发到死」,「永不停更」的游戏. 兄弟两人,一人开发,一人剧情,共同维持了这款游戏近20年. 现在的玩家刚刚打开它,往往会发 ...
2、线程池篇 - 从理论基础到具体代码示例讲解（持续更新中......）
前言暂无. 一.线程篇有关线程部分的知识整理请看我下面这篇博客: 1.线程篇 - 从理论到具体代码案例最全线程知识点梳理(持续更新中-) 二.线程池基础知识线程池优点他的主要特点为: 线程复用 ...

北大青鸟培训第二天：HTML初级代码和相关知识（持续更新）

北大青鸟培训第二天：HTML初级代码和相关知识（持续更新）相关推荐

最新文章

热门文章

北大青鸟培训第二天：HTML初级代码和相关知识 （持续更新）

北大青鸟培训第二天：HTML初级代码和相关知识 （持续更新）相关推荐

最新文章

热门文章

北大青鸟培训第二天：HTML初级代码和相关知识（持续更新）

北大青鸟培训第二天：HTML初级代码和相关知识（持续更新）相关推荐