『前端学习笔记』 HTML5 基础内容

最新推荐文章于 2022-06-24 14:41:08 发布
最新推荐文章于 2022-06-24 14:41:08 发布
阅读量379 收藏 2
点赞数
分类专栏： 前端学习笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GLZX_HM/article/details/107071121
版权

参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS

参考文档：HTML 教程 W3school

文章目录



关于HTML与HTML5

HTML是一种标记语言，而不是编程语言。
HTML出现于1991年。
HTML5出现于2012年。
XHTML5出现于2013年。



元素，标签和属性

  • 元素：元素指的是从开始标签到结束标签的所有代码。
  • 标签：承载HTML的主要内容，形如<标签>。
  • 属性：从属于标签，为可选参数，形如<标签 属性 = "值">。

块元素与内联元素

  • 块元素：通常以新行开始，如<h1>，<p>，<ul>，<div>。
  • 内联元素：通常不以新行开始，如<a>，<b>，<img>，<span>。



HTML5空文档


HTML5空文档如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
</body>

</html>

<!DOCTYPE html>
是HTML5的声明方式。
不同的HTML和XHTML版本有不同的声明方式。

<html lang="en">
html标签，定义这是一个html文档。
属性lang指定语言，如"ch"，"en"等。

</html>
闭标签，大多数标签需要使用</标签名>的方式来闭合。多数IDE提供自动补全（闭合）。

<head></head>
<body></body>
head表示头部，body表示内容。


<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<meta>标签定义关于 HTML 文档的元信息。
charset属性用来定义字符集。
<title>标签包含的内容就是HTML文档的标题。



标签简介


h1~h6：标题

  <h1>标题</h1>
  <h2>标题</h2>
  <h3>标题</h3>
  <h4>标题</h4>
  <h5>标题</h5>
  <h6>标题</h6>

  • 代码结果：
    在这里插入图片描述
    大小不同的6个标题。从1到6是从大到小。

p：段落

  • 采用p标签：
  <p>段落一</p>
  <p>段落二</p>
  • 代码结果：
    在这里插入图片描述
  • 不采用p标签：
  段落一
  段落二
  • 代码结果：
    在这里插入图片描述

a：锚

<a href="index.html">文字内容</a>

可以用来定义超链接。


使用a标签做页内跳转

<a name="one">内容1</a>
<a href="#one">跳转到内容1</a>

用第一个标签指定name，第二个a标签href连接到#name。
内容跨篇幅很大时可用性很高，直接在一个页面内点击跳转。


img：图片

<img src="myjpg1.jpg" width="100px" height="100px " alt="text">

src指定来源，宽高属性指定大小，alt替换文本（图片显示失误时有效）。
可以用来引入图片。
需要注意的是<img>标签不需要闭合。

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

a和img的嵌套使用

为图片加超链接

<a href="index.html">文字内容</a>
	<img src="myjpg.jpg" width="100px" height="100px>
</a>

br：换行

<br>
<br/>

都是换行操作。
第二种是推荐用法。更适用于当前的操作和代码环境。


span：内嵌文字

<p>文字区域1 <span>文字区域2 </span> </p>

可以通过更改样式，显示出<span>独立于其他标签的样式结果。

div：划分

  <!--定义样式-->
  <style type="text/css">
    #mydiv{
      color: blueviolet;
    }
  </style>

  <div id="mydiv">
    <p>内容</p>
  </div>

<div>的主要作用是代码块的划分。
顺带一提，css文件中，默认标签直接用，来自属性id就要加#。


属性简介


body标签的bgcolor属性：背景颜色

<body bgcolor="#f0f8ff">
</body>

颜色可以自选。
在这里插入图片描述

a标签的target属性：指定打开方式

<a href="index.html" target="_blank">
</a>
  • 取值有多种：
    在这里插入图片描述

_blank，在新窗口显示目标网页
_self，在当前窗口显示目标网页
_parent，框架网页中当前整个窗口位置显示目标网页
_top，框架网页中在上部窗口中显示目标网页


align：对齐

多数标签可用，可选centor等取值，指定对齐方式。

p标签的align属性已被弃用，HTML 4.01 Strict和XHTML 1.0 Strict DTD均不支持此属性。
请用CSS作为替代。
CSS语法：<p style="text-align:right">


class：类名

大多数标签拥有此属性，表示类名。

<a class="hidden">
</a>

id：标识符

大多数标签拥有此属性，人工指定identification，后续添加css样式等。

<a id="xxx">
</a>

style：样式

大多数标签拥有此属性，用来定义内联css样式。

<a style="target: above">
</a>

title：额外信息

大多数标签拥有此属性，用来定义额外信息。

