前端知识-html

已于 2022-05-14 15:49:45 修改
阅读量947 收藏 1
点赞数
分类专栏： 前端基础 文章标签： html 前端 css
于 2022-05-11 15:47:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llx522/article/details/124711855
版权

html

  • Hyper Text Markup Language:超文本标记语言
  • W3C
    • World Wild Web Consortium:万维网联盟
  • W3C标准包括：
    • 结构化标准语言（HTML、XML）
    • 表现标准语言（css）
    • 行为标准（DOM、ECMAScript)

基本结构

在这里插入图片描述

  • html注释快捷键：ctrl+/，样式： 

<!--DOCTYPE:告诉浏览器要使用什么规范 -->

<!DOCTYPE html>
<!--head标签：代表网页头部-->
<html lang="en">
<head>
    <!--meta标签，用来描述网站的信息-->
    <!--meta标签一般用来做SEO  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="前端，学习">
    <meta name="description" content="学习java">
<!-- title：网页标题   -->
    <title>我的第一个网页</title>
</head>
<!--body：代表网页主体-->
<body>
HelloWorld!
</body>
</html>

网页的基本标签

标题标签
  • <h1>一级标签</h1>
段落标签
  • **快捷键：p+tab **
换行标签
  • 自闭合标签：br/
水平线标签
<hr/>
字体样式标签
<!--粗体 ， 斜体-->
<h1>字体样式标签</h1>

粗体 : <strong>i love you</strong>
斜体 : <em>i love you</em>
注释和特殊符号
<!--特殊符号-->

空格 :
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>
&gt; 大于符号
<br/>
&lt; 小于符号
<br/>
&copy;版权所有

<!--
特殊符号记忆方式

&开头 ;结尾

-->

图像标签

  • JPG
  • GIF：动图
  • PNG
  • BMP：位图

在这里插入图片描述

  • 写完img后加tab键自动生成
  • alt表示的意思，图片地址放错，可以通过替代文字找到图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--image学习
src: 图片地址
     相对地址(推荐使用)： ../  表示上一级目录
     绝对路径(不推荐)
-->

<img src="../resources/image/llyy.jpg" alt="合照" title="刘想和瑶瑶" width="2000" height="2000">
</body>
</html>

链接标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>

<!--
a标签
href : 必填，表示要跳转到哪个页面  超链接
target : 表示窗口在哪里打开
    _blank:在新标签中打开
    _self:在自己的网页中打开
-->
<a href="第一个网页.html" target="-_blank">点击我跳转到页面-</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度-</a>

<br>
<!--跳转到图片标签-->
<p>
    <a href="第一个网页.html">
        <img src="../resources/image/llyy.jpg" alt="合照" title="刘想和瑶瑶" width="200" height="200">
    </a>
</p>

<!--锚链接:页面间跳转
1.需要一个锚标记
2.跳转到标记

-->
<a href="#top">回到顶部</a>

<a name="down">down</a>


<!--功能性链接
邮件链接 : mailto;
-->

<a href="mailto:971223772@qq.com">点击联系我</a>


<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，加我领取java资料" title="你好，加我领取java资料"/></a>

</body>
</html>
  • a+tab
  • 用qq推广工具添加链接

行内元素和块元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • （p、h1-h6…）
  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以排在一行
    • （a.strong.em…）

列表标签

  • 有序列表：ol+tab 中间li+tab

  • 无序列表：ul+tab 中间li+tab

  • 自定义列表：dl：标签 dt：列表名称 dd：列表内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--有序列表
应用范围:试卷，问答...
-->
<ol>
  <li>java</li>
  <li>python</li>
  <li>c</li>
  <li>c++</li>
  <li>前端</li>
</ol>

<hr/>
<!--无序列表
应用范围：导航、侧边栏
-->
<ul>
  <li>java</li>
  <li>python</li>
  <li>c</li>
  <li>c++</li>
  <li>前端</li>
</ul>

<hr/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容

应用范围：网站底部
-->
<dl>
  <dt>学科</dt>
  <dd>java</dd>
  <dd>c</dd>
  <dd>python</dd>
  <dt>位置</dt>

  <dd>西安</dd>
  <dd>湖北</dd>
  <dd>深圳</dd>
  <dd>广东</dd>
</dl>
</body>
</html>

在这里插入图片描述

表格标签

  • 基本结构：
    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
  • 表格table+tab
    行: tr
    列 : td
    border : 边框 1px：1宽度
  • colspan : 跨列 相当于合并单元格、rowspan: 跨行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--表格table
