小白艰苦学习之路（记录学习历程——HTML篇）Day8

于 2021-08-13 16:49:47 发布
阅读量127 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TinkerHua/article/details/119677770
版权

注：Day7是Java简单算法练习，就不放上来啦。我更改了一下学习路线，所以以后的博客内容将会是HTML和Java的穿插学习！大家一起加油哦！

Day8（HTML基础）

初始HTML

什么是HTML

在这里插入图片描述

HTML发展史

在这里插入图片描述

HTML5的优势

在这里插入图片描述

W3C标准

在这里插入图片描述

常见的IDE

在这里插入图片描述

这里我用的是Hbuilde X

HTML的基本结构

在这里插入图片描述

网页基本信息

  • DOCTYPE声明：告诉浏览器，我们要使用什么规范
<!DOCTYPE html>

  • - **<title>标签**

  • - **<meta>标签**
基本标签 
<!-- DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html>
	<!-- head标签代表网页头部 -->
	<head>
		<!-- meta表属性标签，用来描述我们网站的一些信息 -->
		<!-- meta一般用来做SEO -->
		<meta charset="utf-8" />
		<meta name="keywords" content="勇敢牛牛，不怕困难" />
		<meta name="description" content="来这个地方可以学习。"/>
		<!-- title网页标题 -->
		<title>我的第一个网页</title>
	</head>
	<!-- body台标网页主体 -->
	<body>
		Hello World!
	</body>
</html>

网页的基本标签

  • - 标题标签<h></h>
- 段落标签<p></p>
- 换行标签<br/>
- 水平线标签<hr/>
- 字体样式标签
  - 粗体：<b></b>
  - 斜体：<i></i>
  - 下划线：<u></u>

  • 注释和特殊符号

    - 空格：《&nbsp;》
- 大于：&gt;
- 小于：&lt;
- 版权所有：&copy;

图像标签

在这里插入图片描述

src：图片地址
相对地址（推荐使用），绝对地址
…/ 上一级目录

超链接标签及使用

链接标签

在这里插入图片描述

超链接

  • 页面间链接

    • 从一个页面链接到另一个页面 target:"_black"
    • 从一个页面自身链接到另一个页面 target:"_self"

  • 锚链接

    • 举例：用顶部进行标记；然后使用顶部进行跳转使用

  • 功能性链接

    • 邮箱链接：

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

行内元素和块元素

  • 块元素（块标签）
    • 无论内容多少，该元素独占一行
    • （p、h1-h6）
  • 行内元素（行标签）
    • 内容撑开宽度，左右欧式行内元素的可以排在一行
    • （a.b.i…）

列表标签

  • 什么是列表

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

  • 列表的分类

    - 无序列表<ol>    <li>  </li>    </ol>
- 有序列表<ul>    <li>  </li>    </ul>
- 定义列表<dl>    <dt>    <dd>  </dd>    </dt>    </dl>

表格标签

  • 为什么使用表格

    • 简单通用
    • 结构稳定

  • 基本标签

    • 单元格

    • 行

    • 列 clospan

    • 跨行 rowspan

    • 跨列

    • 表格 <table></table>
行 <tr></tr>

列 <td></td>
边框 border = "" (放在table里)

媒体元素

  • 视频元素 video

    • <video src = "视频路径" controls autopaly></video>

    • src：资源路径
      controls：播放进度条
      autopaly：自动播放

  • 音频元素 audio

    • <audio src = "音频路径" controls autopaly></audio>

    • src：资源路径
      controls：播放进度条
      autopaly：自动播放

页面结构分析

在这里插入图片描述

iframe内联框架

在这里插入图片描述

初识表单post和get提交

表单语法

在这里插入图片描述