<a title="xxx">
</a>



文字格式化

  <b>粗体字</b>
  <big>大号字</big>
  <em>着重字</em>
  <strong>强调字</strong>
  <i>斜体字</i>
  <small>小号字</small>
  <sub>下标字</sub>
  <sup>上标字</sup>
  <ins>插入字</ins>
  <del>删除字</del>

其中big标签被标记为弃用。

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



引入CSS样式


外部引入：link，rel、type、href


  1. 方便测试，新建一个css文件使用
    创建css文件，New一个File
    在这里插入图片描述
  2. 命名为mycss.css
    在这里插入图片描述
  3. 随便加一点颜色设置进来：
h1{
  color: #b3d4fc;
}

  1. 外部引入过程：
  <link rel="stylesheet" type="text/css" href="mycss.css">

其中rel属性为"stylesheet"，type为"text/css"，href属性指定css文件位置。

  • 测试代码：
	<!--测试-->
	<h1>标题h1</h1>

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

内部引入：style，type


  • 内部引入过程：
  <style type="text/css">
    h2{
      color: aqua;
    }
  </style>

  • 测试：
  <!--测试-->
  <h2>标题h2</h2>

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

内联引入：style属性


  • 内联引入过程：
  <h3 style="color: blueviolet">
    标题h3
  </h3>

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



表格table

	<table border="10" cellspacing="2">
    <caption>表格</caption>
    <tr>
      <th>line1</th>
      <th>line2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
  </table>

表格需要用到<table>标签。
border属性定义边界长度，cellspacing属性定义单元格间隔。
此外还有bgcolor可以定义填充色，background可以定义填充图片。（没有展示）
<caption>定义了标题。
<tr>是行，<td>是列。<th>表头。


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


列表


无序列表ul

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

<li>定义列表元素

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

  • 更改图标：

  <ul type="disc">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

列举type的可选属性（此处无法用补全）：
disc为实心原点，circle为空心圆，square为实心方块。


有序列表ol

  <ol type="A" start="10">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>

start属性指定起始值。
type属性同样为指定列表标号的类型，可选值有：
A、a、I、i。

可以使用CSS中的list-style = "none"取消端点的显示。


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

嵌套列表

<li>标签的内容同样可以是一个新的列表。

  <ul type="circle">
    <li>1</li>
    <li>2</li>
    <li>
      <ol type="I" start="18">
        <li>31</li>
        <li>32</li>
      </ol>
    </li>
  </ul>
  • 代码结果：
    在这里插入图片描述

自定义列表：dl、dt、dd

  <dl>
    <dt>1</dt>
      <dd>1d</dd>
    <dt>2</dt>
      <dd>2d</dd>
  </dl>

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

表单form

在以前的HTML规范当中，表单必须要在form区域内创建。

input：文本、密码、复选框、单选框，按钮与提交等

<form>
  <!--普通输入文本-->
  账号：<input type="text"><br/>
  <!--密码类型-->
  密码：<input type="password"><br/>
  <!--复选框类型-->
  A：<input type="checkbox"><br/>
  B：<input type="checkbox"><br/>
  C：<input type="checkbox"><br/>
  <!--单选框类型-->
    <!--相同name的单选框共享一个单选项目-->
  1：<input type="radio" name="1"><br/>
  2：<input type="radio" name="1"><br/>
  <!--按钮类型-->
    <!--需要用value属性指定值-->
  <input type="button" value="按钮"><br/>
  <!--提交按钮-->
    <!--经常和action一起用，做表单提交的跳转-->
  <input type="submit" value="提交"><br/>
</form>

  • 代码结果：
    在这里插入图片描述
    可以进行交互操作。

select，option：下拉框

<form>
  <!--下拉框-->
  <select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</form>

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

textarea：文本域

<textarea cols="30" rows="10">默认内容</textarea>

可以脱离form创建。

  • 代码结果：
    在这里插入图片描述
    可以填充内容，拖拽大小。

表单的action交互

<form action="index.html" method="get">
  用户名：<input type="text" name="name"><br/>
  密码：<input type="password" name="password"><br/>
  <input type="submit" value="提交">
</form>

  • action可以跳转到本地/网络页面，可以是各个类型的网页格式，例如html，php，jsp等等。

  • method方法有get和post两种取值，对应HTML的get和post两种方法。

    • get请求直接将参数放在url上，post请求的参数值可以在Chrome浏览器中查看。
    • get方法可以做资源定位（根据分享url快速定位到相应web区域），post方法保护隐私。

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

  • 代码结果（输入内容后点击提交）：
    在这里插入图片描述
    可以看到网页的跳转，并且根据get请求，参数值显示在了url上。



