HTML 简单学习

最新推荐文章于 2024-08-14 18:50:50 发布

jiuriya

最新推荐文章于 2024-08-14 18:50:50 发布

阅读量544

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/jiuriya/article/details/122611860

版权

HTML

1 简介

1.1 简介

HTML：

Hyper Test Markup Language（超文本标记语言）

W3C：

World Wide Web Consortium(万维网联盟)

成立于1994年，Web技术领域最权威和具影响力的国际中立技术标准机构

W3C标准包括:

结构化标准语言（HTML ，XML）
表现标准语言（CSS）
行为标准（DOM，ECMAScript）

1.2 我的第一个网页

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



<!DOCTYPE html>
<html lang="en">
<!-- head:标签代表网页头部-->
<head>
    <meta charset="UTF-8">
    <!-- meta:描述性标签， 用来描述我们网站的一些信息-->
    <!-- meta一般用来做SEO-->


    <!-- title:标签代表网页标题-->

    <title>MYFirstHTML </title>
</head>
<body>

Hello ,World
<!-- body:标签代表网页主体-->
</body>
</html>

1.3 标签

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

<!--换行标签-->
12313<br/>
12313<br/>
<!--水平线标签 -->
<hr>

<!--字体样式标签 -->
<strong >粗体：love u</strong>
<em >斜体：love u</em>
<br/>

<!-- 特殊符号：-->
空格 &nbsp;<br/>
空&nbsp;格<br/>
<br/>&gt;
<br/>&lt;
<br/>&copy;版权所有

<!--
 特殊符号：
 &    ;
 
 -->
</body>
</html>

1.4 图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<img src="../resources/image/a1.jpg" alt="头像" width="100" height="200" title="悬浮文字">
<!-- img 学习
src:"图片地址'
相对地址，绝对地址
../  --上一级目录

alt"图片名字"

 -->
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2h7wQ5Ob-1642690442144)(C:\Users\11953\AppData\Roaming\Typora\typora-user-images\image-20220120071002247.png)]

1.5 链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<a name="top">顶端</a>
<!--
 a标签
 href:  必须，表示要跳转到哪个页面
 target:表示窗口在哪里打开
    _blank :在新标签中打开(创建新窗口)
    _self:在自己的页面打开(自己页面打开)

 -->
<a href="MyFirstHTML.html" target="_blank">点击跳转到myfirsthtml</a>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a>
<br>
<p><a href="MyFirstHTML.html">
    <img src="../resources/image/a1.jpg" alt="头像" width="100" height="200" title="悬浮文字">

</a></p><p><a href="MyFirstHTML.html">
    <img src="../resources/image/a1.jpg" alt="头像" width="100" height="200" title="悬浮文字">

</a></p><p><a href="MyFirstHTML.html">
    <img src="../resources/image/a1.jpg" alt="头像" width="100" height="200" title="悬浮文字">

</a></p><p><a href="MyFirstHTML.html">
    <img src="../resources/image/a1.jpg" alt="头像" width="100" height="200" title="悬浮文字">

</a></p><p><a href="MyFirstHTML.html">
    <img src="../resources/image/a1.jpg" alt="头像" width="100" height="200" title="悬浮文字">

</a></p><p><a href="MyFirstHTML.html">
    <img src="../resources/image/a1.jpg" alt="头像" width="100" height="200" title="悬浮文字">


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

 -->


<!--功能性链接
mailto:邮件链接
qq推广：
-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1195349228&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1195349228:51" alt="加我" title="加我"/></a>
<a href="mailto:1195349228@qq.com">点击联系</a>

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

1.6 行内元素和块元素

块元素:

无论内容多少,该元素占一行
(p, h1)

行内元素:

内容撑开宽度,左右都是行内元素的可以在排成一行
(a,strong ,em…)

1.7 列表

列表就是信息资源的一种展示形式它可以使信息结构化条理化,并且以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息

分为

无序列表
有序列表
定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>

<!-- 有序列表 -->
<ol>
    <li>java</li>
    <li>php</li>
    <li>python</li>
    <li>前端</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>php</li>
    <li>python</li>
    <li>前端</li>
</ul>
<!--自定义列表-
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>php</dd>
    <dd>python</dd>
    <dd>前端</dd>

    <dt>位置</dt>
    <dd>西安</dd>
    <dd>新疆</dd>
    
