devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML学习笔记总结_爬取html文件中的pre里的内容

作者：从前慢现在也慢 | 2024-03-06 10:00:50

赞

踩

爬取html文件中的pre里的内容

HTML学习

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基础标签

网页标准模板

​ 国际化网页标准模板

  1.   
  2.                                                               <!doctype html>
  3.    <html>
  4.       <head>
  5.           <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码），utf-8国际编码-->
  6.           <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.           <!--声明当前页面的三要素：标题，关键词，描述-->
  8.           <title>国际化标准网页模板 （小于31个字）</title>
  9.           <meta name="keywords" content="关键词，关键词，关键词">
  10.           <meta name="description" content="简介与描述，80个字内">
  11.           
  12.           <!--css/js-->
  13.   ​
  14.       </head>
  15.       
  16.       <body>
  17.           
  18.       
  19.   ​
  20.       </body>
  21.    </html>

这节课，学习了一些基本的标签

在做作业的时候，才发现简单的页面也会有许多的问题

  • 标题类标签自带margin

    ​ 比如<h1></h1>标签，是自带margin的，当要将别的，诸如div元素想要紧贴带有<h1>标签的<div>时，无法贴合，这种细节只有练习的时候才能知道，所以要多多练习。

    ​

font标签

  
  <font size="6" face"微软雅黑">文字</font>

span标签

p标签

a标签

图片的相对路径-relative

  1.   
  2.     <img src="../../images/1.jpg"/>

​ 两个点,代表返回上一层文件夹

图片的绝对路径-absolute

  1.   
  2.   <img src="C:\work\Java\course\vip\Arry精英战队\JavaWeb\chapter04\chapter04\images\bc.jpg" />

标签页内锚记,锚点定位

  1.   
  2.   <h3>矛点定位</h3>
  3.   <a href="#haha">点我可以跳转到标题栏</a>

可以用来做页内定位,用来做页内导航,目录.

特殊字符表示

pre标签,这个标签内可以输入各种原生文字!!

上标下标

  1.   
  2.   H<sub>2</sub>CO<sub>3</sub> = H<sub>2</sub>O + CO<sub>2</sub>
  1.   
  2.   2<sup>3</sup> + 3<sup>3</sup> = 35

  1.   
  2.           <a href="#">这是一个超链</a>

  1.   
  2.   将href=#是指联接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击关闭时，会执行window.close()代码。

marquee标签

  1.   
  2.   <marquee>移动的文字<marquee>

03重要的图片标签-img

图片的格式知识

  • 不同格式的图片

    • jpg

      • 通用最多

    • gif

      • 动图

    • png

      • 高清+透明

    ​

    图片标签的四要素 width height src alt

    1.   
    2.   <img src="" alt="" width="" height="">

    标签内的属性都是用双引号隔开彼此

    样式内都是用分号来隔开彼此

    ​ 还有title属性,用来将鼠标放在上面的时候显示的文字

    1.   
    2.   <img src="http://p0.qhimgs4.com/t01a10bc4aece0e5061.webp" alt="图片我找不到了" title="这是马云" width="300px" height="400px">

    图片的路径

    • .. 代表返回上一层文件夹

    • 绝对路径与相对路径

      • 正斜框向左偏,反斜杠向右偏

      • 绝对路径用正斜杠,相 对路径用反斜杠

  
   Img标签路径

​ img标签里，关于引入文件路径，课堂上并没有讲本地路径如何链接。还有以前记得有一个相对路径的概念。回来自己再查查资料

· 图片大小调节，这里还是有点迷，回来再仔细的研究一下

· 适配问题

关于img 与div 的适配

div与 浏览器的适配

这些排版的细节，概念不是很懂，碰到具体问题自己在想一下。

排列图片

背景图片

怎么做到不重复

​ 怎么居中

给图片加上超链接的方法

  1.   
  2.   <a href=""><img src="" alt="" width="" height="" /></a>

标签内用双引号隔开属性

排列图片

  
   （align="bottom / middle / top"）;

浮动图像

（带有图像的一个段落，图像的 align 属性设置为 "left"图像将浮动到文本的左侧）;

空链接

  1.   
  2.       <a href="#">哈哈哈</a>
  3.       <a href="###">哈哈哈</a>
  4.       <a href="javascript:void(0)">哈哈哈</a>

04清单,表格,frame

列表

  • 是块级元素

    列表标签

  1.   
  2.       <dl>
  3.           <dt>编程语言</dt>
  4.           <dd>java</dd>
  5.           <dd>c++</dd>
  6.           <dd>python</dd>
  7.           <dd>web</dd>
  8.           <dd>html</dd>
  9.       </dl>

  • 在导航栏应用较多

    • 一些标签在哪会用到，实际上的结合了！！

有序标签ol,无序标剑ul

  • ol---- orderlist

    ul---- unorderlist

    1.   
    2.      <h2>无序列表</h2>
    3.       <ul>
    4.           <li>翱翔</li>
    5.           <li>喵星人</li>
    6.           <li>jazc侠</li>
    7.           <li>Duckjoe</li>
    8.           <li>无名</li>
    9.       </ul>

    ​

    1.   
    2.       
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/197711
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号