布局


使用div布局


  • 无格式布局：
  <div id="layout">
    <div id="head">head</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="foot">foot</div>
  </div>

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

  • 加入CSS样式（内部）：

  <style type="text/css">
    #layout{
      width: 100%;
      height: 500px;
      background-color: blueviolet;
    }
    #head{
      width: 100%;
      height: 20%;
      background-color: #b3d4fc;
    }
    #left{
      width: 40%;
      height: 50%;
      background-color: aqua;
      /*指定浮动方式：从左到右*/
      float: left;
    }
    #right{
      width: 60%;
      height: 50%;
      background-color: chartreuse;
      /*指定浮动方式：从左到右*/
      float: left;
    }
    #foot{
      width: 100%;
      height: 30%;
      background-color: crimson;
    }
  </style>

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

使用table表格布局

  <table width="100%" height="500px" style="background-color: #b3d4fc">
    <tr>
      <!--colspan规定单元格可以横跨几个列表-->
      <td colspan="2" width="100%" height="20%" style="background-color: #888888">head</td>
    </tr>
    <tr>
      <td width="40%" height="50%" style="background-color: coral">left</td>
      <td width="60%" height="50%" style="background-color: aquamarine">right</td>
    </tr>
    <tr>
      <td colspan="2" width="100%" height="30%" style="background-color: blue">foot</td>
    </tr>
  </table>

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

框架


frameset：弃用

标签定义框架集。它用于组织多个窗口（框架）。每个框架存在一个独立的文档。在最简单的应用中，frameset 元素仅仅声明框架集中存在的列或行的数目。 由于该标签对网页可用性的负面影响，在 HTML 5 中 frameset标签没有得到支持。



iFrame


网页内嵌

  • index.html
<body>
  <!--使用iframe框架嵌入页面-->
  <iframe src="a.html" frameborder="0" width="150px" height="150px">
  </iframe>
</body>
  • a.html
<body bgcolor="blue">
  <!--加入大量换行-->
  a
  <br/><br/><br/><br/>
  <br/><br/><br/><br/>
  <br/><br/><br/><br/>
</body>

  • 代码结果(index.html嵌入a.html)：
    在这里插入图片描述
    超出长度，自动加了下拉框。

链接target属性中_parent的取值与iframe

_parent取值在父级页面打开。

  • index.html
<body>
  <!--嵌入网页a.html-->
  <iframe src="a.html" frameborder="0" width="450px" height="450px">
  </iframe>
</body>

  • a.html
<body bgcolor="blue">
  <!--嵌入网页b.html-->
  <iframe src="b.html"  frameborder="0" width="300px" height="300px">
  </iframe>
</body>

  • b.html
<!--b.html > body-->
<body bgcolor="#7fffd4">
  <!--嵌入锚链接 使用_parent的属性取值-->
  <a href="https://www.baidu.com" target="_parent">链接</a>
</body>

  • 代码结果（index包含a，a包含b，b包含链接）：
    在这里插入图片描述

  • 代码结果（点击链接）：
    在这里插入图片描述
    可以看到整个a和b都变成了链接的目标网页。
    这便是iframe与_parent的结合。在直接父级页面打开。
    而_top取值是在顶级页面打开。


实体：转义字符

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

如需显示小于号，我们必须这样写：&lt或 &#60
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

参考文档：HTML 字符实体

