网页Html基础笔记

最新推荐文章于 2022-04-11 16:37:08 发布

YANGGEOL

最新推荐文章于 2022-04-11 16:37:08 发布

阅读量832

点赞数

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

本文链接：https://blog.csdn.net/qq_46253184/article/details/104759262

版权

前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

文档和网站架构

标题：通常在顶部有一个大标题和（或）图标。这是一个网站的主要常见信息，通常存在于每一个网页。
导航：提供跳转到网站不同内容的链接；通常由菜单按钮、链接或选项卡表示。
主要内容：中心的一个大区域，包含给定网页的大部分独特内容。
侧栏：一些次要信息、链接、引言、广告等。
页脚：横跨页面底部的条纹，通常包含精美的打印、版权通知或联系信息。
为了实现这样的语义标记，HTML 提供了可以用来表示这些部分的专用标签，例如：

标题：<header>
导航栏：<nav>
主要内容：<main>具有代表性的内容段落主题可以使用 <article>, <section>，<div>元素。
侧栏：<aside>经常嵌套在<main>中
页脚：<footer>

HTML元数据

元数据就是用来描述数据的数据。 HTML 中也有很多元数据。
<meta标签提供关于 HTML 文档的元数据：描述（description）、关键词（keywords）、文档的作者（author）等其他元数据。

<!DOCTYPE HTML>
<html>
<head>
    <meta name="author" content="#"/>
    <meta name="description"  content="A simple example"/>
</head>
<body>
    <a href="#"></a>
</body>
</html>

文本格式

定义：文本格式其实就是文本的样式，比如说文章的换行，文字的加粗，斜体等等类似这些的，都是文本格式，这些都是通过文本格式标签实现的。
常用的文本格式化标签：
在这里插入图片描述

加粗

<strong></strong>

<b></b>

换行

<br/>

段落

<p></p>

标题

六级标题大小加粗不同

<h1></h> <h2></h> <h3></h> <h4></h> <h5></h> <h6></h>

倾斜

<em></em>

<i></i>

删除线

<del></del>

<s></s>

下划线

<ins></ins>

<u></u>

div元素布局

优点：
1.符合 W3C 标准。
2.搜索引擎更加友好。
3.样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
4.节省代宽，代码冗余度低。
5.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。
注：DIV+CSS 并不是要我们抛弃 table，因为 table 在显示数据时更加方便，因此我们要根据实际情况灵活应用

<div></div>

行内元素

<span></span>

图像img

<img 是空标签，它只包含属性，没有闭合标签。
src：图片路径
alt：替换文本（当图片无法加载时）
title：提示文本（鼠标放在图像上的显示的文字）
width：宽
heigh：高
border：边框粗细

<img src="" alt="">

注：通过把 width 设置为 100%，使得图片随着窗口宽度的改变而自动适应变化大小，大家可以把代码复制到编辑器中运行，然后缩小放大浏览器窗口看看效果。

视频video

用来嵌入视频

<video src="" controls="controls">
</video>

video标签的常用属性如下：
在这里插入图片描述

音频audio

用来嵌入音频

<audio controls="controls">
<source src="" type="audio/mp3">
</audio>

音频播放器所占用的空间比视频播放器要小，由于它没有视觉部件，你只需要显示出能控制音频播放的控件。它不支持 width/height 属性。

其他嵌入技术 - iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）,用于嵌入其他网页。

<iframe  src="规定在 iframe 中显示的文档的 URL" width="" height=""  frameborder="1/0"  name="iframe名称"  scrolling="yes/no/auto">
</iframe>

常用属性说明：
在这里插入图片描述

超链接

target：_self：当前页面（默认）_blank：新窗口

外部链接：http：//
内部链接：href=“内部网页名称”
空连接：href="#"
下载链接：href=“文件地址”
网页元素：音频视频图像
锚点链接：定位到网页的某个位置，href="#名字" ，目标位置加一个id属性，id=" "

<a href="跳转目标" target="窗口弹出方式">文本或图像</a>

特殊字符

&nbsp；空格
&it；大于号
&gt；小于号
&amp；和号
&yen；人民币
&copy；版权
&reg；注册商标
&deg；摄氏度
&plusmn；正负号
&times；乘号
&divide；除号
&sup2；平方2
&sup3；立方3

表格

table 元素布局：

优点：
理解比较简单。
不同的浏览器看到的效果一般相同。
缺点：
显示样式和数据绑定在一起。
布局的时候灵活度不高。
一个页面可能会有大量的 table 元素，代码冗余度高。
增加带宽。
搜索引擎不喜欢这样的布局。
合并单元格：（写在标签里）
跨行：rowspan=“合并格数”；
跨列：colspan=“合并格数”；

    <table border="1">//定义表格
    <caption>study</caption>
        <tr>//定义行
            <td></td>//定义格
        </tr>
    </table>

 <th></th>//表头标签，类似于<h1-6></>，会加粗居中显示

