HTML基础

最新推荐文章于 2024-05-15 21:37:17 发布

想学好java 的小白

最新推荐文章于 2024-05-15 21:37:17 发布

阅读量210

点赞数

分类专栏：学习日记文章标签： html 前端 css

本文链接：https://blog.csdn.net/xiaoxiaobaie/article/details/122441467

版权

学习日记专栏收录该内容

82 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML的基础知识，从初始HTML开始，涵盖了网页的基本标签、图像、链接、元素类型、列表、表格、媒体元素、页面结构分析以及表单的初步使用，包括不同类型的表单元素和验证方法。

摘要由CSDN通过智能技术生成

初始HTML

HTML
- Hyper Text Markup Language(超文本标记语言)
W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年,Web技术领域最权威和最具影响力的国际中立性技术标准机构
W3C标准包括
- 结构化标准语言(HTML,XML)
- 表现标准语言(CSS)
- 行为标准(DOM,ECMAScript)
等成对的标签,分别叫**开放标签**和**闭合标签**,
单独呈现的标签(空元素),如

;意为用/来关闭空元素

网页基本信息

<!-- DOCTYPE : 告诉浏览器,我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head 标签 代表网页头部-->
<head>
<!-- meta 描述性标签 用来描述网站的一血信息   -->
    <meta charset="UTF-8">
    <meta name="zhangwords" content="世杰学java">
    <meta name="description" content="自学java">

<!--  title 标签代表网页标题  -->
    <title>hello world</title>

</head>
<!-- body 标签代表网页主体-->
<body>

Hello World

</body>
</html>

网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

<!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>
<p>   两只老虎，     跑得快，</p>


<!--水平线标签-->
<hr/>


<!--换行标签-->
贝瓦儿歌  两只老虎，
   两只老虎，     跑得快，<br/>
  两只老虎，     跑得快，<br/>
  两只老虎，     跑得快，<br/>
  两只老虎，     跑得快，<br/>

<!--粗体-->
<h1>字体样式标签</h1>

粗体 :  <strong> i love you </strong>
斜体 :  <em>i love you</em>

<br/>
<!--特殊符号-->
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:
&gt;
&lt;
&copy;

<!--
特殊符号记忆方式
查百度  
-->

</body>
</html>

图像标签

常见的图片格式
- JPG
- GIF
- PNG
- BMP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img 标签学习
src:图片地址(必填)
    相对地址(推荐使用),绝对地址
    ../上一级目录
    alt : 图片名字(必填)
-->
<img src="../resources/image/下载.jpg" alt="一个头像" title="悬停文字"width="100"height="100">

</body>
</html>

链接标签

文本超链接
图像超链接

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



<!--a标签
href: 必填,表示要跳转到那个页面

-->
<a href="1.我的第一个网页.html"target="_blank">点击我跳转到页面</a>
<a href="https://www.baidu.com"target="_self">点击我跳转到页面</a>


<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>


<!--功能性别签
邮件链接:mailto
qq链接:
-->
<a href="mailto:2315283764@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::52" alt="你好,加我有小电影领取" title="你好,加我有小电影领取"/></a>


</body>
</html>

块元素和行内元素

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

列表标签

什么是列表
- 列表就是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息
列表的分类
- 无序列表
- 有序列表
- 定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Pyyhon</li>
    <li>运维</li>
    <li>前端</li>
    <li>c++</li>
</ol>

<hr>
<!--无序列表
应用范围:导航,侧边栏
-->
<ul>
    <li>Java</li>
    <li>Pyyhon</li>
    <li>运维</li>
    <li>前端</li>
    <li>c++</li>
</ul>
<!--自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容

公司网站底部
-->
<dl>
    <dt>Java</dt>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>学科</dd>
    <dd>位置</dd>
    <dd></dd>

    <dt>位置</dt>
    <dd>北京</dd>
    <dd>山西</dd>
</dl>

</body>
</html>

表格元素

为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

<!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>
<!--        <td>1-2</td>-->
<!--        <td>1-3</td>-->
<!--        <td>1-4</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
音频元素
- audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!-- 音频和视频
src :资源路径
controls : 控制条
autoplay : 自动播放
-->
<video src="" controls autoplay></video>

<audio src="../resources/audio/xxx.m4a"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 内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联标签</title>
</head>
<body>

<!--iframe : 内联框架
src : 地址
w-h : 宽度高度
-->
<iframe src=""name="hello" frameborder="0" width="1000" height="800"></iframe>

<a href="https://blog.kuangstudy.com" target="hello">点击跳转</a>

<!--<iframe src="//player.bilibili.com/player.html?aid=337687297&bvid=BV1gR4y137p5&cid=470917662&page=1" -->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->

</body>
</html>

初识表单post和get提交

<!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="1.我的第一个网页.html"method="post">
    <!--文本输入框:<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">
    </p>
</form>


</body>
</html>

文本框和单选框按钮和多选框

tyep:指定元素的类型:text,password,checkbox,radio,submit,reset,file,hidden,image和button,默认为text
name:指定表单元素的名称
value:元素的初始值,type为radio时必须指定一个值
size:指定表单元素的初始宽度,当type为text活password时,表单元素的大小以字符为单位,对于其他类型,宽度以像素为单位
maxlength:type为text或password时,输入的最大字符数
checked:type为radio或checkbox时,指定按钮是否是被选中

<!--
input type="radio"
 value : 单选框的值
 name : 表示组
-->
    <p>性别:
        <input type="radio" value="boy"name="sex"/>男
        <input type="radio" value="girl"name="sex"/>女
    </p>

<!--    多选框
-->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="game" name="hobby">游戏

    </p>

<!--    按钮
-->
    <p>按钮:
        <input type="button"name="btn1"value="点击变长">
        <input type="image"src="../resources/image/下载.jpg"height="100"width="100">

    </p>

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


</body>
</html>

列表框文本域和文件域

<!--
下拉框
-->
    <p>国家:
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="USA">美国</option>
            <option value="eth"selected>瑞士</option>
            <option value="asan">丹麦</option>
        </select>

    </p>

<!--    文本域
-->
    <p>意见:
        <textarea name="textarea"  cols="30" rows="10">

        </textarea>
    </p>
    
<!--    文件域
-->
    <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="number"max="100"min="0"step="1">

    </p>

<!--    滑块
-->
    <p>音量:
        <input type="range"name="voice" min="0"max="100"step="2">
    </p>


<!--    搜索
-->
    <p>搜索:
        <input type="search"name="search">
    </p>

表单的应用

隐藏域 : hidden
只读 : readonly
禁用 : disabled

<!--    增强鼠标可用性
-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text"id="mark">
    </p>

表单初级验证

常用方式
- placeholder :提示信息
- required : 非空判断
- pattren : 正则表达式