kuangd_1992
kuangd_1992

【前端HTML】HTML基础

文章目录

  • HTML
  • 标签
    • 标签属性
  • 基本结构
  • 文档声明
  • HTML标准结构
  • HTML基础
    • 排版标签
    • 语义化标签
    • 块级元素与行内元素
    • 文本标签
    • 图片标签
    • 超链接
      • 跳转到指定页面
      • 跳转到文件
      • 跳转到锚点
      • 唤起指定应用
    • 列表
      • 有序列表
      • 无序列表
      • 列表嵌套
      • 自定义列表
    • 表格
      • 基本结构
      • 常用属性
      • 跨行跨列
    • 常用标签
    • 表单
      • 基本结构
      • 常用表单控件
        • 文本输入框
        • 密码输入框
        • 单选框
        • 复选框
        • 隐藏域
        • 提交按钮
        • 重置按钮
        • 普通按钮
        • 文本域
        • 下拉框
        • 禁用表单控件
        • label标签
        • 总体示例
      • 表单总结

HTML

HTML，HyperText Markup Language，超文本标记语言。

标签

标签是HTML的基本组成单位。

标签分为：双标签和单标签.

标签名不区分大小写，但是推荐小写

双标签:

<标签名>标签体

单标签:

<标签名>

标签属性

用于给标签提供附加属性。

可以写在起始标签或单标签中。

<标签名 属性名=“属性值”>

天下

有些特殊的属性，没有属性名，只有属性值。

注意点：

1、不同的标签，有不同的属性；也有一些通用属性

2、属性名、属性值不能乱写，是W3C规定好的

3、属性名、属性值，都不区分大小写，但推荐小写

4、标签中不要出现同名属性。

基本结构

想要呈现在网页中的内容写在body标签中。

head标签中的内容不会出现在网页中。

head标签中的title标签可以指定网页的标题。

<html>
  <head>
    <title>网页标题title>
  head>
  <body>
   ......
  body>
html>

文档声明

作用：告诉浏览器当前网页的般般

写法：

注意：文档声明必须在网页的第一行，且在HTML标签的外侧

HTML标准结构

标准结构如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
body>
html>
  • 输入 !，然后回车，可以快速生成标准结构。
  • 在存放代码的文件夹中，存放一个favicon.ico图片，可配置网站图标。

HTML基础

排版标签

标签名 标签含义 单/双标签
h1~h6 标题 双
p 段落 双
div 没有任何意义，用于整体布局 双
  • h1 最好写一个， h2~h6 能适当多写。
  • h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
  • p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签

语义化标签

标签默认的效果不重要，语义最重要！

块级元素与行内元素

块级元素：独占一行（排版标签都是块级元素）

行内元素：不独占一行（比如input），其中只能写行内元素，但不能写块级元素。

<body>
        
        <marquee>学习marquee>

        
        <input type="text">

        
        <div>
            <span>学习1span>
            <input type="text">
            <div>学习2div>
        div>
        
        <span>
            <span>学习1span>
            <input type="text">
        span>
    body>

文本标签

用于包裹词汇、短语等。

通常写在排版标签中。

排版标签更宏观（大段文字），文本标签更微观（词汇、短语）。

文本标签通常是行内元素。

【前端HTML】HTML基础_第1张图片

【前端HTML】HTML基础_第2张图片

blockquote和address是块级元素，其他的是文本标签，都是行内元素。

图片标签

标签名 标签语义 常用属性 单双标签
img 图片 src：图片路径，具体位置
alt：图片描述
width：图片宽度，像素，200px或200
height：图片高度		 单

示例代码：

<body>
    <img src="./11.PNG" width="100" alt="操作系统">
body>

像素px是单位

尽量不要同时修改图片的宽和高。

alt属性的作用：

  • 搜索引擎通过alt属性得知图片的内容。
  • 当图片无法展示时，浏览器会呈现alt属性的值。
  • 盲人阅读器会朗读alt属性的值。

src路径：

相对路径和绝对路径

图片格式：jpg、png、bmp、GIF、webp、base64等。

超链接

主要作用：从当前页面进行跳转。

实现功能：

  1. 跳转到指定页面
  2. 跳转到指定文件
  3. 跳转到锚点位置
  4. 唤起指定应用
标签名 标签语义 常用属性
a 超链接 href:指定要跳转的具体目标。
target：控制跳转时如何打开页面，常用值如下：
_self：在本窗口打开。
_blank：在新窗口打开。
id：元素的唯一标识，可用于设置锚点。
name：元素的名字，写在a标签中，也能设置锚点。

跳转到指定页面

<body>
    <a href="https://www.jd.com/" target="_blank">去京东a> 
    <a href="./10块级元素和行内元素.html" target="_self">去看行内元素a>
body>

跳转到文件

代码如下：

	<body>
        
        
        <a href="./resource/学习.mp4">学习a>
        <a href="./resource/报名.pdf">报名表a>
        <a href="./resource/皮卡丘.gif">皮卡丘a>
        <a href="./resource/风景.jpg">风景a>

        
        <a href="./resource/资料.zip">内部资料a>

        
        <a href="./resource/学习.mp4" download="学习片段.mp4">下载电影a>
    body>

跳转到锚点

锚点：网页中的一个标记点。