行: tr
列 : td
border : 边框 1px：1宽度

-->
<table border="1px">
  <tr>
     <!--colspan : 跨列 相当于合并单元格-->
    <td colspan="4">1-1</td>
  </tr>
  <tr>
    <!--rowspan: 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>


</body>
</html>

视频和音频

  • 视频元素：video+tab
  • 音频元素：audio+tab
  • src:放资源的地方
    controls：控制播放
    autoplay:打开网页自动播放
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频
src:放资源的地方
controls：控制播放
autoplay:打开网页自动播放
-->

<!--<video src="../resources/vedio/一段小视频-超清720P.qsv" controls autoplay></video>-->

<audio src="../resources/audio/Unit%203%20VOA.mp3" controls autoplay></audio>
</body>
</html>

页面结构分析

header：标题头部区域的内容

footer:标记脚部区域的内容

section：Web页面中的一块独立区域

article：独立的文章内容

aside：相关内容或应用（常用于侧边栏）

nav：导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<!--头部-->
<header>
    <h2>网页头部</h2>
</header>
<!--主体-->
<section>
    <h2>网页主体</h2>
</section>
<!--脚部-->
<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

iframe内联框架

  • 嵌套
<iframe src="path" name="mainFrame"></iframe>
            引用页面地址            框架标识名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习</title>
</head>
<body>
<!--iframe内联框架
src:地址
width:宽度
height:高度
name:跳转到哪个页面

-->

<iframe src="https://www.bilibili.com" frameborder="0" width="1000px" height="800px"></iframe>

<a href="https://www.baidu.com" target="hello">点击跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0"-->
<!--        allowfullscreen="true">-->
<!--</iframe>-->

</body>
</html>

表单语法(重点)

  • 表单框：密码登录、二维码登录等

在这里插入图片描述

在这里插入图片描述

  • form, 表单
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method:post、get提交方式
    get方式提交:可以在url中看到提交的信息，不安全，高效
    post提交方式：安全，在url中看不到信息，传输大文件
    文本输出框: input type=“text” 所有的input标签都需要name属性
    密码输出框: input type=“password” name=“password”
    提交：input type=“submit”
    重置:input type=“reset”
    在元素网络中header可以看到相关信息
    value:默认初始值
    maxlength:输入的长度限制
    size:文本框的初始宽度
    radio:单选按钮 : 必须给value初始值,且name要相同表示在同一个组
    checkbox:多选框: name也要相同，value也要有初始值
    button: value是按钮的名字，图片也可以变成按钮
    input type=“button”
    type=“image”
    input type=“submit”: 提交 value:给表单赋值
    input type=“reset” : 重置 value:给表单赋值
    input type=“file” name=“files” 上传文件 name一般不用中文，会出现乱码
    input type=“button” value=“上传” name=“upload” 上传按钮

    下拉框和列表框
    下拉框:select name=“列表名称” 中间部分：option value=“选项的值”>中国</option

    在单选或者多选框后加checked，代表默认选择

    文本域：textarea

    name=“textarea” cols=“40” rows=“10”>文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单语法</title>
</head>
<body>

<h1>注册</h1>
<!--form, 表单
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post、get提交方式
   get方式提交:可以在url中看到提交的信息，不安全，高效
   post提交方式：安全，在url中看不到信息，传输大文件
文本输出框: input type="text"  所有的input标签都需要name属性
密码输出框: input type="password" name="password"
提交：input type="submit"
重置:input type="reset"
在元素网络中header可以看到相关信息
value:默认初始值
maxlength:输入的长度限制
size:文本框的初始宽度
radio:单选按钮 : 必须给value初始值,且name要相同表示在同一个组
checkbox:多选框: name也要相同，value也要有初始值
button: value是按钮的名字，图片也可以变成按钮
       input type="button"
       type="image"
input type="submit": 提交  value:给表单赋值
input type="reset" : 重置  value:给表单赋值
input type="file" name="files" 上传文件  name一般不用中文，会出现乱码
<input type="button" value="上传" name="upload"> 上传按钮



下拉框和列表框
下拉框:select name="列表名称" 中间部分：option value="选项的值">中国</option

在单选或者多选框后加checked，代表默认选择

文本域：textarea
    <textarea name="textarea" cols="40" rows="10">文本内容</textarea>



-->

