HTML的学习

最新推荐文章于 2022-08-28 00:08:32 发布
最新推荐文章于 2022-08-28 00:08:32 发布
阅读量207 收藏
点赞数
分类专栏： java学习笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BigBigOld/article/details/115669780
版权

HTML的学习

1. W3C标准

World Wide Web Consortium(万维网联盟)
万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C标准包括

  1. 结构化标准语言(HTML，XML)
  2. 表现标准语言(CSS)
  3. 行为标准(DOM，ECMAScript)

2. 第一段HTML

在这里插入图片描述在这里插入图片描述

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

<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签用来描述我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="跟着狂神学Java">
    <meta name="description" content="好好学习天天向上">
    <!--title网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主题-->
<body>
    Hello，World！
</body>
</html>

<!-- 注释的快捷键：ctrl+/ -->
  • 效果如下
    在这里插入图片描述

3. 网页的基本标签

  • 标题标签

  • 段落标签

  • 换行标签

  • 水平线标签

  • 字体样式标签

  • 注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>两只老虎，两只老虎</p>
<p>跑得快，跑得快</p>
<p>一只没有眼睛，一只没有尾巴</p>
<p>真奇怪！真奇怪！</p>
<!--换行标签-->
两只老虎，两只老虎 <br/>
跑得快，跑得快<br/>
一只没有眼睛，一只没有尾巴<br/>
真奇怪！真奇怪！<br/>
<!--水平线标签-->
<hr/>
<!--粗体，斜体-->
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<br/>
<!--特殊符号-->
空           格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
大于号:&gt;
<br/>
小于号:&lt;
<br/>
版权符号:&copy;版权所有cyj
</body>
</html>
  • 效果如下
    在这里插入图片描述

4. 图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src : 图片地址(必填)
    相对地址，绝对地址
    ../ ->上一级目录
alt : 图片名字(必填)
title ： 鼠标放在图片上显示的文字
-->
<img src="../resources/image/1.jpg" alt="Lisa" title="悬停文字" width="400" height="275">
</body>
</html>
  • 效果如下
    在这里插入图片描述

5. 链接标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<br/>
<a href="链接标签.html#down">跳转至底部</a>
<br/>
<!--a标签
href : 必填 ，表示要跳转到那个页面
target : 表示窗口在哪里打开
    _blank  在新标签页中打开
    _self   在自己的网页中打开
    
-->
<a href="我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<br/>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<a href="我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="Lisa" title="悬停文字" width="400" height="275">
</a>
<!--锚标签-->
<br/>
<a href="链接标签.html#top">回到顶部</a>
<!--可以从别的页面跳转到这里的标签处-->
<br/>
<!--功能性链接

邮件链接 : mailto
QQ链接 : qq推广
-->
<a href="mailto:1654972956@qq.com">点击联系我</a>
<br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1654972956&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1654972956:53" alt="加我qq领取小电影" title="加我qq领取小电影"/></a>

<br/>
<a name="down">底部</a>
</body>
</html>
  • 效果如下：
    在这里插入图片描述

6. 行内元素和块元素

在这里插入图片描述

7. 列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围 : 考试，问答
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>
<!--分割线-->
<hr/>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>
<hr/>
<!--自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容
应用范围 : 公司网页底部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
    <dd>位置</dd>
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>温州</dd>
</dl>

</body>
</html>
  • 效果如下
    在这里插入图片描述

8. 表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格 Table
行 : tr
列 : td
-->
<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>
  • 效果如下：
    在这里插入图片描述

9. 媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--src : 资源路径
controls : 控制条
autoplay : 自动播放
-->
<video src="../resources/video/1.MP4" controls autoplay loop></video>
<audio src="../resources/audio/夜曲.mp3" controls></audio>
</body>
</html>

在这里插入图片描述

10. 页面结构分析

在这里插入图片描述

11. iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习</title>
</head>
<body>
<!--iframe内联框架
src : 地址
width height : 宽度高度 
-->
<iframe src="https://www.bilibili.com/" name="hello" frameborder="0" 
width="1000px" height="800px"></iframe>
</body>
</html>
  • 效果如下
    在这里插入图片描述

12. 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--表单form
action : 表单提交的位置
method : post和get 是表单的提交方式
    get方式提交:我们可以在url中看到我们提交的信息，不安全，但是高效
    post方式提交:比较安全，传输大文件
-->
<form action="我的第一个网页.html" method="get">

    <!--文本输入框： input type="text" -->
    <p>名字: <input type="text" name="username"></p>
    <!--密码框 ： input type="password" -->
    <p>密码: <input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">

</form>
</body>
</html>
  • 效果如下：
    在这里插入图片描述
    get方式登录：
    在这里插入图片描述
    post方式登录：
    在这里插入图片描述

13. 文本框和单选框

在这里插入图片描述

    <p>性别:
        <input type="radio"value="boy" name="sex">男
        <input type="radio"value="girl" name="sex">女
    </p>
  • 效果如下
    在这里插入图片描述