使用方式：

  1. 设置锚点

    
<a name="test1">a>

<h2 id="test2">我是一个位置h2>

    注意：

    1. 具有href属性的a标签是超链接，具有name属性的a标签是锚点。
    2. name和id是区分大小写的，且id最好不要用数字开头。

  2. 跳转锚点

    
<a href="#test1">去test1锚点a>

<a href="#">回到顶部a>

<a href="demo.html#test1">去demo.html页面的test1锚点a>

<a href="">刷新本页面a>

<a href="javascript:alert(1);">点我弹窗a>

唤起指定应用

通过a标签，可以唤起设备应用程序。


<a href="tel:10010">电话联系a>

<a href="mailto:[email protected]">邮件联系a>

<a href="sms:10086">短信联系a>

列表

有序列表

概念：有顺序或侧重顺序的列表。

<h2>要把大象放冰箱总共分几步h2>
<ol>
  <li>把冰箱门打开li>
  <li>把大象放进去li>
  <li>把冰箱门关上li>
ol>

无序列表

概念：无顺序或不侧重顺序的列表。

<h2>我想去的几个城市h2>
<ul>
  <li>成都li>
  <li>上海li>
  <li>西安li>
  <li>武汉li>
ul>

列表嵌套

概念：列表中的某项内容，包含一个列表(注意：嵌套时，请将解构写完整)。

示例如下：


<h2>我想去的几个城市h2>
<ul>
    <li>成都li>
    <li>
        <span>上海span>
        <ul>
            <li>外滩li>
            <li>杜莎夫人蜡像馆li>
            <li>
                <a href="https://www.opg.cn">东方明珠a>
            li>
            <li>迪士尼li>
        ul>
    li>
    <li>武汉li>
    <li>西安li>
ul>

显示结果：

【前端HTML】HTML基础_第3张图片

注意：li标签最好写在 ul 或 ol 中，不要单独使用。

自定义列表

概念：自定义列表，是一个包含术语名称以及术语描述的列表。

一个dl是一个自定义列表，一个dt是一个术语名称，一个dd是一条术语描述。

示例如下：


<h2>如何高效的学习？h2>
<dl>
    <dt>做好笔记dt>
    <dd>笔记是我们以后复习的一个抓手dd>
    <dd>笔记可以是电子版，也可以是纸质版dd>
    <dt>多加练习dt>
    <dd>只有敲出来的代码，才是自己的dd>
    <dt>别怕出错dt>
    <dd>错很正常，改正后并记住，就是经验dd>
dl>

显示结果：

【前端HTML】HTML基础_第4张图片

表格

基本结构

表格涉及到的标签：

  • table ：表格
  • caption ：表格标题
  • thead ：表格头部
  • tbody ：表格主体
  • tfoot ：表格注脚
  • tr ：每一行
  • th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）

【前端HTML】HTML基础_第5张图片

示例：

<body>
    <table border="1">
        
        <caption>学生信息caption>
        
        <thead>
            <tr>
                <td>姓名td>
                <td>性别td>
                <td>年龄td>
                <td>民族td>
                <td>政治面貌td>
            tr>
        thead>

        
        <tbody>
            <tr>
                <td>张三td>
                <td>男td>
                <td>18td>
                <td>汉族td>
                <td>团员td>
            tr>
        tbody>

        
        <tfoot>
            <tr>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>共计1人td>
            tr>
        tfoot>
    table>
body>

结果：

【前端HTML】HTML基础_第6张图片

常用属性

【前端HTML】HTML基础_第7张图片

注意：

  1. 元素的border属性可以控制表格边框，但是border值的大小，不能控制单元格边框的宽度，只能控制表格最外侧边框的宽度，——后期CSS控制。
  2. 默认情况下，每列的宽度，看这一列单元格最长的那个文字。
  3. 给某个th或td设置了宽度或高度后，所在行或列的宽度或高度就确定了。

    4. 跨行跨列

    1. rowspan：指定要跨的行数。
    2. colspan：指定要跨的列数。

    本节主要是举例来理解跨行跨列的使用。

    课程表效果：

    【前端HTML】HTML基础_第8张图片

    代码：

    <body>
    <table border="1">
        
        <caption>课程表caption>
        
        <thead>
            <tr>
                <th>项目th>
                <th colspan="5">上课th>
                <th colspan="2">活动与休息th>
            tr>
        thead>
        
        <tbody>
            <tr>
                <th>星期th>
                <th>星期一th>
                <th>星期二th>
                <th>星期三th>
                <th>星期四th>
                <th>星期五th>
                <th>星期六th>
                <th>星期日th>
            tr>
            <tr>
                <th rowspan="4">上午th>
                <th>语文th>
                <th>数学th>
                <th>英语th>
                <th>英语th>
                <th>物理th>
                <th>数学竞赛th>
                <th rowspan="4">休息th>
            tr>
            <tr>
                <th>语文th>
                <th>数学th>
                <th>英语th>
                <th>英语th>
                <th>物理th>
                <th>数学竞赛th>
            tr>
            <tr>
                <th>语文th>
                <th>数学th>
                <th>英语th>
                <th>英语th>
                <th>物理th>
                <th>数学竞赛th>
            tr>
            <tr>
                <th>语文th>
                <th>数学th>
                <th>英语th>
                <th>英语th>
                <th>物理th>
                <th>数学竞赛th>
            tr>
            <tr>
                <th rowspan="2">下午th>
                <th>语文th>
                <th>数学th>
                <th>英语th>
                <th>英语th>
                <th>物理th>
                <th>数学竞赛th>
                <th rowspan="2">休息th>
            tr>
            <tr>
                <th>语文th>
                <th>数学th>
                <th>英语th>
                <th>英语th>
                <th>物理th>
                <th>数学竞赛th>
            tr>
        tbody>
    table>