<form action="1.第一个网页.html" method="post">
  <p>名字: <input type="text" name="username" >  </p>
  <p>密码: <input type="password" name="password">  </p>
    <p>性别:
        <input type="radio" value="boy" name="11" checked/>男
        <input type="radio" value="girl" name="11"/>女
    </p>
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox"value="code" name="hobby">代码
        <input type="checkbox"value="chat" name="hobby">聊天
        <input type="checkbox"value="game" name="hobby">游戏
    </p>
    <p>按钮:
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/image/llyy.jpg">-->
    </p>

    <p>下拉框:
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="ruishi">瑞士</option>
            <option value="yindu">印度</option>
        </select>

    </p>

    <!--文本域-->
    <p>反馈:
        <textarea name="textarea" cols="40" rows="10">文本内容</textarea>
    </p>

    <!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

</body>
</html>

搜索框滑块和简单验证

  • 都属于input标签下
  • 邮箱验证
<p>邮箱:
    <input type="email" name="email">
</p>
  • url验证
<p>URL:
    <input type="url" name="url">
</p>
  • 数字验证
<p>商品数量:
    <input type="number" name="num" max="100" min="0" step="1">
</p>
  • 滑块
<p>滑块:
    <input type="range" name="voice" min="0" max="100" step="5">
</p>
  • 搜索框
<p>搜索:
    <input type="search" name="search">
</p>

表单应用

  • value=“admin” readonly ：只读选项

  • disabled：禁用

  • hidden:隐藏 ，比如隐藏默认密码

  • 锁定一个框，点击文字也可以实现：

    • label标签

    • <p>
        <label for="mark">点击</label>
        <input type="text" id="mark">
    </p>

表单验证

  • placeholder:提示信息

    • placeholder="请输入用户名"

  • required:表示元素不能为空，可以用在所有文本框中

  • pattern:正则表达式

    • 正则表达式速查表：https://www.jb51.net/tools/regexsc.htm

    • <p>自定义邮箱:
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

文字也可以实现：**

  • label标签

  • <p>
        <label for="mark">点击</label>
        <input type="text" id="mark">
    </p>