大熊软糖M
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
前端H5入门基础01
xu_duo_i的博客
12-05 197
网页构成 html :结构 css :样式 Java scripe:行为 DOC TYPE 文档 类型 <html> <head> <title>网页标题</title> //例: </head> <body> ...
前端H5开发的基础知识点
qq_49070817的博客
08-01 382
一些H5的基本知识，关于基础标签和三种CSS样式的说明
WEB前端入门-HTML5基础概述
Eternal_tyq的博客
11-03 2290
HTML简介HTML的全称是：Hypertext Marked Language,即超文本标记语言，是目前在网络上应用最广泛的语言，也是构成网页文档的主要语言，主要用来控制网页的结构。它是由其标签组成的描述性文本。使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。HTML的结构HTML文档的基本结构由三个标签组成: <html><!--开始--> <head> <!
前端H5学习记录--第四周
qq_41550093的博客
03-24 202
1.文本框在为输入文字时提示默认文字，当鼠标放上后文字消失的方式。 1.input: <inputname="textfield"type="text"value="点击添入标题"onfocus="if (value =='点击添入标题'){value =''}"onblur="if (value ==''){value='点击添入标题'}"/> 2textarea: <...
前端内容梳理（1）HTML和HTML5
Carl_changxin的博客
10-16 177
1、HTML （1）什么是 HTML？ HTML 是用来描述网页的一种语言。 （2）HTML 标签是什么？ HTML 标签是由尖括号包围的关键词，比如 &lt;html&gt; （3）HTML 元素是什么？ HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 大多数 HTML 元素可拥有属性 （4）HTML 文档 是什么？ HTML 文...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
h5前端学习笔记
03-21
综合以上信息，这份“h5前端学习笔记”涵盖了HTML5的基础到高级特性，CSS样式设计，JavaScript编程，以及一些实际应用场景的案例，对于想要系统学习和提升前端技能的开发者来说，是非常宝贵的资源。
前端基础学习笔记,pdf
10-12
【前端基础学习笔记】 前端开发是构建网页或应用程序用户界面的关键部分，主要包括HTML、CSS和JavaScript这三大核心技术。这篇学习笔记涵盖了JavaScript的基础知识，以及与前端开发相关的其他重要概念。 ...
《Html》前端学习笔记
04-12
HTML，全称HyperText Markup Language，即超文本标记语言，是构建网页内容的基础。它是一种标记语言，通过一系列预定义的标签来描述网页的结构和内容。HTML与CSS（Cascading Style Sheets）和JavaScript一起构成了...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
最新发布
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
Sharepoint 图片库字段名称（Title）和对应的内部名称（InternalName）
weixin_30724853的博客
06-26 130
做项目遇到需要查看列表库的内部名称，因为用的是图片库，所以就列出所有对应关系，以备查看方便： 转载于:https://www.cnblogs.com/lishidefengchen/p/7082337.html...
【HTML】在 HTML 的 title 部分添加图片
symsmile
01-21 5723
在 title 元素 后添加 link 元素，具体如下： 北邮人论坛 上面的代码表示：.icon 图片直接放在了目录 WebContent 下面。如果目录结构为 ...WebContent\images\bupt.ico ，则相应地改 href 为：href="images/bupt.ico"。
图片的TITLE标签，意义何在？
米时光
08-05 819
什么是图片标题标签？ 简单理解：所谓图片的标题标签主要是指图片的Title标签，当你的鼠标在网页中划过图片的时候，它显示的文本内容的提示信息。 具体在HTML代码中的表现为：<img alt=“替代文本” title=“标题标签” src="URL地址 "/> 那么，图片标题标签对SEO有价值吗？ 从目前来看，搜索引擎针对图片标题标签，仅仅停留在一个注释与解释说明的作用，这与网站导航中的文字性title标签还是有一定的区别。 主要表现为： 网站首页顶端导航中，我们经常会看到“首页”这
＜img＞标签中alt属性和title属性的区别
XiaoSen207的博客
03-09 379
alt属性的特点： ①倘若图片加载不成功未能显示出来，就会在图片未显示的地方出现一段文字。这一作用是为了给未加载出来的图片提供信息，方便用户浏览网页，同时也方便开发人员维护网页。 ②搜索引擎可以通过这个属性的文字描述获取图片 　　 title属性的特点： title属性可以用在任何元素上，当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释 ...
HTML——头部属性、标题标签、特殊字符和插入图片
qq_51869518的博客
06-24 2528
头部标签与属性、标题标签、特殊字符与img标签、、代码实现。对头部标签base的简单介绍。以及对于昨天页面的进一步改进。可以自己动手试试运行一下......
html如何修改title前的小图标
weixin_45966674的博客
12-04 1万+
今天来和大家分享WEB前端的一个小常识，如何改变title前的图标，这个图标是不能用普通的图片替换的，要用后缀为ico的图片文件进行替换。画图里也有可以修饰图片的工具，当你对图片满意后就可以点击 (文件>另存为)文件类型选择24位位图bmp。下面凡玉就来带大家一起做一个ico图片，并用它修改title前的小图标。完成后再手动将文件后缀改为ico，这样我们的ico图就完成了。首先我们找到一张图片在(打开方式)里选择《画图》之后我们在html文件里的head标签内加入。
html select标签默认值_图像标签&&标签属性
weixin_39737831的博客
12-01 378
图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也可以加深用户对网站风格的印象。标签属性使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下： 内容 标签名>在上面的语法中，1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。3.任何...
img标签中alt属性与title属性
热门推荐
hedaqiya的博客
04-15 1万+
在html的img标签中，alt属性有以下两大作用：① 如果图像没有下载或者加载失败，会用文字来代替图像显示。这一作用是为了给加载不出网页图片的用户提供图片信息，方便用户浏览网页，也方便程序猿维护网页。② 搜索引擎可以通过这个属性的文字来抓取图片而title属性，是当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字，以对图片信息进行补充性说明。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊软糖M

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值