HTML学习

最新推荐文章于 2023-12-04 20:15:26 发布

一起找点乐子

最新推荐文章于 2023-12-04 20:15:26 发布

阅读量256

点赞数

分类专栏： Study 文章标签： html

本文链接：https://blog.csdn.net/qq_41861598/article/details/113716098

版权

Study 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

P2网页基本信息

<!--DOCTYPE：告诉浏览器，我们使用什么规范-->
<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部-->
<head>
<!--  meta描述性标签,它用来描述我们网站的一些信息  -->
<!-- <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。-->
<!--   meta一般来做SEO -->
    <meta charset="UTF-8">
    <meta name = "keywords" content = "山海Java">
    <meta name = "description" content=" 学习Java的地方";>

<!--  网页标题  -->
    <title>学习乐园</title>
</head>

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

P3网页基本标签

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

<p>两只老虎    两只老虎</p>

<p>跑得快       跑得快</p>

<p>一只没有耳朵     一只没有尾巴</p>

<p>真奇怪      真奇怪</p>

<p>两只老虎     两只老虎</p>

<p>跑得快        跑得快</p>
<p>一只没有耳朵    一只没有尾巴</p>

换行标签

两只老虎    两只老虎<br/>

跑得快       跑得快<br/>

一只没有耳朵     一只没有尾巴<br/>

真奇怪      真奇怪<br/>

两只老虎     两只老虎<br/>

跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>

水平线标签

<hr/>

字体段落样式标签

粗体：<strong>I LOVE YOU</strong>
斜体：<em>I LOVE YOU</em>

注释和特殊符号

注释：<!-- -->
空格： &nbsp;

P4图像标签

<!--
        src:图像地址
                相对地址(推荐使用),绝对地址
                ../回退上一级目录
        alt:图像名字
-->
<img src="../resources/捕获.jpg" alt="本人免冠照" title = "免冠照" width="22" height="104">

P5超链接标签及应用

页面间链接

在这里插入图片描述

<!--a标签
    href:要跳转的地址
    target:在什么地方打开链接
    <a>中间的内容是对按钮的描述(可以是文字也可以是图片)</a>
-->
<a href="第一个HTML.html" target="_blank">点击我跳转到页面1</a>
<a href="https://www.baidu.com/" target="_self">点击我跳转到百度</a>

<br/>
<a href="https://www.baidu.com/" target="_self">
    <img src="../resources/捕获.jpg" alt="本人免冠照" title = "免冠照" width="104" height="104">
</a>

锚链接

<!--锚链接
    1.需要一个锚标记
    2.跳转到标记
-->
Case1:
第二个HTML跳转到第一个HTML底部
第一个HTML
<body>
<a name="down">第一个页面底部</a>
</body>
第二个HTML
<body>
<a href = "第一个HTML.html#down">跳转到第一个页面底部</a>
</body>

Case2:
<body>
<a name = "top">顶部</a>
 xxxxxxxxxxxxxxxxxxxxxxxxx   
 xxxxxxxxxxxxxxxxxxxxxxxxx   
 xxxxxxxxxxxxxxxxxxxxxxxxx   
<a href = "第一个HTML.html#top">跳转到页面顶部</a>
</body>

功能性链接

<!--功能性链接
1.邮箱链接
	mailto:xxxx
	QQ链接:

-->

<body>
    
<a href="mailto:370971591@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="点击此处加我为好友" title="点击此处加我为好友"/></a>

</body>

自定义链接

详细结果看P11

<!-- 
	name --内连接的名字	
-->
<iframe src = "" 
        name="hello"
        border = "0"
        height = "1000"
        width = "800"
        >   
</iframe>
<!-- 点击打开新世界，会在内连接的网页中打开bilibili-->
<a href = "https://www.bilibili.com/" target="hello">打开新世界</a>

P6块元素和行内元素

块元素

无论内容多少，该元素独占一行

如：p、h1-h6

行内元素

内容撑开宽度，左右都是行内元素

如：a、strong、em

P7列表标签

什么是列表？

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

列表的分类

无序列表

有序列表

定义列表

<!-- 有序标签应用范围：试卷、问答-->
<ol>

    <li>我看着天真的我自己，出现在没有我的故事里。</li>
    <li>我看着天真的我自己，出现在没有我的故事里。</li>
    <li>等待着我的回应，一个为何至此的原因。</li>
    <li>他明白，他明白。</li>
    <li>我给不起，于是转身向山里走去。</li>
    <li>他明白，他明白。</li>