表单验证

  • placeholder:提示信息

    • placeholder="请输入用户名"

  • required:表示元素不能为空，可以用在所有文本框中

  • pattern:正则表达式

    • 正则表达式速查表：https://www.jb51.net/tools/regexsc.htm

    • <p>自定义邮箱:
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>
牛牛的Java学习之旅
关注
专栏目录
C#如何弹出输入框
diaobinfu5905的博客
07-22 1815
在C#中，进行windows窗体应用程序编程的时候，经常需要弹出输入框，输入密码，输入文本之类的。然而，C#中没有直接弹出输入框的语句，MessageBox只能显示一段消息而不能输入。我们需要调用Microsoft.VisualBasic，使用VB中的inputbox,实现弹出输入框的功能。 1、菜单栏，选择【项目】；然后在弹出的菜单中选择【添加引用】 2、弹出“添加引用”的窗...
html中怎么写输入框,HTML文本框参考样式及常见操作技巧大全
weixin_30122219的博客
05-30 7719
在网页设计中，常常要使用 html 文本框来收集一些用户信息或是制作登录页，虽然只是简单的输入框，但是如果加入一些美化设计会使你的页面看起来更加有吸引力，下面就给大家提供了一些 html 文本框的参考样式和常见的 html 操作技巧，希望对你的网页制作有帮助。首先我们先看看一个最简单的文本框是如何实现的？-----------------------------------------------...
HTML创建文本框的三种方式
热门推荐
kt1776133839的博客
08-06 2万+
的初始值必须要放在和
html输出css框,html – 如何使用css @media print打印时从表中删除边框
weixin_42212792的博客
06-27 2364
您可以在CSS3 @media规则中使用：border-bottom: none;要么border: solid white !important;使用border-bottom：none;打印时会影响表格的布局(取决于您是否使用默认值的盒子大小).下面是一个例子：table {/* just an example */border: solid red;border-width: 1px 0 0...
HTML文本框参考样式及常见操作技巧大全
thgj0006的博客
03-18 4088
在网页设计中，常常要使用 html 文本框来收集一些用户信息或是制作登录页，虽然只是简单的输入框，但是如果加入一些美化设计会使你的页面看起来更加有吸引力，下面就给大家提供了一些 html 文本框的参考样式和常见的 html 操作技巧，希望对你的网页制作有帮助。首先我们先看看一个最简单的文本框是如何实现的？W3Cschool文本输入框实例：如上实例所示，其实这个 html 文本框样式非常简单，用到了 css 的伪元素 focus。下面我们一起来重新做一个吧。
（四）html输入框提示和输入选择
CheeseYu的博客
04-14 3326
required的使用： 提交 label的使用： 这里写js代码 姓名：
HTML相关前端知识
nicky_hb的博客
03-02 575
在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。
【前端学习】HTML基础知识
Caarolin的博客
08-23 313
W3School HTML基础知识重点梳理 一、元素和属性 1. 空元素 关于没有关闭标签的空元素，如<br>, <hr>，最好的方法是在开始标签中添加斜杠<br /> 2. 属性引号问题 属性值可以用单引号或双引号，但是如果属性值本身有双引号，那么必须要用单引号 3. 注释： <!-- coments --> 4. <p&...
前端小白-HTML基础知识学习总结
03-23
前端小白-HTML基础知识学习总结
前端项目-medium-editor-custom-html.zip
09-03
"medium-editor-custom-html-master" 通常表示这是Medium Editor的某个定制版本的主目录，"master"分支可能是GitHub上的默认分支，代表了项目的主线代码。 **详细知识点：** 1. **Medium Editor**：Medium Editor...
Log4j—将系统日志输出到控制台和html格式的文件中
03-06
本工程以一个简单的log4j示例演示了log4j的使用方法 本工程编码方式：UTF-8 本工程开发工具：MyEclipse 说明：log4j详细使用方法请参考博客：http://blog.csdn.net/gaohuanjie/article/details/44077551
前端开发知识点-HTML框架-标签
09-18
前端开发知识点-HTML框架-标签
前端分析-202307110006
07-18
但是，由于题目与前端技术领域不相关，因此这里将重点解析文档标题、描述及内容中可能涉及的前端技术相关知识点。以下是针对给定材料进行的详细分析。 ### 前端分析-202307110006 #### 1. 标题和描述的意义 - **...
前端分析-202307110015
最新发布
07-21
尽管如此，我们仍可以从这些题目中提取出一些与前端相关的知识点： 1. **逻辑思维训练**： - 对于前端开发者来说，良好的逻辑思维能力是非常重要的。这些题目可以帮助开发者培养逻辑思维，这对于编写高效、无误的...
c语言输出方框□怎么回事_C语言打印数据的二进制格式原理解析与编程实现
weixin_39553805的博客
11-29 3985
问题引出C语言中，在需要用到16进制数据的时候，可以通过printf函数的%x格式打印数据的16进制形式。在某些位标记、位操作的场合，需要用到2进制格式的数据，但printf函数不能输出2进制格式，虽然可以通过使用itoa或_itoa的方法转为2进制的字符串打印，但显示的长度是不固定的，...
Java 输入输出框 JOptionPane 用法
Hanks软件库
09-16 2万+
用消息对话框显示文本信息 importjavax.swing.JOptionPane; publicclass WelcomeInMessageDialogBox{ JOptionPane.showMessageDialog(null,”welcometo java”, ”DisplayMessage”,JOptionPane.INFORMATION_MESSAGE); }
边框输出
hk121的博客
10-20 306
第二阶段的框框     cv::Mat img_ = cv::imread("00284.jpg");     Size dsize = Size(img_.cols * 1, img_.rows *0.36);     resize(img_, img_, dsize);     for (int i = 0; i     {         //rectangle(img_,
输入输出框架
qq_37357873的博客
10-02 489
输入输出 1.while(scanf(“%d%d”,&amp;amp;n,&amp;amp;q)==2&amp;amp;&amp;amp;n） 可以多次输入两个数字，然后执行循环中的操作，只有当输入0的时候跳出while循环 2.while(getline(cin,line))跳不出循环 stl vector&amp;lt;int&amp;gt; pile[maxn] //每个pile[i]是一个vector...
html文本输入框代码是什么？如何创建html文本输入框
lin123_00的博客
05-25 1万+
何创建html文本输入框？html文本输入框代码是什么？HTML表单是获取用户输入所需的内容。但是首先，你需要制作一个文本框，那么如何创建是一个问题，下面我们来讲一下Windows系统是如何创建html文本输入框。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 一：首先创建一个HTML文件，打开记事本或任何其他纯文本编辑器，在Windows上，您可以通过“开始”菜单访问记事本，位于“附件”，然后是“记事本”。或者，使用Windows键+ R，然后键入记事本并
HTML5前端必备知识点详解
"前端HTML5常用知识点总结" 在前端开发中，HTML5是构建网页的基础，对于初学者来说，掌握其核心知识点至关重要。本篇总结涵盖了HTML5中的主要元素和标签，帮助开发者快速入门。 首先，网页由各种元素组成，包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值