body>

    结果示例：

    【前端HTML】HTML基础_第9张图片

    常用标签

    标签名 标签含义 单/双标签
    br 换行 单
    hr 分隔 单
    pre 按原文显示 双
    1. 使用

      标签来增加文本之间的行间隔，或者使用CSS中的margin属性。

    2. 的语义是分隔。

    表单

    概念：一个包含交互的区域，用于收集用户提供的数据。

    基本结构

    标签名 常用属性 标签语义
    form action：用于指定表单的提交地址，要与后端人员沟通后确定。
    target：用于控制表单提交后，如何打开页面，常用值如下：
    _self：在本窗口打开。
    _blank：在新窗口打开。
    method：用于控制表单的提交方式，后续会详细讲解。    		 表单
    input type：设置输入框的类型，text表示普通文本。
    name：用于指定提交数据的名字，主要用于与后端人员沟通。    		 输入框
    button 按钮

    示例：

    <form action="https://www.baidu.com/s" target="_blank" method="get">
	<input type="text" name="wd">
	<button>去百度搜索</button>
</form>

    常用表单控件

    文本输入框
    <input type="text">
    1. name属性：数据名称。
    2. value属性：输入框的默认输入值。
    3. maxlength：输入框最大可输入长度。
    密码输入框
    <input type="password">
    1. name属性：数据名称。
    2. value属性：输入框的默认输入值，一般不用，无意义。
    3. maxlength：输入框最大可输入长度。
    单选框
    <input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男
    1. name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
    2. value 属性：提交的数据值。
    3. checked 属性：让该单选按钮默认选中。
    复选框
    <input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
    1. name 属性：数据的名称。
    2. value 属性：提交的数据值。
    3. checked 属性：让该复选框默认选中。
    隐藏域
    <input type="hidden" name="tag" value="100">

    用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。
    name 属性：指定数据的名称。
    value 属性：指定的是真正提交的数据。

    提交按钮
    <input type="submit" value="点我提交表单">
<button>点我提交表单</button>
    1. button 标签 type 属性的默认值是 submit 。
    2. button 不要指定 name 属性
    3. input 标签编写的按钮，使用 value 属性指定按钮文字。
    重置按钮
    <input type="reset" value="点我重置">
<button type="reset">点我重置</button>
    1. button 不要指定 name 属性
    2. input 标签编写的按钮，使用 value 属性指定按钮文字。
    普通按钮
    <input type="button" value="普通按钮">
<button type="button">普通按钮</button>

    普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。

    文本域
    <textarea name="msg" rows="22" cols="3">我是文本域</textarea>
    1. rows 属性：指定默认显示的行数，会影响文本域的高度。
    2. cols 属性：指定默认显示的列数，会影响文本域的宽度。
    3. 不能编写 type 属性，其他属性，与普通文本输入框一致
    下拉框
    <select name="from">
  <option value="黑">黑龙江</option>
  <option value="辽">辽宁</option>
  <option value="吉">吉林</option>
  <option value="粤" selected>广东</option>
</select>
    1. name 属性：指定数据的名称。
    2. option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
    3. option 标签设置了 selected 属性，表示默认选中。
    禁用表单控件

    给表单空间的标签设置disabled，可以禁用表单控件。

    input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性.

    label标签

    label标签可与表单控件相关联，关联后点击文字，与之对应的表单控件会获取焦点。

    两种与 label 关联方式如下：

    • 让 label 标签的 for 属性的值等于表单控件的 id 。

    • 把表单控件套在 label 标签的里面。

    总体示例
    DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>18表单-常用表单控件title>
    head>

    <body>
        <form action="https://search.JD.com/search">
            
            <label for="zhanghu">账户：label>
            <input id="zhanghu" type="text" name="account"><br>

            
            <label>
                密码：
                <input type="password" name="pwd"><br>
            label>
            
            
            性别：
            <input type="radio" name="gender" value="male" id="nan">
            <label for="nan">男label>

            <label>
                <input type="radio" name="gender" value="famale" checked>女
            label>
            
            <br>           
            
            爱好：
            <input type="checkbox" name="hobby" value="smoke" checked disabled>抽烟
            <input type="checkbox" name="hobby" value="drink">喝酒
            <input type="checkbox" name="hobby" value="perm">烫头
            <br>

            
            其他：
            <textarea name="other" cols="30" rows="3">textarea>
            <br>

            
            籍贯：
            <select name="place">
                <option value="冀">河北option>
                <option value="鄂" selected>湖北option>
                <option value="湘">湖南option>
                <option value="阅" disabled>广东option>
            select>
            <br>
            
            <input type="hidden" name="abc" value="123"><br>
            
            
            
            <input type="submit" value="确认">

            
            
            
            <input type="reset" value="重置">

            
            
            
            <input type="button" value="检测账号是否被注册">

            
        form>
    body>