</ol>

<!-- 无序标签应用范围：导航栏、侧边栏-->
<ul>

    <li>我看着天真的我自己，出现在没有我的故事里。</li>
    <li>我看着天真的我自己，出现在没有我的故事里。</li>
    <li>等待着我的回应，一个为何至此的原因。</li>
    <li>他明白，他明白。</li>
    <li>我给不起，于是转身向山里走去。</li>
    <li>他明白，他明白。</li>
</ul>

<!--自定义标签
    dl:标签
    dt:列表名称
    dd:列表内容
-->
<dl>
    <dt>山海歌词</dt>
    <dd>我看着天真的我自己，出现在没有我的故事里。</dd>
    <dd>等待着我的回应，一个为何至此的原因。</dd>
    <dd>他明白，他明白。</dd>
</dl>

在这里插入图片描述

P8表格标签

<!--表格标签-->
<table>
	<!-- 第一行 tr表示行-->
    <tr>
        <!-- 有三列 td表示列-->
         <td>1-1</td>  
         <td>1-2</td>
         <td>1-3</td>
    </tr>
	<!-- 第二行-->
    <tr>
        <!-- 有三列-->
         <td>2-1</td>
         <td>2-2</td>
         <td>2-3</td>
    </tr>
	<!-- 第三行-->
    <tr>
        <!-- 有三列-->
         <td>3-1</td>
         <td>3-2</td>
         <td>3-3</td>
    </tr>
</table>

结果：

在这里插入图片描述

<table border="1px"> 添加1像素的边界

结果：

在这里插入图片描述

<!--表格标签-->
<table border="1px">
    <!-- 第一行-->
    <tr>
        <!-- 有三列-->
        <!--td colspan="n" 占n列 -->
        <td colspan="3">1-1</td>
        
        <!--td rowspan="n" 占n行 -->
        <td rowspan="3">1-2</td>
        <td>1-3</td>
    </tr>
    <!-- 第二行-->
    <tr>
        <!-- 有三列-->
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <!-- 第三行-->
    <tr>
        <!-- 有三列-->
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

结果：

在这里插入图片描述

P9媒体元素

视频元素：video

音频元素：audio

<!-- 
	src 音频/视频地址
	controls 控制条
	autoplay 自动播放
-->

<!--音乐标签-->
<audio src="../resources/audio/music.mp3" controls autoplay>
</audio>

<!--视频标签-->
<video src="../resources/vedio/黄.mp4" controls autoplay>
</video>

P10页面结构分析

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

<body>
    
<header> <h1>网页头部</h1> </header>

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

<footer><h1>网页脚部</h1></footer>

</body>

P11iframe内联框架

在这里插入图片描述

<!-- iframe内联框架
	src : 引用页面地址
	height、 width显示的长和宽
-->

<iframe src = "https://baidu.com" 
        border = "0"
        height="1000"
        width="800"
        >
</iframe>

结果：
在这里插入图片描述

<!-- 
	name --内连接的名字	
-->
<iframe src = "" 
        name="hello"
        border = "0"
        height = "1000"
        width = "800"
        >   
</iframe>
<!-- 点击打开新世界，会在内连接的网页中打开bilibili-->
<a href = "https://www.bilibili.com/" target="hello">打开新世界</a>

结果：

在这里插入图片描述

P12初识表单post和get提交

<!--表单form
action： 表单提交的位置，可以是网站也可以是一个请求处理地址
method： get/post 提交方式
	get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
	post:比较安全，传输大文件

-->
<form action = "https:baidu.com" method="get">
    <!--表单元素信息-->
    <!-- 文本输入框：input type="text"-->
    <p>用户名：<input type = "text" name = "username"></p>
    
     <!-- 文本输入框：input type="text"-->
    <p>密码：<input type = "password" name = "password"></p>
    
    <p><input type ="submit">
        <input type ="reset">
	</p>
</form>

结果：
在这里插入图片描述

P13文本框和单选框

属性	说明
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时，指定按钮是否被选中

