html部分codewhy网课学习笔记

网页显示的过程和服务器

浏览器内核,也称为渲染引擎

head标签描述网页的原数据，如title

shift+tab是向前缩进

div>ul>li可以快速生成

<div>

  <ul>

    <li></li>

  </ul>

</div>

在早期,单标签如<input>也可写为<input/>or<input />

 id跟class也是属性,起区分作用

vscode的快捷键可以自己手动改,比如我的是ctrl+/添加/删除注释

#片段id如点击目录中的标题就会显示片段id 

 

文档声明会自动识别html版本 

 

 

root可以代指html标签

 

 

  

 

 从最开始!产生的代码迅速到body内部,可以通过多次按tab键实现

p元素

h标签默认是一个div,故会占据整行

img元素

绝对路径:直接使用C:\Users\qq_num\Desktop\Html系统化学习\a.jpg后不显示图片

   

但是右键open in default browser能看到,此时地址就是图片的地址,但是live server不可以,因为它的地址是搭建本地的服务器

 相对路径:相对于正在编写的html文档,如何找到这种图片

 <img src="./a.jpg" alt="">

 <img src="../images/a.jpg" alt="">

相对路径更方便且绝对路径几乎完全用不到

 a元素

还可以写_parent/_top 

想出现带有属性的元素,不需要写<,直接写img/a就好

a标签默认在自身的页面打开新网址,即target=_self

如果target=_blank,则是打开新页面再打开链接

打开本地网站 ,路径是html标签,打开百度网站其实是相当于打开百度服务器的index.html文档

写a标签,一定不要忘记写超链接的文本内容,这样才能点击跳转

p标签内部大量空格只会显示一个,且不会换行

解决方案:用div标签,内容会独占一行;或者使用br标签

实现点击目录的内容跳转效果

 点击图片跳转链接

实现方法是把a标签内部的文字换成img标签集合,即a标签嵌套img标签 

实现点击链接下载压缩包

 

 

点击可以完成发邮件的动作

iframe元素 

可以嵌套网页

 但是目前很多页面在iframe里面禁掉了链接,如小米跟百度

这里设置iframe只允许同源打开iframe

frameborder可以为0(无)或1(有) 

加了边框

 

如果iframe里面打开的a链接是parent,则在大网页内打开

如果是_self则在内部小网页打开 

top在最顶层打开窗口

top得到三层嵌套,最外层是ifame嵌套中层html,中层嵌套最内层a标签

 

 

 

div与span的历史 

 

 div跟span都是纯粹的容器

 如果想要把三个小标题及文字设置为不同颜色的背景,可以把三部分用三个div盒子装起来

 

 

 

 

 

全局属性

 class是列表,可以有多个

id可以作为a标签的标识符

字符实体

可以理解为c语言中的"%d aaaaa",无法判断%d是要输出的字符还是要解析一下

这个不输出任何东西

 

 <span><hhhhh</span>或者span内部夹着<>;

p标签内部确实想要输出五个连续空格,但是这几种浏览器都无法解析

 

解决无法输入<>和五个连续空格的方法