<h1>注册</h1>
<!-- 表单 form
	 action：表单提交的位置，可以是网站，也可以是一个请求处理地址
	 method：提交方式 post get
			get方式提交：我们可以在url中看到我们提交的信息，不安全，但是高效
			post方式提交：比较安全，可以传输大文件
	 -->
	 <form action="1.第一个网页.html" method="get">
		 <p>名字：<input type="text" name = "username" placeholder="请输入姓名" required /></p>
		 <p>密码：<input type="password" name="password" /></p>
		 <p>
		 	 <input type="submit" /><!-- 提交 -->
		 	 <input type="reset" /><!-- 重置 -->
		 </p>
	 </form>

表单元素格式

在这里插入图片描述

  • value = “小仙女” 初始值
  • maxlength = “10” 最长输入字符数量
  • size = “10” 本文框长度

单选框标签

注册

<!-- 单选框
			 input type = "radio"
			 value:单选框的值
			 name：表示组，若组不相同，则还是多选
			 checked:默认选中
			 -->
			 <p>性别：
				 <input type="radio" name="sex" value="boy" />男
				 <input type="radio" name="sex" value="girl" />女
			 </p>

按钮和多选框

多选框
<!-- 多选框
			 input type = "checkbox"
			 value：多选框的值
			 name：表示同一个组
			 checked:默认选中
			 -->
			 <p>性格：
			 <input type="checkbox" name="character" value="good" />好
			 <input type="checkbox" name="character" value="soft" />温柔
			 <input type="checkbox" name="character" value="strict" />严厉
			 </p>
按钮
 <!-- 按钮 button
			 button type="button" 普通按钮
			 input type="button" 普通按钮
			 input type="image" 图像按钮
			 input type="submit" 提交按钮
			 input type="reset" 重置按钮
			 -->
			 <p>按钮：
				 <button type="button" name="button1" value="按钮">按钮1</button>
				 <input type="button" name="button2" value="按钮" />
				 <input type="image" src="./img/7.png" />
			 </p>

下拉框 列表

下拉框
<!-- 下拉框 select
			 option:
			 selected:默认值
			 -->
			 <p>下拉框:
			 <select name="列表名称">
			 	<option value="选项的值">美女</option>
				<option value="选项的值" selected>仙女</option>
				<option value="选项的值">帅哥</option>
			 </select>
			 </p>
文本域
<!-- 文本域 textarea
			 cols="10" 列
			 rows="10" 行
			 -->
			 <p>反馈：
				 <textarea name = "textarea" cols="10" cols="10">
				 	文本内容
				 </textarea>
			 </p>
文件域
<!-- 文件域
			 input type="file"
			 name="files"
			 -->
			 <p>文件上传：
				 <input type="file" name="files" value="点击选择" />
			 </p>

搜索框滑块和简单验证

搜索框
<!-- 搜索框 -->
			 <p>搜索框：
				 <input type="search" name="search" />
			 </p>
滑块
 <!-- 滑块 -->
			 <p>音量：
				<input type="range" name="voice" max="100" min="0" step="5"/>
			 </p>
简单验证
<!-- 邮件验证 -->
			 <p>邮箱：
				 <input type="email" name="emile" />
			 </p>
			 <!-- URL -->
			 <p>URL：
				 <input type="url" name="url"/>
			 </p>
			 <!-- 数字验证 -->
			 <p>数字验证：
			 	 <input type="number" name="num" max="10" min="2"/>
			 </p>

表单的应用

  • 隐藏域

    • hidden

  • 只读

    • value = “admin” readonly

  • 禁用

    • disabled

  • 增强鼠标可用性

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

表单初级验证

  • 进行表单验证的原因
    • 安全
    • 减轻压力
  • 常用方式
    • placeholder 提示信息（提示文本框输入内容）
    • required 非空判断（表示元素不能为空）
    • patten 正则表达式

【全】最常用正则表达式！！！！_Daniel-CSDN博客

<!-- 自定义邮箱 -->
			 <p>自定义邮箱：
				 <input type="text" name="diyemile" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
			 </p>

HTML总结

在这里插入图片描述

花子柒
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值