<form action = "https://baidu.com" method="post">
    <!-- 文本输入框： input type = "text"
	value ="山海"	默认初始值
	maxlength="8"	最长能写几个字符
	size="10"	文本框的长度
	-->
  用户名：<input type= "text" value="山海" maxlength="8" size="10" name="username"> 
  密码：<input type= "password" name="password"> 
   
    <!--单选框标签
		input type="radio"
		value:单选框的值
		name:表示组（组名不一样才是单选 组名一样就是多选了，不行）
	-->
    <p>性别
        <input type="radio" value="male" name = "sex">男
        <input type="radio" value="female" name = "sex">女
    </p>
    <p>
        <input type = "submit">
        <input type = "reset">
    </p>       
</form>

结果：
在这里插入图片描述

P14按钮和多选框

<form action = "https://w.baidu.com" method = "post">
    <!--多选框	
	type = "checkbox"	
	-->
    <p>
    爱好：
    <input type="checkbox" value="game" name="hobby">游戏
    <input type="checkbox" value="music" name="hobby">音乐
    <input type="checkbox" value="sport" name="hobby">运动
    <input type="checkbox" value="study" name="hobby">学习
    </p>
    
    <!--按钮
		input type = "button" 普通按钮
		input type = "image"  图像按钮
		input type = "submit" 提交按钮
		input type = "reset"  重置
	-->
    <p>按钮：
        <input type = "button" name = "btn1" value="点击click">
        <input type = "image" src = "../resources/点击手势.jpg" height="10" width="10" > 
    </p>
    	
    <p>
        <!--这里把默认的提交和重置改为了山和海-->
        <input type ="submit" value="山">
         <input type ="reset" value="海">
    </p>
    
</form>

结果：

在这里插入图片描述

P15列表框文本域和文件域

<!--下拉/列表框 
	selected 默认选择
-->
<select name = "列表名称">
  <option value="cn" >中国</option>
     <option value="us" selected >美国</option>
     <option value="jp" >日本</option>
     <option value="kr" >韩国</option>
</select>

<!-- 文本域-->
<textarea name="文本域" rows="10" cols="10">
文本内容
</textarea>

<!-- 文件域-->
<input type="file" name ="files">

结果：

在这里插入图片描述

P16搜索框滑块和简单验证

<form>
    <!--邮箱验证-->
    <p> 邮箱：
    	<input type = "email" name = "email">
    </p>
    
    <!--URL验证-->
    <p> 地址：
    	<input type = "url" name = "url">
    </p>
    
     <!--数字验证
		min 最小值
		max 最大值
		step 步长
	-->
    <p> 下单商品数量：
    	<input type = "number" name = "num" min="0" max = "100" step = "1">
    </p>
     <!--搜索框-->
    <p> 搜索栏：
    	<input type = "search" name = "search">
    </p>
    
     <!--滑块-->
    <p> 音量：
    	<input type = "range" name = "voice" min="0" max = "100" step="1">
    </p>
</form>

结果：

在这里插入图片描述

P17表单的应用

隐藏域：hidden

只读：readonly

禁用：disabled

<form action="https://baidu.com" method = "post">
   <!-- 将用户名默认为山海，并且不能修改-->
    <p>用户名：
    	<input type = "text" name = "username" value = "山海" readonly>
    </p> 
    
    <!-- 将密码框隐藏-->
    <p>密码：
    	<input type = "password" name = "pwd" hidden>
    </p> 
    
    <!--手机号 -->
    <p>手机号：
    	<input type = "text" name = "phone" id = "mark">
    </p> 
    
    <!--性别男 不可选 禁用 -->
    <p>性别：
    	<input type = "radio" name = "sex" value="male" disabled>男
        <input type = "radio" name = "sex" value="female">女
    </p> 
    
    <!--点击此处 会发现手机号的框亮了 -->
    <p>
    <label for="mark">点击我试试</label>    
    </p>
    
    
    <p><input type="submit">
        <input type="reset">
    </p>
    
    
</form>

结果：

在这里插入图片描述

P18表单初级验证

常用方式

placeholder 提示信息

required 非空判断

pattern 正则表达式

<form action = "https://www.baidu.com" method = "post">
    <!-- placeholder提示-->
    <p>用户名：
    	<input type = "text" name="username" placeholder="请输入用户名"> 
    </p>
     <!-- required 必须有值-->
    <p>密码：
    	<input type = "password" name="pwd" required> 
    </p>
    <!-- pattern 正则表达式 自定义邮箱-->
    <p>邮箱：
   	 <input type = "text" name="diyemail" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">     
    </p>
    
     <p><input type="submit">
        <input type="reset">
    </p> 
</form>