14. 按钮和多选框

    <!--多选框-->
    <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>
    <!--按钮
    input type="button"     普通按钮
    input type="image"      图像按钮
    input type="submit"     提交按钮
    input type="reset"      重置
    -->
    <p>
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resources/image/1.jpg">
    </p>

</form>
</body>
</html>
  • 效果如下：
    在这里插入图片描述

15. 列表文本域和文件域

    <!--下拉框 ， 列表框-->
    <p>国家:
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="American">美国</option>
            <option value="Switzerland">瑞士</option>
            <option value="South Korea" selected>韩国</option>
        </select>
    </p>
    <!--文本域
            cols="50" row="10"
    -->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="10">请输入文本内容</textarea>
    </p>

    <!--文件域
    input type="file"   name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
  • 效果如下:
    在这里插入图片描述

16. 搜索框滑块和简单验证

    <!--邮件验证-->
    <p>邮件:
        <input type="email" name="email">
    </p>
    <!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>
    <!--数字-->
    <p>商品数量:
        <input type="number" name="num" max="1000" min="1" step="10">
    </p>
    <!--数字-->
    <p>商品数量:
        <input type="number" name="num" max="1000" min="1" step="10">
    </p>
    <!--滑块
    input type="number"
    -->
    <p>音量:
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>
    <!--搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>
  • 效果如下:
    在这里插入图片描述

17. 表的简单应用

  • 禁用 disabled
  • 只读 readonly
  • 隐藏 hidden

18. 表单的初级验证

  • placeholder 提示信息(只能用于文本框中)
<p>名字: <input type="text" name="username" placeholder="请输入用户名"></p>

在这里插入图片描述

  • required 非空判断(只能用于文本框中)
    使文本框不能为空
  • pattern 正则表达式
    常用的正则表达式网址：
    https://www.jb51.net/tools/regexsc.htm

12-1代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--表单form
action : 表单提交的位置
method : post和get 是表单的提交方式
    get方式提交:我们可以在url中看到我们提交的信息，不安全，但是高效
    post方式提交:比较安全，传输大文件
-->
<form action="我的第一个网页.html" method="get">

    <!--文本输入框:      input type="text"
    value="我是cyj":     默认初始值
    maxlength="8":      最长能写几个字符
    size="30":          文本框的长度
    checked:            默认值
    -->
    <p>名字: <input type="text" name="username" placeholder="请输入用户名"></p>
    <!--密码框 ： input type="password" -->
    <p>密码: <input type="password" name="pwd"></p>
    <p>性别:
        <input type="radio"value="boy" name="sex" checked>男
        <input type="radio"value="girl" name="sex">女
    </p>
    <!--多选框checkbox-->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--按钮
    input type="button"     普通按钮
    input type="image"      图像按钮
    input type="submit"     提交按钮
    input type="reset"      重置
    -->
    <p>按钮:
        <input type="button" name="btn1" value="点击变长">
        <!--<input type="image" src="../resources/image/1.jpg">-->
    </p>
    <!--下拉框 ， 列表框-->
    <p>国家:
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="American">美国</option>
            <option value="Switzerland">瑞士</option>
            <option value="South Korea" selected>韩国</option>
        </select>
    </p>
    <!--文本域
            cols="50" row="10"
    -->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="10">请输入文本内容</textarea>
    </p>

    <!--文件域
    input type="file"   name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <!--邮件验证-->
    <p>邮件:
        <input type="email" name="email">
    </p>
    <!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>
    <!--数字-->
    <p>商品数量:
        <input type="number" name="num" max="1000" min="1" step="10">
    </p>
    <!--数字-->
    <p>商品数量:
        <input type="number" name="num" max="1000" min="1" step="10">
    </p>
    <!--滑块
    input type="number"
    -->
    <p>音量:
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>
    <!--搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>
    <!--增强鼠标的可用性
    点击label选中text框
    -->
    <p>
        <label for="mark">点我点我</label>
        <input type="text" id="mark">
    </p>
    <!--正则表达式
    常用的正则表达式网址:
    https://www.jb51.net/tools/regexsc.htm
    -->
    <p>自定义邮箱:
        <input type="text" name="diyname" patten="/^([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>

    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>
</html>

19. 总结

在这里插入图片描述