</dl>



</body>
</html>

1.8 表格学习

跨列colspan
跨行rowspan

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kSx8682f-1642690442146)(C:\Users\11953\AppData\Roaming\Typora\typora-user-images\image-20220120112118126.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<table border="1px">
    <tr>
        <td colspan="4">学生成绩</td>
        <!-- 跨列colspan -->
    </tr>
    <tr>
        <!-- 跨行rowspan -->
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>

    </tr>
    <tr>
        <!-- 跨行rowspan -->
        <td rowspan="2">秦疆</td>
        <td>语文 </td>
        <td>100 </td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>

    </tr>
</table>
</body>
</html>

1.9 媒体元素

视频元素：

video

音频元素

audio

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

<audio src="../resources/audio/a1.mp3" controls autoplay> </audio>
</body>
</html>

2 页面结构

2.1 页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或者页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一个区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用
nav	导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<header><h2>网页头部</h2></header>

<section><h2>网页主体</h2></section>

<footer><h2>网页脚部</h2></footer>
</body>
</html>

2.2 iframe 内联框架

<iframe src="path" name="mainFrame"></iframe>

引用页面地址框架识别名

相当于在页面中嵌套另一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<iframe src="//player.bilibili.com/player.html?aid=54171171&bvid=BV1V4411p7EF&cid=94743823&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
-->
<iframe src="https://www.bilibili.com/" frameborder="0" width="1000px" height="800px" name="hello"></iframe>
<a href="https://www.csdn.net/" target="hello">点击跳转</a>

<!--
 iframe内联标签
 src：地址
 w-h: 宽度高度

 -->
</body>
</html>

2.4 表单语法

属性	说明
type	指定元素的类型。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时，指定按钮是否被选中

 checked：默认选中
 disabled: 禁用
 hidden:隐藏
 readonly:只读标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单语法</title>
</head>
<body>
<form method="get" action="MyFirstHTML.html">
    <!-- form表单
   actio： 表单提交的位置，可以是网站，也可以是一个请求处理地址
   method: post ,get 提交方式
get 方式提交： 我们可以在Url中看到我们提交的信息， 不安全，高效
post 方式提交，比较安全，可以 传输大文件
   -->
    <!--规定如何发送 表单数据 get /post               action :表示向何处发送表单数据    -->
    <p>名字 ：<input name="name" type="text" value="狂神好帅"  maxlength="8" size="30 " readonly></p>
    <p>密码 ：<input name="pass" type="password" hidden></p>

    <!--单选框标签
     input type="radio"
     value=单选框的值
     name:表示组
     checked：默认选中
     disabled: 禁用
     hidden:隐藏
     readonly:只读标签

     -->
    <P>性别：
    <input type="radio" value="boy" name="sex" checked>男
    <input type="radio" value="gril" name="sex" disabled>女
    </p>
    <!--多选框
     input type="checkbox"

     -->
    <p>
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="game" name="hobby" checked/>游戏
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="code" 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/a1.jpg" >
    </p>

<!-- 下拉框，列表栏-->
    <p>下拉框：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="india">印度</option>

        </select>

    </p>
    <!-- 文本域 -->
<p>
    反馈:
    <textarea name="textarea" cols="50" rows="10"></textarea>
</p>
    <!-- 文件域
    input type="file" name="files"
    -->
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">

    <p>
        <!--
       邮件验证-->
       邮箱: <input type="email" name="email"/>
    </p>
    <p>
        <!--
       URL 验证-->
       URL: <input type="url" name="url"/>
    </p>
     <p>
        <!--
       URL 验证-->
       数字: <input type="number" name="num" max="100" min="0" step="10"/>
    </p>
    <p>
        <!--
       滑块-->
       滑块: <input type="range"  name="voice"  min="0" max="100" step="2"/>
    </p>
    <p>
        <!--
       搜索框-->
       搜索: <input type="search"  name="search"  />
    </p>
    <p>
       <!-- 增强鼠标可用性
       点文字鼠标可以默认到搜索框上
       -->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">

    </p>

    <p>
    <input type="submit" name="Button" value="提交" />
    <input type="reset" name="Reset" value="清空表单" />
    </p>
    <!--
    文本输入框 ： input type="text"
    密码输入框 ： input type="password"

     -->
</form>
</body>
</html>