HTML个人学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

CezL

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量359

点赞数 3

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/Cezzzzzz/article/details/110670531

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5

(本文大多参考慕课网HTML教程，如需更详细内容请移步至以上链接）
仅供个人学习笔记使用，欢迎批评指正。

HTML5介绍

HTML与CSS的关系

单纯的HTML标签如：<p>我是一个p标签</P>

CSS是用来修饰html样式的
html本身有一些默认样式，如果我们想改变html标签的样式，就需要借助CSS
html+css构成网页基本页面结构和样式

CSS代码修饰：

  p {
        color: red;
        border: 1px solid blue;
        width: 140px;
        height: 40px;
    }

标签的语法

标签由英文尖括号<和>括起来如<html>就是一个标签
html中标签一般是成对出现的，分为开始标签和结束标签。结束标签比开始标签多一个/

如：
```
<p></p>
<div></div>
<h1>
    
</h1>
```
标签之间可以嵌套，但是先后顺序必须保持一致
html标签不区分大小写，但是尽量还是小写，别大写恶心人啊

HTML5文档结构

html文档结构如下图

html文档结构

技术点的解释：

:文档类型声明，表示该文件为 HTML5文件。声明必须是 HTML 文档的第一行，位于标签之前
<html></html>标签对：<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。
<head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。
<body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。

认识head标签

文档的头部描述了文档的各种属性和信息，包括文档的标题等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

head标签为双标签，有尾标签，<head></head>。
head标签表示头部标签,通常用来嵌套meta、title、style等标签。
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

4、<meta charset="UTF-8">设置当前文件字符编码

5、style标签：双标签中设置当前文件样式

<head>
    <meta charset="UTF-8">    
    <style>
        #box1{
            color:red;
        }
    </style>
    <title>hello world</title>
</head>

认识body标签

在网页上要展示出来的页面内容一定要放在body标签中。

html文件注释

代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：

<!--注释文字-->

注释代码是不会在结果窗口中显示出来的。

HTML5语义化标签

主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。

语义化

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等

语义化的好处：

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

段落标签

语法：<p>段落文本</p>

注意一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<p>标签中。

标签的默认样式，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。

span标签自定义文字样式

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的

语法：

<span>文本</span>

<head>
        <meta charset="UTF-8">
        <title>使用thead、tbody、tfoot标签</title>
        <style>
            span{
                color:blue;
            }
        </style>

    </head>

    <body>
        <p>
            <span>Cezzz</span>
        </p>
    </body>

使用hx标签为网页增加标题

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法：
<hx>标题文本</hx> (x为1-6)
文章的标题前面可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。

注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<h1>腾讯网</h1>

div标签自定义块

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个

标签的作用就相当于一个容器。

语法：

<div>…</div>

确定逻辑部分：

逻辑部分它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。

典型逻辑部分

header标签定义头部区域

header标签代表头部，但是作用等同于div，只是具备语义化

语法：

<header>我代表头部</header>

footer标签定义底部区域

footer标签代表底部，但是作用等同于div，只是具备语义化

语法：

<footer>我代表底部</footer>

section标签定义区段

section标签代表区段，但是作用等同于div，只是具备语义化

语法：

<section>我代表底部</section>

aside标签定义侧边栏区域

aside标签代表侧边栏区域，但是作用等同于div，只是具备语义化

语法：

<aside>我代表底部</aside>

HTML5效果标签

br标签实现换行效果

在 html 中是忽略回车和空格的，输入的再多回车和空格也是显示不出来的，想实现换行效果就必须使用br标签。

语法：

<br />

在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。

与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。

` `实现空格标签

在 html 中是忽略回车和空格的，输入的再多回车和空格也是显示不出来的，想实现空格效果就必须使用下面的方法。

语法：

 

hr标签实现水平线标签

语法：

<hr />

Tips：

<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
<hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

HTML5列表标签

ol标签构建有序列表

<ol>标签用来构建有序HTML列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