<thead></thead>//表格头部标签
<tbody></tbody>//表格主体标签
<tfoot></tfoot>//表格页脚

caption 元素定义表格标题
caption 标签必须紧随 table 标签之后。你只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
注：border=“1” 是指表格边框的厚度为 1 像素（px），它的默认值为 0。
表格的其他常用属性：
在这里插入图片描述

列表标签

去掉点：list-style：none；

无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
ul 的 type 属性：默认值: disc，方块: square，空心圆: circle。

<ul>//只能嵌套li
       <li></li>//可以放任何元素，相当于一个容器
</ul>

有序列表
有序列表有 type 和 start 属性。
注：value1 表示有序列表项目符号的类型, value2 表示项目开始的数值。
type 属性如下所示：

注：type 默认为数字列表，即不给 type 设置属性值时显示的为数字列表。

<ol>//只放Li
       <li></li>//可以放任何元素
</ol>
<ol type=value1 start=value2>
    <li></li>        
</ol>

自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。

   <dl>//只放dd，dt
       <dt>
           <dd></dd>
       </dt>
   </dl>

HTML 表单

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：
表单标签：这里面包含了处理表单数据所用 CGI 程序的 URL 以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
注：定义来自于搜狗百科。

 <form action="url地址" method="提交方式" name="表单域名名称">
 </form>

