kuangd_1992

【前端HTML】HTML基础

文章目录

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

HTML

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

基本结构

想要呈现在网页中的内容写在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>

文本标签

用于包裹词汇、短语等。

通常写在排版标签中。

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

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

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等。

超链接

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

实现功能：

跳转到指定页面
跳转到指定文件
跳转到锚点位置
唤起指定应用

标签名	标签语义	常用属性
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>

跳转到锚点

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

使用方式：

设置锚点
```
<a name="test1">a>

<h2 id="test2">我是一个位置h2>
```
注意：
1. 具有href属性的a标签是超链接，具有name属性的a标签是锚点。
2. name和id是区分大小写的，且id最好不要用数字开头。

跳转锚点


<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>

显示结果：

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

自定义列表

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

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

示例如下：


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

显示结果：

表格

基本结构

表格涉及到的标签：

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

示例：

<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>

结果：

常用属性

注意：

元素的border属性可以控制表格边框，但是border值的大小，不能控制单元格边框的宽度，只能控制表格最外侧边框的宽度，——后期CSS控制。默认情况下，每列的宽度，看这一列单元格最长的那个文字。
给某个th或td设置了宽度或高度后，所在行或列的宽度或高度就确定了。
跨行跨列
 
   rowspan：指定要跨的行数。 
   colspan：指定要跨的列数。 
  
本节主要是举例来理解跨行跨列的使用。
课程表效果：
代码：
<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>
结果示例：
常用标签
 
     
     
    
   
   
   
   
   
   
   
   
   
   
   
  
 
    
     
     标签名 
     标签含义 
     单/双标签 
     
    
    
     
     br 
     换行 
     单 
     
     
     hr 
     分隔 
     单 
     
     
     pre 
     按原文显示 
     双 
     
    
   
   
    
    使用标签来增加文本之间的行间隔，或者使用CSS中的margin属性。 
    的语义是分隔。 
    
   
  表单 
  概念：一个包含交互的区域，用于收集用户提供的数据。 
  基本结构 
   
    
     
     标签名 
     常用属性 
     标签语义 
     
    
    
     
     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">
 
   
    
    name属性：数据名称。 
    value属性：输入框的默认输入值。 
    maxlength：输入框最大可输入长度。 
    
   
  密码输入框 
  <input type="password">
 
   
    
    name属性：数据名称。 
    value属性：输入框的默认输入值，一般不用，无意义。 
    maxlength：输入框最大可输入长度。 
    
   
  单选框 
  <input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男
 
   
    
    name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。 
    value 属性：提交的数据值。 
    checked 属性：让该单选按钮默认选中。 
    
   
  复选框 
  <input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
 
   
    
    name 属性：数据的名称。 
    value 属性：提交的数据值。 
    checked 属性：让该复选框默认选中。 
    
   
  隐藏域 
  <input type="hidden" name="tag" value="100">
 
   
   用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。
 name 属性：指定数据的名称。
 value 属性：指定的是真正提交的数据。 
   
  提交按钮 
  <input type="submit" value="点我提交表单">
<button>点我提交表单</button>
 
   
    
    button 标签 type 属性的默认值是 submit 。 
    button 不要指定 name 属性 
    input 标签编写的按钮，使用 value 属性指定按钮文字。 
    
   
  重置按钮 
  <input type="reset" value="点我重置">
<button type="reset">点我重置</button>
 
   
    
    button 不要指定 name 属性 
    input 标签编写的按钮，使用 value 属性指定按钮文字。 
    
   
  普通按钮 
  <input type="button" value="普通按钮">
<button type="button">普通按钮</button>
 
   
   普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。 
   
  文本域 
  <textarea name="msg" rows="22" cols="3">我是文本域</textarea>
 
   
    
    rows 属性：指定默认显示的行数，会影响文本域的高度。 
    cols 属性：指定默认显示的列数，会影响文本域的宽度。 
    不能编写 type 属性，其他属性，与普通文本输入框一致 
    
   
  下拉框 
  <select name="from">
  <option value="黑">黑龙江</option>
  <option value="辽">辽宁</option>
  <option value="吉">吉林</option>
  <option value="粤" selected>广东</option>
</select>
 
   
    
    name 属性：指定数据的名称。 
    option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性） 
    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>
 
  效果： 
   
   
  表单总结

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

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

