HTML5学习笔记

HTML5学习记录

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

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

一、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软件;HTML5学习笔记_第1张图片
STEP2: 打开VScode创建文件夹,确保找到创建的文件夹能够在你自己的电脑文件夹里找到,方便后期调用图片或者CSS找不到路径。
HTML5学习笔记_第2张图片
看见左边 “代码练习”右边第二个新建文件夹,在所新建的文件夹里面再单击第一个新建文件,命名并以.html结尾就创建好了一个新的html文件。

1.4HTML网页编辑与快捷键

1、网页结构:Shift+1 出现感叹号!然后按下 Enter 键。
2、快速保存:Ctrl+S.
3、快速运行:Alt+B.
HTML5学习笔记_第3张图片

<!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" > 复选框

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

你可能感兴趣的:(html5)