html>

    效果：

    【前端HTML】HTML基础_第10张图片

    表单总结

    【前端HTML】HTML基础_第11张图片

你可能感兴趣的:(前端,前端,html)

  • 全面掌握React：2025年学习路径指南 chenNorth。 前端reactreact.js学习前端
    文章目录第一步：Web开发的基石——JavaScript与TypeScript第二步：Web设计的核心——HTML与CSS第三步：进入React的世界第四步：用TailwindCSS进行样式设计第五步：用Shadcn/UI增强你的UI第六步：用ReactHookForm处理表单第七步：用Next.js提升你的技能第八步：用Remix掌握全栈开发第九步：ReactNative+Expo：轻松开发移动
  • Vue对话式前端界面 WUJI02 裁判文书大模型vue.js前端javascript
    一.对话样式的实现用一个messages数组来存放对话信息，信息有两种类型user和botthis.messages.push({type:'user',content:this.userMessage});this.messages.push({type:'bot',content:response.data.reply});模版部分使用:class="['message-content',me
  • springboot + xterm.js + vue + websocket实现终端功能（y-shell）文件管理器实现 张音乐 JSVueReact前端踩坑实战教程树形菜单右键菜单VUE
    一、文件管理器功能描述这一章节讲一下文件管理器的实现与设计细节。首先，文件管理器需要提供以下几个主要的功能，开发过程中使用vue渲染前端页面以及交互过程中还是遇到了不少问题，比如说右键菜单，表单校验。1、文件夹的新增，编辑，删除。2、ssh配置的新增，编辑，删除。3、右键菜单如图：文件夹管理ssh连接管理快速运行dockerrun-itd--namey-shell-
  • html5 h265播放器,PC端播放H265 健康和谐男哥 html5h265播放器
    说明需要在PC端浏览器(Chrome)中播放直播视频，视频格式有H264/H265。有不少三方库可以实现。通过video.js(支持H264，不支持H265)videojs-contrib-hlsembedVideo.jsExampleEmbeddata-setup='{}'>参考地址：通过hls.js(支持H264，不支持H265)pcplaym3u8(hlsjs)video{width:600
  • 探索2025年最流行的移动端前端框架 程序猿000001号 前端框架
    探索2025年最流行的移动端前端框架正文：在当今快速发展的移动互联网时代，选择合适的前端框架对于开发高效、响应迅速的移动应用至关重要。以下是一些目前非常流行且备受开发者青睐的移动端前端UI框架。VantVant是一个轻量、可靠的移动端Vue组件库，适用于各种业务场景。它提供了丰富的组件和良好的文档支持，是许多电商应用的首选。ElementPlusElementPlus是基于Vue3的桌面端组件库，
  • 基于python3.10的Django4.1项目安装启动（二） weixin_40686234 前端djangobootstrappythonhtml
    创建模版---templates和引入静态文件，bootstrap一.创建模版---templates1.在url.py页面编辑路由path("home/",views.home),#用于创建一个templates首页模板2.在views.py页面建立视图映射defhome(request):#去app目录下新建templates目录再新建home.html文件returnrender(reque
  • 构建响应式管理后台系统（Python + Django + Bootstrap） 后端架构魔术骑士 pythondjangobootstrapPython
    在本文中，我们将使用Python编程语言结合Django和Bootstrap框架来构建一个响应式管理后台系统。我们将使用Django作为后端框架，处理数据和业务逻辑，并使用Bootstrap作为前端框架，实现用户界面的设计和布局。环境设置和项目创建首先，确保你已经安装了Python和Django。在命令行中运行以下命令来创建一个新的Django项目：$django-adminstartprojec
  • html5 webgl stl,新闻|Babylon.js|Babylon.js教程|Babylon.js开发|Babylon.js制作|webgl|three.js|html53D可视化开发... miao君 html5webglstl
    4.0.0主要更新添加了对ammo.js的支持，作为物理插件(复合对象，电机，关节)(TrevorDev)Added在ammo.js物理插件中增加了对3D软体，2D布和1D绳索的软体的支持(JohnK)添加了AmmoJSPlugin场景文件加载器(MackeyK24)添加了对WebXR支持(TrevorDev)添加customAnimationFrameRequester以允许会话挂钩到引擎的渲染
  • SAP GR/IR在系统AP中收货和校验对会计业务的影响（详细） trassion SAP-FISAPGRIR采购
    转自：http://www.studa.net/kuaiji/100405/14523268.html【摘要】正确理解和掌握SAP系统采购收货和发票校验的集成性对会计业务的影响,可以为物料数据分析和成本数据分析提供有力工具,保证数据真实、完整、实时和丰富,为企业管理者提供决策支持。【关键词】SAP;采购收货;发票校验;集成;影响mySAPERP系统是一种可以实现跨地区、跨部门、甚至跨公司整合实时信
  • 怎么创建一个能在线测试php的html5网页？ 很酷的站长 编程记录html5专题php专题phphtml5开发语言
    代码示例：一、搭建服务器环境首先，你需要在服务器上搭建PHP运行环境。如果你使用的是Linux服务器，可以使用Apache或Nginx作为Web服务器，并安装PHP解释器。对于Windows服务器，可以使用WAMP（Windows,Apache,MySQL,PHP）或XAMPP等集成环境。二、创建HTML表单页面创建一个HTML页面，包含一个表单，用户可以在表单中输入PHP代码，将该代码提交到服务
  • 一个简单的html5导航页面 很酷的站长 html5专题html5前端html
    一个简单的HTML5导航页面的示例代码：html简单导航页面/*样式部分*/body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f4f4f4;}nav{background-color:#333;overflow:hidden;}nava{float:left;display:block;color:whit
  • day1-ES6学习基础语法 clock的时钟 es6学习前端
    title:day1-ES6学习基础语法date:2025-01-1512:00:00tags:-前端categories:-前端ES6#一认识：什么是ES6?ES6，全称ECMAScript2015，是JavaScript语言的一个重要版本，对语言进行了许多重大改进和新增功能。ES6的引入极大地提升了JavaScript的可用性、可读性和开发效率*ECMAScript是由ECMA国际标准化组织制
  • 一个简单的自适应html5导航模板 很酷的站长 html5专题csscss3前端
    一个简单的HTML导航模板示例，它包含基本的导航栏结构，同时使用了CSS进行样式美化，让导航栏看起来更美观。另外，还添加了一些JavaScript代码，用于在移动端实现导航菜单的展开和收起功能。PHP网址导航模板body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f4f4f4;}header{backgrou
  • 基于Python的Selenium详细教程总结（极简版） weixin_41663997 pythonselenium开发语言
    基于Python的Selenium详细教程总结一、PyCharm安装配置Selenium使用环境:Windows11,Python3.10.5,PyCharm2022.1.3,Selenium4.3.0需要技术:Python,HTML,CSS,JavaScriptSelenium安装:查看已安装的Python包:piplist安装Selenium4.3.0:pipinstallselenium==
  • 基于requests库的爬虫实战 京东商品信息爬取 Jerry104393 Pythonpython爬虫正则表达式
    一，功能描述：目标：从京东商城爬取商品信息，输出商品名称和价格二、技术路线：requests-re-bs4三，程序设计结构：1.爬取网页内容：getHTMLText()2.提取信息到合适的数据结构中:parsePage()3.利用数据结构展示并输出:printGoodsList()四、体会：本次实验遇到的最大技术难题就是怎么剔除HTML标签（查看源代码发现可以用i和em两个标签精确定位），后来查看
  • 计算机毕业设计JAVA房屋租赁系统mybatis 煦洋cxsj985 mybatisjava开发语言
    计算机毕业设计JAVA房屋租赁系统mybatis计算机毕业设计JAVA房屋租赁系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://pan
  • Formality：黑盒(black box) 日晨难再 Synopsys#Formality数字IC硬件工程
    相关阅读Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm=1001.2014.3001.5482简介在使用Formality时，黑盒(blackbox)的概念很重要，指的是一个其功能未知的设计。黑盒通常用于设计中不可综合的组件，包括RAM、ROM、模拟电路和硬核IP等。它也是需要匹配的对象之一，必须确
  • 开启eslint后，html中全角符号绕过eslint检测 Э时间行者于我 前端前端
    直接在需要的地方复制这块eslint代码就行
  • 数据库查询优化：提升性能的关键实践 qcidyu 文章归档DBA最佳实践性能调优查询执行计划索引SQL数据库性能查询优化
    title:数据库查询优化：提升性能的关键实践date:2025/1/30updated:2025/1/30author:cmdragonexcerpt:在当今数据驱动的商业环境中，数据库的性能直接影响着应用程序的响应速度和用户体验。查询优化是性能调优的重要组成部分，通过对SQL查询的分析与改进，减少查询执行时间和资源消耗，从而提升整体系统效率。categories:前端开发tags:查询优化数据
  • Go语言学习笔记——gin实现验证码 PPPsych Go精进学习gin
    文章目录Golang验证码知识结构下载包导包配置session创建中间件生成图片生成验证码验证前端页面测试Golang验证码知识结构ginsession中间件表单处理路由下载包gogetgithub.com/dchest/captcha导包import("bytes""net/http""time""github.com/dchest/captcha""github.com/gin-contrib
  • gin框架学习笔记 蛮吉(lambda) goginjsonjava中间件
    gin框架学习笔记官网reviewgin是用go编写的web框架，由于httprputer(基于radix树路由)速度快了40倍，支持中间件，路由组处理，json等多方式验证，内置了json/xml/html等渲染，是一个易于使用的go框架如果是用常量，比如http.statusOkimpport“net/http”gin使用默认的encoding/json作为默认的json包，但是可以通过其他标
  • VUE项目使用高德地图进行精准定位 高德地图API HhhDreamof_ 定位
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、高德地图API二、使用步骤1.引入key2.创建方法总结前言提示：以下是本篇文章正文内容，下面案例可供参考一、高德地图的准备工作1.注册高德地图管理者账号https://developer.amap.com/准备好key2.在index.htmlbody中引入高德地图定位二、创建方法1.methods代码如下（示例）：
  • 如何解决Webview和H5缓存问题，确保每次加载最新版本的资源 qq_39279448 缓存
    WebView用于加载H5页面是常见的做法，它能够加载远程的HTML、CSS、JavaScript资源，并且让Web应用嵌入到原生App中。然而，WebView的缓存机制有时会导致用户看到的是旧版本的页面或资源，尤其是在H5发版后，iOS端用户可能仍然加载到缓存的旧页面，造成了不一致的体验。本篇文章将详细分析这个问题的根本原因，并介绍一些有效的缓存处理策略，确保每次加载的都是最新的资源。一、Web
  • 工作流编写教程 weixin_34363171 前端phpViewUI
    介绍ONES中使用了flowchart.js作为前端展示，并且扩展了flowchart.js的流程描述语言。flowchart.js参见：https://github.com/adrai/flowchart.js描述语言分为三部分，使用\n\n(空一行)作为分割，分别是节点定义、执行流程描述、节点权限描述节点定义eg:make_stockout=>operation:生成出库单:>m:Sale/O
  • Vue.js组件开发-实现全屏背景图片滑动切换特效 LCG元 前端vue.js前端javascript
    使用Vue实现全屏背景图片滑动切换特效的详细步骤、代码、注释和使用说明。步骤创建Vue项目：使用VueCLI创建一个新的Vue项目。准备图片资源：准备好要用于背景切换的图片，并将它们放在项目的合适目录下。编写HTML结构：创建一个包含图片容器和导航按钮的HTML结构。编写CSS样式：设置全屏背景和图片切换动画效果。编写Vue组件逻辑：实现图片切换的逻辑。详细代码1.创建Vue项目首先，确保已经安装
  • 【课程设计推荐】基于JSP的论文格式化系统后台模块的设计与实现 想念@思恋 课程设计jspjava课程设计javajsp
    关注【墨岚创客】，回复【毕设】，赠送免费毕设资源，具体联系方式见文末摘要论文的格式修改是一件很麻烦的事情，一篇论文在定稿以前为了让格式达到标准，需要修改很多次，浪费了大量时间。本系统的设计初衷就是为了解决论文书写格式的规范化，方便学者论文格式的自动生成。本系统是基于Java平台的Web应用程序。采用JSP作为后台开发语言，HTML和JavaScript作为前台开发语言，MYSQL5.0作为后台数据
  • 全面解析：HTML页面的加载全过程(六）--浏览器渲染之分层 - Layer huazi99于老师 html前端
    分层原因在生成布局树之后，渲染进程会将一些复杂的3D动画、滚动条、高z-index的元素生成图层，并生成图层树交给GPU加速渲染。页面设计复杂，并且交互效果多。如不分层，用户的一个简单交互将导致整个页面的重新渲染，效率低下。分层好处‌通过分层，浏览器可以将复杂的页面元素分离成不同的图层，每个图层可以独立地进行渲染和更新，从而减少重排和重绘的次数。例如，当用户滚动页面时，只有可视区域的内容会被重新绘
  • python学习专栏 zhousenshan python新赛道python
    推荐学习资料《15分钟轻松学Python》教程目录-CSDN博客每天40分玩转Django教程目录-CSDN博客Pycharm社区版搭建Django环境及Django简单项目、操控mysql数据库-CSDN博客这个开源有关于事务方面高级内容介绍：django-vue-lyadmin:django-vue-lyadmin前端采用vue3+elementplus,后端采用PythonDjangoDRF
  • Python中使用SQLite 昂热校长
    开发十年，就只剩下这套Java开发体系了>>>SQLite：SQLite是一种数据库，Python中集成了SQLite3，所以在Python中使用SQLite，可以直接导入SQLite包，不需要做额外的配置。更多的SQLite简介和相关知识可以查看专门的教程：http://www.runoob.com/sqlite/sqlite-tutorial.htmlPython中使用SQLite:可以直接像
  • springboot中DTO、VO、Entity相互转换 会说法语的猪 后端springbootjavaspringboot后端java
    在我们平时开发中，dto、vo、entity之间的相互转换是很频繁的操作，这篇就简单记录一下我在平时开发中转换的方法。在这之前先简单描述一下dto、vo、entityDTO：一般我们在开发中会定义数据传输对象（DataTransferObject,DTO）来接收前端传递的参数是最常见的。VO：平时开发中，一般会定义VO（viewobject）来封装返回给前端的数据Entity：在我们开发中，Ent
  • 关于旗正规则引擎中的MD5加密问题 何必如此 jspMD5规则加密
    一般情况下，为了防止个人隐私的泄露，我们都会对用户登录密码进行加密，使数据库相应字段保存的是加密后的字符串，而非原始密码。 在旗正规则引擎中，通过外部调用，可以实现MD5的加密，具体步骤如下： 1.在对象库中选择外部调用，选择“com.flagleader.util.MD5”，在子选项中选择“com.flagleader.util.MD5.getMD5ofStr({arg1})”； 2.在规
  • 【Spark101】Scala Promise/Future在Spark中的应用 bit1129 Promise
    Promise和Future是Scala用于异步调用并实现结果汇集的并发原语，Scala的Future同JUC里面的Future接口含义相同，Promise理解起来就有些绕。等有时间了再仔细的研究下Promise和Future的语义以及应用场景，具体参见Scala在线文档：http://docs.scala-lang.org/sips/completed/futures-promises.html
  • spark sql 访问hive数据的配置详解 daizj spark sqlhivethriftserver
    spark sql 能够通过thriftserver 访问hive数据，默认spark编译的版本是不支持访问hive，因为hive依赖比较多，因此打的包中不包含hive和thriftserver,因此需要自己下载源码进行编译，将hive，thriftserver打包进去才能够访问，详细配置步骤如下：   1、下载源码   2、下载Maven,并配置 此配置简单，就略过
  • HTTP 协议通信 周凡杨 javahttpclienthttp通信
                            一：简介  HTTPCLIENT，通过JAVA基于HTTP协议进行点与点间的通信！     二： 代码举例      测试类： import java
  • java unix时间戳转换 g21121 java
    把java时间戳转换成unix时间戳： Timestamp appointTime=Timestamp.valueOf(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())) SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd hh:m
  • web报表工具FineReport常用函数的用法总结（报表函数） 老A不折腾 web报表finereport总结
    说明：本次总结中，凡是以tableName或viewName作为参数因子的。函数在调用的时候均按照先从私有数据源中查找，然后再从公有数据源中查找的顺序。   CLASS CLASS(object):返回object对象的所属的类。   CNMONEY CNMONEY(number,unit)返回人民币大写。 number:需要转换的数值型的数。 unit:单位，
  • java jni调用c++ 代码 报错 墙头上一根草 javaC++jni
    # # A fatal error has been detected by the Java Runtime Environment: # #  EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00000000777c3290, pid=5632, tid=6656 # # JRE version: Java(TM) SE Ru
  • Spring中事件处理de小技巧 aijuans springSpring 教程Spring 实例Spring 入门Spring3
    Spring 中提供一些Aware相关de接口，BeanFactoryAware、 ApplicationContextAware、ResourceLoaderAware、ServletContextAware等等，其中最常用到de匙ApplicationContextAware.实现ApplicationContextAwaredeBean，在Bean被初始后，将会被注入 Applicati
  • linux shell ls脚本样例 annan211 linuxlinux ls源码linux 源码
    #! /bin/sh - #查找输入文件的路径 #在查找路径下寻找一个或多个原始文件或文件模式 # 查找路径由特定的环境变量所定义 #标准输出所产生的结果 通常是查找路径下找到的每个文件的第一个实体的完整路径 # 或是filename :not found 的标准错误输出。 #如果文件没有找到 则退出码为0 #否则 即为找不到的文件个数 #语法 pathfind [--
  • List,Set,Map遍历方式 (收集的资源,值得看一下) 百合不是茶 listsetMap遍历方式
    List特点：元素有放入顺序，元素可重复 Map特点：元素按键值对存储，无放入顺序 Set特点：元素无放入顺序，元素不可重复（注意：元素虽然无放入顺序，但是元素在set中的位置是有该元素的HashCode决定的，其位置其实是固定的） List接口有三个实现类：LinkedList，ArrayList，Vector LinkedList：底层基于链表实现，链表内存是散乱的，每一个元素存储本身
  • 解决SimpleDateFormat的线程不安全问题的方法 bijian1013 javathread线程安全
    在Java项目中，我们通常会自己写一个DateUtil类，处理日期和字符串的转换，如下所示： public class DateUtil01 { private SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); public void format(Date d
  • http请求测试实例（采用fastjson解析） bijian1013 http测试
            在实际开发中，我们经常会去做http请求的开发，下面则是如何请求的单元测试小实例，仅供参考。 import java.util.HashMap; import java.util.Map; import org.apache.commons.httpclient.HttpClient; import
  • 【RPC框架Hessian三】Hessian 异常处理 bit1129 hessian
    RPC异常处理概述   RPC异常处理指是，当客户端调用远端的服务，如果服务执行过程中发生异常，这个异常能否序列到客户端？   如果服务在执行过程中可能发生异常，那么在服务接口的声明中，就该声明该接口可能抛出的异常。   在Hessian中，服务器端发生异常，可以将异常信息从服务器端序列化到客户端，因为Exception本身是实现了Serializable的
  • 【日志分析】日志分析工具 bit1129 日志分析
    1. 网站日志实时分析工具 GoAccess http://www.vpsee.com/2014/02/a-real-time-web-log-analyzer-goaccess/ 2. 通过日志监控并收集 Java 应用程序性能数据(Perf4J) http://www.ibm.com/developerworks/cn/java/j-lo-logforperf/ 3.log.io 和
  • nginx优化加强战斗力及遇到的坑解决 ronin47 nginx 优化
    　　　先说遇到个坑，第一个是负载问题，这个问题与架构有关，由于我设计架构多了两层，结果导致会话负载只转向一个。解决这样的问题思路有两个：一是改变负载策略，二是更改架构设计。 　　　由于采用动静分离部署，而nginx又设计了静态，结果客户端去读nginx静态，访问量上来，页面加载很慢。解决：二者留其一。最好是保留apache服务器。   　　　来以下优化：   　　　
  • java-50-输入两棵二叉树A和B，判断树B是不是A的子结构 bylijinnan java
    思路来自： http://zhedahht.blog.163.com/blog/static/25411174201011445550396/ import ljn.help.*; public class HasSubtree { /**Q50. * 输入两棵二叉树A和B，判断树B是不是A的子结构。 例如，下图中的两棵树A和B，由于A中有一部分子树的结构和B是一
  • mongoDB 备份与恢复 开窍的石头 mongDB备份与恢复
    Mongodb导出与导入 1: 导入/导出可以操作的是本地的mongodb服务器,也可以是远程的. 所以,都有如下通用选项: -h host   主机 --port port    端口 -u username 用户名 -p passwd   密码 2: mongoexport 导出json格式的文件
  • [网络与通讯]椭圆轨道计算的一些问题 comsci 网络
         如果按照中国古代农历的历法，现在应该是某个季节的开始，但是由于农历历法是3000年前的天文观测数据，如果按照现在的天文学记录来进行修正的话，这个季节已经过去一段时间了。。。。。       也就是说，还要再等3000年。才有机会了，太阳系的行星的椭圆轨道受到外来天体的干扰，轨道次序发生了变
  • 软件专利如何申请 cuiyadll 软件专利申请
    软件技术可以申请软件著作权以保护软件源代码，也可以申请发明专利以保护软件流程中的步骤执行方式。专利保护的是软件解决问题的思想，而软件著作权保护的是软件代码（即软件思想的表达形式）。例如，离线传送文件，那发明专利保护是如何实现离线传送文件。基于相同的软件思想，但实现离线传送的程序代码有千千万万种，每种代码都可以享有各自的软件著作权。申请一个软件发明专利的代理费大概需要5000-8000申请发明专利可
  • Android学习笔记 darrenzhu android
    1.启动一个AVD 2.命令行运行adb shell可连接到AVD,这也就是命令行客户端 3.如何启动一个程序   am start -n package name/.activityName   am start -n com.example.helloworld/.MainActivity 启动Android设置工具的命令如下所示： # am start -
  • apache虚拟机配置，本地多域名访问本地网站 dcj3sjt126com apache
    现在假定你有两个目录，一个存在于 /htdocs/a，另一个存在于 /htdocs/b 。 现在你想要在本地测试的时候访问 www.freeman.com 对应的目录是 /xampp/htdocs/freeman ,访问 www.duchengjiu.com 对应的目录是 /htdocs/duchengjiu。 1、首先修改C盘WINDOWS\system32\drivers\etc目录下的
  • yii2 restful web服务[速率限制] dcj3sjt126com PHPyii2
    速率限制 为防止滥用，你应该考虑增加速率限制到您的API。 例如，您可以限制每个用户的API的使用是在10分钟内最多100次的API调用。 如果一个用户同一个时间段内太多的请求被接收， 将返回响应状态代码 429 (这意味着过多的请求)。 要启用速率限制, [[yii\web\User::identityClass|user identity class]] 应该实现 [[yii\filter
  • Hadoop2.5.2安装——单机模式 eksliang hadoophadoop单机部署
    转载请出自出处：http://eksliang.iteye.com/blog/2185414 一、概述        Hadoop有三种模式 单机模式、伪分布模式和完全分布模式，这里先简单介绍单机模式 ，默认情况下，Hadoop被配置成一个非分布式模式，独立运行JAVA进程，适合开始做调试工作。   二、下载地址 Hadoop 网址http:
  • LoadMoreListView+SwipeRefreshLayout（分页下拉）基本结构 gundumw100 android
    一切为了快速迭代 import java.util.ArrayList; import org.json.JSONObject; import android.animation.ObjectAnimator; import android.os.Bundle; import android.support.v4.widget.SwipeRefreshLayo
  • 三道简单的前端HTML/CSS题目 ini htmlWeb前端css题目
    使用CSS为多个网页进行相同风格的布局和外观设置时，为了方便对这些网页进行修改，最好使用（ ）。http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm   在HTML中加入<table style=”color:red; font-size:10pt”>，此为（ ）。http://hovertree.com/s
  • overrided方法编译错误 kane_xie override
    问题描述： 在实现类中的某一或某几个Override方法发生编译错误如下： Name clash: The method put(String) of type XXXServiceImpl has the same erasure as put(String) of type XXXService but does not override it   当去掉@Over
  • Java中使用代理IP获取网址内容（防IP被封，做数据爬虫） mcj8089 免费代理IP代理IP数据爬虫JAVA设置代理IP爬虫封IP
    推荐两个代理IP网站：   1. 全网代理IP：http://proxy.goubanjia.com/   2. 敲代码免费IP：http://ip.qiaodm.com/   Java语言有两种方式使用代理IP访问网址并获取内容，   方式一，设置System系统属性   // 设置代理IP System.getProper
  • Nodejs Express 报错之 listen EADDRINUSE qiaolevip 每天进步一点点学习永无止境nodejs纵观千象
    当你启动 nodejs服务报错： >node app Express server listening on port 80 events.js:85 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE at exports._errnoException (
  • C++中三种new的用法 _荆棘鸟_ C++new
    转载自：http://news.ccidnet.com/art/32855/20100713/2114025_1.html 作者: mt 其一是new operator，也叫new表达式；其二是operator new，也叫new操作符。这两个英文名称起的也太绝了，很容易搞混，那就记中文名称吧。new表达式比较常见，也最常用，例如： string* ps = new string("
  • Ruby深入研究笔记1 wudixiaotie Ruby
    module是可以定义private方法的 module MTest def aaa puts "aaa" private_method end private def private_method puts "this is private_method" end end
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他