移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
day15｜前端框架学习和算法 universe_01 前端算法笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
SpringMVC的执行流程
1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，
Selenium 特殊控件操作与 ActionChains 实践详解小馋喵知识杂货铺 selenium 测试工具
1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个
微信公众号回调java_处理微信公众号消息回调 weixin_39607620 微信公众号回调java
1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.
人工智能应用研究快讯 2021-11-30 峰谷皆平
[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin
【Jupyter】个人开发常见命令 TIM老师 #Pycharm &VSCode python Jupyter
1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju
用代码生成艺术字：设计个性化海报的秘密
本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
vue element 封装表单影子信息 vue vue.js javascript 前端
背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
前端面试每日 3+1 —— 第39天浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
GDP经济社会人文民生栅格数据下载网站汇总疯狂学习GIS
本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文
【MySQL】MySQL数据库如何改名武昌库里写JAVA 面试题汇总与解析 spring boot vue.js sql java 学习
MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://
前端数据库：IndexedDB从基础到高级使用指南
文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）笙囧同学 java 前端状态模式
核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
14.tornado操作之应用Websocket协议实现聊天室功能孤寒者 Tornado框架从入门到实战 websocket tornado 聊天室功能实现 python
目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
小架构step系列25：错误码秋千码途架构 java
1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
Java朴实无华按天计划从入门到实战（强化速战版-66天）岫珩 Java 后端 java 开发语言学习 Java 时间安排学习计划
致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
《跨域资源共享CORS的深层逻辑与前端实践精要》
不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
深入了解 Kubernetes（k8s）：从概念到实践
目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
移动端适配rem方案简单的码农
1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s
Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录二倍速播放前端 vue.js
1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
redis反弹shell时kali无法接收回弹的解决方法显哥无敌 shell redis
无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta
native.js设置可缩放的webview并隐藏缩放控件 Nanayai
需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala
大厂都在用的前端缓存策略，你掌握了吗？ AI架构全栈开发实战笔记前端缓存 ai
大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
Redis反弹Shell 波吉爱睡觉 web安全 #未授权访问漏洞 #SSRF redis 网络安全 web安全
这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell
26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSS css 前端 html
总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
H5UI微信小程序前端框架实战指南 ai
本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
Windows下Oracle安装图解叫我老村长
Windows下Oracle安装图解----oracle-win-64-11g详细安装步骤一、Oracle下载官方下地址http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htmlwin32位操作系统下载地址：http://download.oracle.com/otn/nt/oracle11g
关于旗正规则引擎中的MD5加密问题何必如此 jsp MD5 规则加密
一般情况下，为了防止个人隐私的泄露，我们都会对用户登录密码进行加密，使数据库相应字段保存的是加密后的字符串，而非原始密码。在旗正规则引擎中，通过外部调用，可以实现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 sql hive thriftserver
spark sql 能够通过thriftserver 访问hive数据，默认spark编译的版本是不支持访问hive，因为hive依赖比较多，因此打的包中不包含hive和thriftserver,因此需要自己下载源码进行编译，将hive，thriftserver打包进去才能够访问，详细配置步骤如下： 1、下载源码 2、下载Maven,并配置此配置简单，就略过
HTTP 协议通信周凡杨 java httpclient http 通信
一：简介 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++ 代码报错墙头上一根草 java C++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 spring Spring 教程 Spring 实例 Spring 入门 Spring3
Spring 中提供一些Aware相关de接口，BeanFactoryAware、 ApplicationContextAware、ResourceLoaderAware、ServletContextAware等等，其中最常用到de匙ApplicationContextAware.实现ApplicationContextAwaredeBean，在Bean被初始后，将会被注入 Applicati
linux shell ls脚本样例 annan211 linux linux ls源码 linux 源码
#! /bin/sh - #查找输入文件的路径 #在查找路径下寻找一个或多个原始文件或文件模式 # 查找路径由特定的环境变量所定义 #标准输出所产生的结果通常是查找路径下找到的每个文件的第一个实体的完整路径 # 或是filename :not found 的标准错误输出。 #如果文件没有找到则退出码为0 #否则即为找不到的文件个数 #语法 pathfind [--
List,Set,Map遍历方式 (收集的资源,值得看一下) 百合不是茶 list set Map遍历方式
List特点：元素有放入顺序，元素可重复 Map特点：元素按键值对存储，无放入顺序 Set特点：元素无放入顺序，元素不可重复（注意：元素虽然无放入顺序，但是元素在set中的位置是有该元素的HashCode决定的，其位置其实是固定的） List接口有三个实现类：LinkedList，ArrayList，Vector LinkedList：底层基于链表实现，链表内存是散乱的，每一个元素存储本身
解决SimpleDateFormat的线程不安全问题的方法 bijian1013 java thread 线程安全
在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 PHP yii2
速率限制为防止滥用，你应该考虑增加速率限制到您的API。例如，您可以限制每个用户的API的使用是在10分钟内最多100次的API调用。如果一个用户同一个时间段内太多的请求被接收，将返回响应状态代码 429 (这意味着过多的请求)。要启用速率限制, [[yii\web\User::identityClass|user identity class]] 应该实现 [[yii\filter
Hadoop2.5.2安装——单机模式 eksliang hadoop hadoop单机部署
转载请出自出处：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 html Web 前端 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

【前端HTML】HTML基础

文章目录

HTML

标签

标签属性

基本结构

文档声明

HTML标准结构

HTML基础

排版标签

语义化标签

块级元素与行内元素

文本标签

图片标签

超链接

跳转到指定页面

跳转到文件

跳转到锚点

唤起指定应用

列表

有序列表

无序列表

列表嵌套

自定义列表

表格

基本结构

常用属性

跨行跨列

常用标签

表单

基本结构

常用表单控件

文本输入框

密码输入框

单选框

复选框

隐藏域

提交按钮

重置按钮

普通按钮

文本域

下拉框

禁用表单控件

label标签

总体示例

表单总结

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