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

Posted 花子柒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小白艰苦学习之路(记录学习历程——HTML篇)Day8相关的知识,希望对你有一定的参考价值。

注: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总结

以上是关于小白艰苦学习之路(记录学习历程——HTML篇)Day8的主要内容,如果未能解决你的问题,请参考以下文章

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

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

小白艰苦学习之路(记录学习历程——预备篇)Day1

小白艰苦学习之路(记录学习历程——预备篇)Day1

小白艰苦学习之路(记录学习历程——预备篇)Day1

小白艰苦学习之路(记录学习历程——Java篇)Day5