首页 > 其他分享 >HTML-Learning

HTML-Learning

时间：2024-02-26 12:11:40浏览次数：34  
标签：网页 标签 爬虫 HTML Learning 跳转 属性

Web Learning

HTML

标签

规范：小写

https://www.w3school.com.cn/tags/html_ref_byfunc.asp
https://developer.mozilla.org/zh-CN/docs/Web/HTML

  1. 双标签

<...>content</...>

  1. 单标签

<...>

  • <input>

属性

<... ...="..." ...="..."></> 属性名=“属性”值
<input disable>仅有属性

HTML基本结构

<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
  </head>
  <body>
      <p>paragraph</p>
  </body>
</html>

注释

<!--content-->

文档声明

<!DOCTYPE html> 对应HTML5

字符编码

<meta charset="UTF-8">
Alt text

设置语言

<html lang="en/zh-CN/zh"></html>
Alt text

排版

  • h1比较重要
  • div 用来布局
  • p里不能写h

语义化标签

块级元素和行内元素

块级里面几乎都可写，行内不能写块级

  • 块级（独占一行）
    • p，h，等
  • 行内
    • span
    • input

不常用的标签

Alt text

图片标签

<img width="" src="" alt="">（单标签）

  • src:源地址
  • alt：不加载图片时替代的文本
  • width:宽度，默认单位px

总结：
Alt text

相对/绝对路径

常见图片格式

  • jpg/jpeg
    • 有损压缩
    • 支持颜色丰富，占用小
    • 不支持透明，动态图
    • 用于对图片细节要求不高的，如网站产品宣传图
    • 常见
  • png
    • 无损压缩
    • 支持颜色丰富，占用较大
    • 支持透明，不支持动态图
    • 使用：有透明要求，logo，重要用图
  • bmp
    • 不支持透明，动态图
    • 占用大
    • 对细节要求极高的
  • gif
    • 256种颜色，色彩不完整
    • 简单透明背景
    • 动态
  • webp
    • 谷歌推出专门用于网页显示图片的格式
    • 兼容性问题
    • 集合上面的优点
  • base64
    • 一串特殊文本
    • 需要浏览器打开
    • 使用：较小的图片，需要与网页一起加载的图片，不用发网络请求

超链接

<a herf="" target=""><\a>

  • 属性
    • herf：跳转的链接或文件或锚点
      • 锚点：<a name="point"></a>,跳转时<a herf="#point"></a>,也可以使用id,id通用
    • download：导致浏览器将链接的 URL 视为下载资源。
      • 可以使用或不使用filename值作为文件名
    • target(默认self)
      • _self:当前页面跳转
      • _blank:新建页面跳转
    • 内可包括其他元素，不可包括自身a

列表

  • ol：有序列表
  • ul：无序列表
  • dl：自定义列表
    • dt：表标题
    • dd：内容

表格

Alt text

常用标签

  • br:换行
  • hr:分割线
  • pre:按原文样式

表单

<form>
  <input type="text">
  <button>搜索</button>
</form>
  • <input>:输入框
    • 属性：
    • type:
      • text:文本
      • password:密码
      • hiden:隐藏域
    • name:根据后端需要
    • value:所上传的值
    • checked:选中的
    • submmit:提交按钮
  • button:按钮
    • 属性:
    • type:
      • submmit:提交（默认值）
      • reset:重置
      • button:普通按钮
  • textarea:文本域
    • name
    • rows
    • cols
  • <select></select>:
    • 属性：
    • name：要上传的值的名字
    • <option></otion>
      • 属性：
      • value:若无，则提交option之间的值，否则提交value值
      • selected:默认选值
  • 禁用表单控件属性: disabled
    • input,textarea,button,select,option都可设置disabled属性
  • label:焦点关联
    • for:对应id
    • 或将整个用label包裹
  • fieldset:表单空间分组
  • legend:用于fieldset内做标题
<fieldset>
  <legent>标题</legend>
  ...
</fieldset>
  • iframe:网页嵌入

HTML字符实体

https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

  • &nbsp;或&#160;: 空格

全局属性

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes

Alt text

