HTML5学习笔记-CSDN博客

本文链接：https://blog.csdn.net/computerismylife/article/details/123989253

HTML5学习记录

本文将详细学习HTML相关知识：

掌握URL、HTTP、HTML概念
掌握网页基本结构
目标：能制作一些简单的页面。

一、HTML概述

信息时代的诞生，网页已经成为信息传输的一种重要方式，各销售平台都可以通过网页来宣传自己的产品以获利，本文将巩固自己学识的同时，也能够给零基础自学的同志一点点帮助。

1.1相关概念

注：这部分暂时了解就行。

URL（Uniform Resoure Locator)：统一资源定位器。是互联网上标准资源的地址，我们平时上浏览器最常使用的http://www.baidu.com，这一行地址就是统一的（我们使用广泛）资源（浏览网址获取很多知识）定位器（能够准确找到我们所需的），其中，“http”是协议，https是更安全的协议，”www.baidu.com“这是服务器。
HTTP：超文本传输协议。起初设计HTTP是为了提供一种发布和接收HTML页面的方法，后来慢慢发展渐渐可以使用HTTP在浏览器与服务器间传输图像和其他类型文件。HTTP是一个客户端和服务器端请求与应答的标准（TCP）协议，这里又有C/S（客户端与服务器端，理解成 “软件/APP” 获取资源）与B/S（浏览器与服务器端，理解成 “浏览器网址获取资源”）。
HTML：超文本标记语言。通过标记符号，例如 p标签、img标签、a标签等等来标记超文本（图片、链接、音乐等多媒体信息），这也是本文重点学习的内容，也是扎实网页制作的根基。

1.2发展现状

这一部分主要了解到，HTML 2.0版本已过时，目前大部分网页使用的是HTML5版本，它能赋予网页更好的意义和结构，提供前所未有的数据与应用接入开放接口，拥有更有效的服务器推送技术，支持网页端的Audio、Video等多媒体功能。

1.3HTML网页结构

STEP1: https://code.visualstudio.com/Download到官网进行下载VS code软件；官网爱国下载就好，不会就自行百度下载噢
STEP2: 打开VScode创建文件夹，确保找到创建的文件夹能够在你自己的电脑文件夹里找到，方便后期调用图片或者CSS找不到路径。
在这里插入图片描述
看见左边 “代码练习”右边第二个新建文件夹，在所新建的文件夹里面再单击第一个新建文件，命名并以.html结尾就创建好了一个新的html文件。

1.4HTML网页编辑与快捷键

1、网页结构：Shift+1 出现感叹号！然后按下 Enter 键。
2、快速保存：Ctrl+S.
3、快速运行：Alt+B.
在这里插入图片描述

<!DOCTYPE html> <!-- 文档申明类型,HTML5只支持这一种文档申明类型，实际上它还有其他类型，如果不指定文档类型会导致CSS样式不正常显示，JS代码不正常运行-->
<html lang="en">    
<head>
<!-- 网页头部信息 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 常常这样来使用，关键词+描述 -->
    <meta name="keywords" content="description">

<!-- meta元数据被用于规定页面的描述、关键词、文档的作者、最后修改时间，这些信息都不会在页面显示。 -->
    <meta http-equiv="Refresh" content="5">         <!--文档设置每隔5秒自动刷新，一般不这么用。-->

    <title>网页标题</title>  <!--网页处于搜索引擎栏的标题-->

</head>
<body>
<!-- 可直接显示的网页内容 -->
&copy;
</body>
</html>

二、HTML文本与图像

2.1特殊字符&转义字符

在网页上一些特殊的字符是不能直接显示的，我们通过转移字符来引用：

|特殊字符| 转义字符 |
|  空格  | &nbsp;  |
|    "   | &quot;  |
|    <   | &It;    |
|    >   | &gt;    |
|    <   | &It;    |
|    &   | &amp;   |
|    '   | &apos;  |
|    ©   | &copy;  |

2.2常用标签

1、标题：
	<h1></h1>

2、段落：
	<p></p>

3、换行：
	<br/>

4、水平分割线：
	<hr/>

5、超链接：
	<a href=""></a>

5、图像：
	<img src=""/>

该处使用的url网络请求的数据。

三、HTML列表、表格、表单

3.1列表

| 应用：	
		在网页中常使用列表制作水平导航栏，将list-style-type值设置为none。
		具体操作之后学习在分享实操。

1、无序列表

<ul type="disc"> 
	<li>我爱学习</li>
	<li>我超爱学习</li>
	<li>我相当爱学习</li>
</ul>

表3-1 ul标签type属性

值	备注
disc	实心圆
circle	空心圆
square	小方块
2、有序列表

<ol type="I"> 
	<li>我爱学习</li>
	<li>我超爱学习</li>
	<li>我相当爱学习</li>
</ol>

表3-2 ol标签type属性

值	备注
1(默认)	数字（1，2，3，4）
A	大写英文字母
a	小写英文字母
I	大写罗马字母
i	小写罗马字母

3.2表格

| 表格相关标签

表格	table
表头	th
行	tr
列	td
边框	border
标题	caption
跨行	rowspan
跨列	colspan
边框与内容间距	cellpadding
单元格与单元格间距	cellspacing

1、去除单元格与单元格之间的空白

<table border="1" cellspacing="0">

2、合并单元格的某几列或者某几行

<td colsapan="2">  /* 表示跨两列合并*/

3、只定义一个单元格的底部边框线

<style = "border-bottm: 1px solid;">

3.3表单

| 表单相关标签

表单	form
弹窗	alert
底部	button
文本框	input(单标签)
文本域	textarea
下拉列表	select

input属性：

<input type =  "text" > 文本框
<input type =  "password" > 密码框
<input type =  "" > 提交框
<input type =  "radio" > 单选框
<input type =  "checkbox" > 复选框

期待后续的学习，需要多实践，实操练习后续发出~