name：定义表单的名字。
method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get 。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。
action：用来指定表单处理程序的位置(服务器端脚本处理程序）
<form元素定义了如何发送数据。它的所有属性是对用户点击提交按钮时所发送的请求进行了配置。两个与之相关的属性是 action 和 method。

action属性

定义了发送数据要去的地址。它的值必须是一个有效的 URL，可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者action="#"，则数据将被发送到包含表单的页面的 URL。
语法：

<form action="https://www.qq.com/">
<!--数据发送到一个绝对URL：https://www.qq.com/-->

<form action="/somewhere_else">
<!-- 数据发送到一个相对URL -->

<form action="#">
<!-- 数据被发送到表单出现的相同页面上 -->

method 属性

定义如何发送数据。HTML 表单数据可以通过许多不同的数据传输，其中最常见的是 GET 方法和 POST 方法。
get方法：
浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
注：如例子所示数据被附加到URL 作为一系列的名称/值对。在 URL web 地址结束之后，我们包括一个问号(?)，后面是名称/值对，每一个都由一个与符号(&)分隔开。

post方法：
使用 post 方法。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。在服务器端，一旦 post 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
注：使用 get 请求用户将在他们的 URL 栏中看到数据，但是使用 post 请求用户将不会看到。因此一般 get 用于查询数据， post 用于传输密码等。

表单验证

表单验证帮助我们确保用户以正确格式填写表单数据，确保提交的数据能使我们的应用程序正常工作。生活中我们经常会注册账号，而在注册时，你是否也遇到过诸如：“该行不能为空”，“请输入正确的电话号码”，“请输入正确的邮箱号码”，“确认密码不一致，请重新输入”之类的提示，这些就属于我们的表单验证。

使用内置表单数据验证

HTML5 一个特别有用的新功能就是，可以在不写一行脚本代码的情况下，即对用户的输入进行数据校验，这都是通过表单元素的校验属性实现的，这些属性可以让你定义一些规则，用于限定用户的输入。比如我们前面所学到的 e-mail 输入框，就会要求我们输入有效的 e-mail 地址。

required 属性

输入值不能为空,如果输入值为空，将会提示错误信息。

强制条目的长度

所有文本框 ( 或 ) 可以强制使用 minlength 和 maxlength 属性，如果值小于该字段 minlength 的值或大于 maxlength 值则无效。

fieldset 和 legend 元素

<fieldset元素组合表单中的相关数据，<legend元素为 <fieldset 元素定义标题。

原生表单组件

文本输入框（input）

文本输入框是最基本的表单组件，它便于用户输入各种数据。

注：HTML 文本框只是个纯文本输入控件。这就意味着你不能用它来进行富文本编辑（如加粗、斜体等）。所谓的富文本编辑器其实都是自定义的组件。

所有文本域的通用规范：

它们可以被标记为 readonly (用户不能修改输入值)甚至是 disabled (输入值永远不会与表单数据的其余部分一起发送)。
它们可以有一个 placeholder; 这是文本输入框中出现的文本，用来简略描述输入框的目的。
它们都受 size (输入框的物理尺寸) 和 length (文本框可以输入的最大字符数)约束。
如果浏览器支持的话，可以进行拼写检查。

单行文本框

单行文本框是用 type 属性值为 text 的元素创建的（若未提供 type 属性值，text 为默认属性）。此外，如果你指定给 type 属性的值不被浏览器支持（比如 type=“date”），也会使用 text 作为它的值。默认20。

<input type="text" id="text" name="text" value="I'm a text">

注：单行文本框只有一个真正的约束：如果你输入带有换行符的文本，浏览器会在发送数据之前删除这些换行符。

e-mail 输入框

该类型的输入框设置 type 值为 email。

<input type="email" id="email" name="email" multiple>

它给输入框添加了这样的验证约束：用户需要输入一个有效的 e-mail 地址；其他任何输入都会导致输入框报错。而通过设置 multiple 属性，这种输入框也可以让用户输入多个 e-mail 地址(多个 e-mail 地址之间用逗号隔开)

密码输入框

该类型的输入框设置 type 值为 password。

<input type="password" id="pwd" name="pwd">

搜索框

该类型的输入框设置 type 值为 search。

<input type="search" id="search" name="search">

电话号码输入框

该类型的输入框设置 type 值为 tel。

<input type="tel" id="tel" name="tel">

URL 输入框

该类型的输入框设置 type 值为 url。

<input type="url" id="url" name="url">

注：它为字段添加了特殊的验证约束，如果输入值是个不符合格式的 url，浏览器就会报告错误。符合 url 格式并不意味着它引用了一个实际存在的位置。

多行文本框

使用 <textarea 元素。

<textarea cols="每行中的字符数" rows="显示的行数"></textarea>

注：textarea 和常规的单行文本字段之间的主要区别是，允许用户输入包含硬换行符(即按回车)的文本。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。另外在大多数浏览器中，文本区域在右下角有一个拖放操作，允许用户调整它的大小。这种调整能力可以通过使用 CSS 设置文本区域的 resize 值为 none 来关闭。

下拉组件

HTML 有两种下拉组件：选择框和自动补全组件。这两者的交互方式是一样的，一旦控件被激活，浏览器会展示列表的值让用户从中选择，这个值列表会覆盖在页面内容之上。
选择框语法：

<select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
       ...
</select>

<select和<option标记的常用属性：
在这里插入图片描述
自动补全组件：
使用元素来为表单小部件提供建议的、自动完成的值，并使用一些子元素来指定要显示的值。然后使用 list 属性将数据列表绑定到一个文本域(通常是一个元素)。
一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本。通常，这是作为一个下拉框向用户展示的，在输入框中输入可能匹配的内容。
例子：

<label for="myColor">What's your favorite color?</label>
    <input type="text" name="myColor" id="myColor" list="mySuggestion">
    <datalist id="mySuggestion">
        <option>black</option>
        <option>blue</option>
        <option>green</option>
        <option>red</option>
        <option>black</option>
        <option>yellow</option>
    </datalist>

可勾选组件

可勾选组件指的是通过点击能够改变其状态的组件。有两种可勾选组件：复选框和单选框，它们都可以通过 checked 属性来指示该组件是否默认被勾选。

值得注意的是，对大多数表单组件而言，表单提交后所有具有 name 属性的组件都会被提交，即使它们没有获值。但对于可勾选组件，它们的值却只有在它们被勾选之后才会提交，换而言之：如果没有勾选，则不会提交任何东西。
复选框

<input type="checkbox" checked>

单选框

<input type="radio" checked>

几个单选按钮可以连接在一起,只需要把它们的 name 值设置为相同的。同一组中只有一个按钮可以同时被选。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，且不会随表单提交。

按钮

HTML 表单中，有三种按钮：提交按钮，重置按钮,匿名按钮。我们可以使用元素或者元素来创建一个按钮。type 属性的值指定显示什么类型的按钮。

提交按钮（submit）
用于发送表单数据给服务器。

<button type="submit">
    This a submit button
</button>
<!--or-->
<input type="submit" value="This is a submit button">

重置按钮（reset）
用于重置所有表单组件为默认值。

<button type="reset">
    This a reset button
</button>
<!--or-->
<input type="reset" value="This is a reset button">

匿名按钮（button）
没有自动生效的按钮，但是可以使用 JavaScript 代码进行定制。如果你省略了 type 属性，那么这就是默认值。

<button type="button">
    This a anonymous button
</button>
<!--or-->
<input type="button" value="This is a anonymous button">

不管使用的是<button元素还是<input元素，按钮的行为都是一样的。它们的不同点在于：
从前面的例子中也可以看出<button元素允许你使用 HTML 内容作为其标记内容，但<input元素只接受纯文本内容。
使用<button元素，可以有一个不同于按钮标签的值(通过将其设置为 value 属性)。（但是在 IE 8之前的版本中是不行的）
属性还有：

file 定义输入字段和浏览按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
name 定义input元素名称——>可以区别不同表单
value 规定input元素的值 11,12都为自定义，供后台人员使用
checked 规定首次加载时应当被选中
maxlength 规定输入字段最大长度

label标签

为 input 元素定义标注（标记）,当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。标签的 for 属性应当与相关元素的 id 属性相同，使得标签与正确相关联

<form>
  <label for="male">男</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="sex" id="female" />
</form>