meta元信息

  1. 编码信息:<meta charset="UTF-8">
  2. IE浏览器兼容性问题:<meta http-equiv="X-UA-Compatible" content="IE=edge">
  3. 移动端配置:<meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. 关键字:<meta name="keywords" content="以英文逗号间隔的关键词">
  5. 网页相关信息:<meta name="description" content="80字以内的一段话，与网站内容相关">
  6. 针对搜索引擎爬虫:<meta name="robots" content="values">
    • index:允许爬虫索引
    • noindex:不允许爬虫索引
    • follow:允许搜索爬虫跟随链接
    • nofollow:不允许搜索爬虫跟随链接
  7. 网页作者:<meta name="author" content="D·d·kimser">
  8. 网页生成工具:<meta name="generator" content="Visual Studio Code">
  9. 版权信息:<meta name="copyright" content="2023-2099©版权所有">
  10. 网页自动刷新:<meta http-equiv="refresh" content="3;url=?"不写url则原页面刷新

标签：网页,标签,爬虫,HTML,Learning,跳转,属性
From： https://www.cnblogs.com/overlink/p/18034026

相关文章

  • CSS-Learning
    CSSCSS注释/**/样式表优先级行内：<h1style="color:red;">，属性:值;内部：在head内的style外部：存放在.css文件里CSS风格开发时用展开风格，利于开发上线时用紧凑风格，利于节省体积，加速，（webpack）CSS三大特性布局浮动float定位position:用于指定一个元素在文档......
  • HTML常见标签
    超链接标签路径问题href属性用于定义要跳转的目标资源的地址1.完整的ur1http://www.atguigu.com/2.相对路径以当前资源的所在路径为出发点去找目标资源./表示的当前资源的所在路径，可以省略不写的../表示当前资源的上一层路径，需要时必须显示写出3.绝......
  • html快捷键
    参考：vscode下html快捷编程目录索引1.生成html模板：【!】或者【html:5】2.单个标签的快速生成2.1打完标签名，按下回车键或者Tab键：【div】2.2【#】id，【.】class，【[]】属性，【{}】标签内容3.生成多个相同的同级标签：【table*3】4.生成多个不同的同级标签：【div+input+tabl......
  • html
    图片+跳转<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>我的小米</title></head><body><h1>红米K70</h1><imgsrc="/static/mi.jpg"style="width:80......
  • html_将按钮和文件输入框合并在一起
    <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="代码测试.aspx.cs"Inherits="代码测试"%><!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server">......
  • pytest简易教程（34）：pytest常用插件 - 测试报告（pytest-html）
     pytest简易教程汇总，详见：https://www.cnblogs.com/uncleyong/p/17982846关于pytest-html通过命令行方式，生成xml/html格式的测试报告，存储于用户指定路径报告会覆盖上一次的 插件安装pipinstallpytest-html 使用方式命令行格式：pytest--html=./report/report.html......
  • vue3 使用 html5-qrcode 实现扫描二维码功能
    1.安装npm安装npminstall--save-devhtml5-qrcode或直接引入<scriptsrc="https://unpkg.com/html5-qrcode"type="text/javascript">2.引入根据需求自定义渲染QRscanningUI的容器。<divid="reader"width="600px"></div&......
  • HTML中的文档流
    https://blog.csdn.net/ld16631069828/article/details/118852570文档流什么是文档流？文档流：页面从上往下一行一行，其中每行从左至右的顺序，这种排列方式成为文档流。什么是脱离了文档流？脱离文档流意味着它的排列顺序不遵循正常情况下文档的排列顺序，已经脱离了文档流，它不占用空间，......
  • Machine Learning - The Sigmoid Function
    CalculateNodeOutput.TaskYouaregiventhevaluesforw1,w2,b,x1andx2andyoumustcomputetheoutputforthenode.Usethesigmoidastheactivationfunction.InputFormatw1,w2,b,x1andx2ononelineseparatedbyspacesOutputFormatFloatrounded......
  • HTML
    HTML（1）head内常用标签在书写HTML比代码的时候，只需要写标签名，然后tab就能自动补全<title>test</title>网页标题<style></style>内部用来书写css代码<script></script>内部用来书写js代码<scriptsrc='myjs.js'></script>还可以引入外部js文件<linkrel......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99