ul标签构建无序列表

<ul>标签用来构建有序HTML列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

ul li:first-child（第一个）ul li:last-child（最后一个）ul li:nth-child(n) （想改变哪个就把n改成几，n从0开始计数）有序的通用

HTML5图片、链接以及表格标签

img标签为网页添加图片

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解：

src：标识图像的位置；
alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
图像可以是GIF，PNG，JPEG格式的图像文件。

a标签为网页添加超链接

使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

例如：

<a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>

上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

在新建浏览器窗口中打开链接

<a>标签中的<target>属性

target

a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

使用table家庭为网页添加表格

table

上面代码解释：

创建表格的四个元素：table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

注意：

1、table标签用来定义整个表格，为双标签，必须有结束标签。

2、table标签里面可以放caption标签和tr标签。

3、caption标签用来定义表格的标题。

4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。

5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

6、td同来设置表格的列，一组td标签代表一列。

7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

使用thead、tbody、tfoot定义表格

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<body>
    <table border="1">
        <thead>
            <tr>
                <th>科目</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>语文</td>
                <td>99</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总分</td>
                <td>0</td>
            </tr>
        </tfoot>
    </table>
</body>

HTML5表单标签，与浏览者交互

使用form标签创建表单

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

<form   method="传送方式"   action="服务器文件">

1.<form> <form>标签是成对出现的，以<form>开始，以</form>结束。

2.action **：**浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method：数据传送的方式（get/post）。

<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

语法：

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

type:当type="text"时，输入框为文本输入框

当type="password"时，输入框为密码输入框
name:为文本框命名，以备后台程序ASP 、PHP使用。
value:为文本输入框设置默认值(一般起到提示的作用)

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>

placeholder属性的使用

placeholder

1、placeholder属性为输入框占位符,里面可以放提示的输入信息。

2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。

3、占位符内容不是输入框真正的内容。

数字输入框

number

<input type="number"

1、input的type属性设置为number,则表示该输入框的类型为数字。

2、数字框只能输入数字，输入其他字符无效。

3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。

网址输入框

url

<input type="url">

1、input的type属性设置为url,则表示该输入框的类型为网址。

2、数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。

邮箱输入框

<input type="email">

1、Input的type属性设置为email,则表示该输入框的类型为邮箱。

2、数字框的值必须包含@。

3、数字框的值@之后必须有内容,否则会报错误提示。

textarea标签创建文本域

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

<textarea  rows="行数" cols="列数">文本</textarea>

<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
cols:多行输入域的列数
rows:多行输入域的行数
在<textarea></textarea>标签之间可以输入默认值

<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

label为input标签穿衣服

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<!DOCTYPE html>
<html>

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

<body>
    <form>
        <label for="uname">输入你的用户名</label>
        <input type="text" id="uname" placeholder="Enter uname">
        <br>
        <label for="pass">输入你的密码</label>
        <input type="password" id="pass" placeholder="Enter password">
    </form>
</body>

</html>

单选框、复选框，让用户选择

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。

语法：

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

type:当type="radio"时，控件为单选框

当type="checkbox"时，控件为复选框
value：提交数据到服务器的值（后台程序PHP使用）
name:为控件命名，以备后台程序 ASP、PHP 使用
checked:当设置 checked=“checked” 时，该选项被默认选中

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

select、option标签创建下拉菜单

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。

1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。

2、select标签里面只能放option标签，表示下拉列表的选项。

3、option标签放选项内容，不放置其他标签。

4、value：

value

5、selected=“selected”：

设置selected="selected"属性，则该选项就被默认选中。

提交按钮

在表单中有两种按钮可以使用，分别为：提交按钮、重置。当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

<input   type="submit"   value="提交">

type:只有当type值设置为submit时，按钮才有提交作用

value:按钮上显示的文字

<form method="post" action="save.php">
        <label for="myName">姓名：</label>
        <input type="text" value=" " name="myName" />
        <input type="submit" value="提交"/>
    </form>