沉迷学习的小陈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html 学习教程.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML 学习记录.zip
最新发布
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
Html常用标签
weixin_47414034的博客
08-28 641
traget参数等于_blank就是在新标签页中打开，等于_self就是在当标签页中打开。table标签是表格标签，tr（table row)是行标签,td是列标签。点击一张图片跳转到另一个网页（将img标签嵌套进href标签里面）锚链接：首先需要一个锚标记，然后点击这个锚链接就可以跳转到锚标记。（1）标题标签：以及标签字体最大，一般只会用到前三级标签。alt表示如果没有这张图片（找不到图片）返回什么文字。但是注意，每一行之间非常紧凑，（4）粗体标签和斜体标签。（6）链接标签 a标签。...
html的表格
weixin_45743513的博客
03-10 246
表格 表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 * 创建一个表格 ``**`html row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 ** ``` 在浏览器显示如下： row 1, cell 1 row 1, cell 2 row 2, ce
html如何让row并列,如何在HTML表格中使用colspan和rowpan？
weixin_35682426的博客
06-23 1030
If you're confused how table layouts work, they basically start at x=0, y=0 and work their way across. Let's explain with graphics, because they're so much fun!When you start a table, you make a grid....
html表格详解
巴萨，足球的艺术
07-27 1523
html表格详解 2010-08-28 17:49HTML表格用表示。一个表格可以分成很多行(row)，用表示；每行又可以分成很多单元格(cell)，用表示。这三个Tag是创建表格最常用的Tag。 两行(Row)三列(Column)的表格100200300400500600bor
HTML 表格
木晓的博客
12-16 149
你可以使用 HTML 创建表格。 表格 表格由 <table> 标签来定义。每个表格均有若干行 （由 <tr> 标签定义） ，每行被分割为若干单元格 （由 <td> 标签定义 ）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 <table border="1"...
css、html 学习.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML学习
02-25
HTML学习
html学习
02-17
html学习
浅谈HTML几种布局方式
同是天涯程序猿
06-27 9325
布局是前端比较基础但是也很重要的部分，过去传统的布局方案一般是通过基于盒子模型： 然后配合display、position或float等属性进行布局。这种布局方式使用和理解起来是相对简单，但是我认为布局更复杂的布局场景和维护起来会比较困难。 本文总结几种布局方式供参考：Flex 弹性布局、Grid网格布局和多列布局。没有适用所有场景的布局，只有合适的布局，在实际应用中多种布局方式灵活使用才能达到更好的效果。 1. Flex弹性布局 概念 Flex布局指弹性布局，是一种一维的布局方式，提供了对子元素的空间分
html中row位置居中,rownumber
weixin_34379309的博客
06-04 631
sql里的ROW_NUMBER() OVER是啥意思?ROW_NUMBER() OVER是oracle数据库的分析函数，会在数据表生成一个排序列。 语法：ROW_NUMBER ( ) OVER( [ PAITION BY value_expression , ... [ n ] ]order_by_clause ) 参数：PAITION BY value_expression 将 FROM 子句生...
html-判断row中xx属性是否存在及取值
柠檬加冰
05-24 3060
if (row.getAttribute("custHomePhone") == null) var custHomePhone = '未填写'; else var custHomePhone = decodeCellValue(row.attributes["custHomePhone"].value);getAttribute：使用row的getAttribute方法
html中row位置居中,如何快速找到html和row text对应的位置？
weixin_36289292的博客
06-04 427
之前想过这个需求，这次看到这个题目才正式想了一下。这个思路可能不大成熟，希望一起测试和改进。const ori = 'I want to eat hamburger to span on a span thing!';let raw;const cheerio = require('cheerio');let $ = cheerio.load(ori);raw = $.text();let get...
html row 设置无法点击,foreach（$行为$ row）不能添加html标签
weixin_29790771的博客
07-17 232
以下从this question现在我需要风格的输出只发现PHP不喜欢我的标签的方式我也试图封装它在"和.或但仍然没有工作。List All Customers from Customer TableidInitalFirst NameLast NameMobileLandlineEmailAddressPost Codeforeach ($rows as $row) {?>它不起作用，显示...
html rows函数,Excel Row函数和Rows函数的使用方法，含Row(A:A)与Row(1:1)实例
weixin_31191387的博客
06-16 1914
在 Excel 中，Row函数用于返回单元格的行号，Rows函数用于返回数组或引用单元格的行数。若是Row函数省略参数，默认返回公式所在单元格的行号；Rows函数不能省略参数。Rows函数常与Indirect函数、Index函数、If函数、Match函数、SumProduct函数、Mod函数组合使用。如下是 Excel Row函数和Rows函数的使用方法，共列举有5个实例，包含Row(A:A)、R...
html语言中表格由什么组成,HTML中表格相关的知识
weixin_42360703的博客
05-31 200
标签定义HTML表格。简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。本文就来为大家介绍一下html中表格相关的知识，希望对大家有一定的帮助。标签中比较少见的属性和子标签：summary 属性：用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。bordercolor 属性：用来设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。(不推荐使用border...
html——使用bootstrap的栅格布局，用row后出现横向滚动条
知北行的博客
04-17 1171
原因：row默认有：margin-left:-15px; margin-right:-15px 解决办法：row所在div的外层需要包裹 container或者container-fluid(通常使用该类)的div，即在row外面创建一个类为container或者container-fluid的 div标签 container与container-fluid的区别： 1、container-fl...
HTML学习手册网页
12-28
以下是一个HTML学习手册网页的例子： ```html <!DOCTYPE html> <html> <title>HTML学习手册 <h1>HTML学习手册 内容概要 <li>HTML介绍 <li>HTML元素 <li>HTML基本标签 <li>HTML格式 <li>HTML实体 <li>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值