HTML笔记

林泽JAVAEE

已于 2024-09-01 21:44:53 修改

阅读量892

点赞数 23

文章标签： html 笔记服务器

于 2024-08-27 22:50:29 首次发布

本文链接：https://blog.csdn.net/weixin_67531122/article/details/140071352

版权

HTML 标签属性

用于给标签提供 附加信息
可以写在：起始标签 或 单标签 中，形式如下：

例如：
- 这个标签的作用是用于创建文字滚动的效果
- loop 这个属性的作用是确定滚动的次数，例如：loop=“1” 就是滚动1次的意思 , 依此类推。
- bgcolor 这个属性的作用是确定背景颜色，例如：bgcolor=“green” 背景颜色就是绿色，依此类推。

<marquee loop="1" bgcolor="green">学习html技术</marquee>
<input type="password">

有些特殊的属性，没有属性名，只有属性值，例如：

<!-- 这个属性的意思是禁用input 元素，通俗点讲就是在这个input 输入框中输入不了内容了 -->
<input disabled>

注意点：

1.不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写）
2.属性名，属性值不能乱写，都是w3c规定好的
3.属性名，属性值，都不区分大小写，但推荐小写。
4.双引号，也可以写成单引号，甚至不写都行，但是还是推荐写双引号。
5.标签中不要出现同名属性，否则后写的会失效，例如：
<input type="text" type="password">

HTML 基本结构

【检查】和【查看网页源代码】的区别：

【查看网页源代码】看到的是程序员编写后的源代码。
【检查】看到是：经过浏览器“处理”后的源代码。
备注：日常开发中，【检查】用的最多

网页的 基本结构 如下：
1.想要呈现在网页中的内容写在body标签中。
2.head标签中的内容不会出现在网页中。
3.head标签中的title标签可以指定网页的标题。
4.图示：

HTML 文档声明

作用：告诉浏览器当前网页的版本
写法：
注意：文档声明，必须在网页的第一行，且在html标签的外侧
例如：

<!DOCTYPE html>
<html>
  <head>
    <title>...</title>
  </head>
  <body>
    ....
  </body>
</html>

HTML 编码

平时编写代码时，统一采用UTF-8编码
为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指定字符编码

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

HTML 设置语言

主要作用：

让浏览器显示对应的翻译提示
有利于搜索引擎优化
具体写法：

<!--中文-中国大陆（简体中文）->
<html lang="zh-CN">

HTML 标注结构

标准结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我是一个标题</title>
  </head>
  <body></body>
</html>

在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标。

HTML 排版标签

h1-h6标题标签

    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>

注意：h1最好写一个，h2~h6能适当多写。

p段落标签

<p>我是一个段落</p>

注意：p标签很特殊！它里面不能有：h1~h6、p、div 标签。

div段落标签

<div>
      <h1>我是一级标题</h1>
      <h2>我是二级标题</h2>
      <h3>我是三级标题</h3>
      <h4>我是四级标题</h4>
      <h5>我是五级标题</h5>
      <h6>我是六级标题</h6>
      <p>我是一个段落</p>
</div>

注意：div 标签没有任何含义，用于整体布局。

HTML 语义化标签

概念：用特定的标签，去表达特定的含义。
原则：标签的默认效果不重要（可以通过CSS随便控制效果），语义最重要！
优势：
- 代码结构清晰可读性强。
- 有利于SEO （搜索引擎优化）。
- 方便设备解析（如屏幕阅读器，盲人阅读器等）。

HTML 块级元素与行内元素

块级元素特点：独占一行
行内元素特点：不独占一行
注意：
规则1：块级元素中能写：行内元素、块级元素（几乎什么都能写）
规则2：行内元素中能写：行内元素，但不能写块级元素
特殊规则：h1-h6不能相互嵌套， P标签中不能写元素

HTML 文本标签

1、用于包裹：词汇、短语等。
2、通常写在排版标签里面。
3、排版标签更加宏观（大段的文字），文本标签更加微观（词汇、短语）。
4、文本标签通常都是行内元素。

常用文本标签

在这里插入图片描述

不常用文本标签

在这里插入图片描述
说明：

这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没关系）。
blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。
有些语义感不强的标签，我们很少使用，例如：
small 、b、u、q、blockquote
HTML标签太多，记住那些：重要的、语义感强的标签即可、目前只有这些：
h1~h6、p、div、em、strong、span

HTML 图片标签

在这里插入图片描述
注意：

尽量不同时修改图片的宽和高。
alt的属性作用：
- 搜索引擎通过alt属性，得知图片的内容。-- 最主要的作用
- 当图片无法展示的时候，有些浏览器会呈现alt属性的值
- 盲人阅读器会朗读alt属性的值

超链接

跳转页面

主要作用：

从当前页面进行跳转。

 <body>
    <!-- 
        _self : 在本页签中打开。
        _blank: 在新页签中打开。
    -->
    <a href="https://www.taobao.com/" target="_blank">去跳转页面</a>
  </body>

注意点：

代码中的多个空格，多个回车，都会被浏览器解析成一个空格！
虽然 a 是行内元素，但 a 元素可以包裹除它自身外的元素！

跳转文件

在这里插入图片描述

跳转锚点

锚点含义：网页中的一个标记点。
具体使用方法：

设置锚点：

   <!-- 第一种方式： a 标签配合name属性 -->
   <a name="test1"></a>

   <!-- 第二种方式： 其他标签配合id属性 -->
   <h1 id="test2"></h1>

注意点：
– 具有 href 属性的 a 标签是超链接，具有name 属性的 a 标签是锚点。
– name 和 id 都是区分大小写的，且 id 最好别是数字开头的。

跳转锚点

    <!-- 跳转锚点 href属性：#test 要和h3标签中id属性名称一样才能跳转-->
    <a href="#test">去test锚点</a>
    <h3 id="test">看图片</h3>
    <img src="./resource/Snipaste_2024-07-07_21-27-23.jpg" alt="图片" />

    <!-- 刷新本页面 -->
    <a href="">刷新本页面</a>

    <!-- 跳到本页面顶部 -->
    <a href="#">回到顶部</a>

跳转其他页面锚点

注意点：
- 两个html文件中两个属性名的名字标识要保持一致，并且前面要有#在前面

唤起指定应用

    <a href="tel:10010">给中国联通打电话</a>
    <a href="mailto:123456@qq.com">给该邮箱发邮件</a>
    <a href="sms:10086">给中国移动发短信</a>

HTML 列表

有序列表

概念：有顺序或侧重顺序的列表。

    <!-- ol标签是有序列表 -->
    <ol>
      <li>我是列表项</li>
    </ol>

无序列表

概念：无顺序或不侧重顺序的列表。

    <!-- ul标签是无序列表 -->
    <ul>
      <li>我是列表项</li>
    </ul>

注意点： li 标签最好写在ul 或 ol 标签中，不要单独使用。

自定义列表

概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
一个 dl 就是一个自定义列表，一个 dt 就是一个书序名称，一个 dd 就是一个术语描述 (可以有多个)。

    <!-- dl标签是自定义列表 -->
    <dl>
      <dt>我是术语名称标签</dt>
      <dd>我是描述标签</dd>
    </dl>

表格

基本结构

一个完整的表格由：表格标题，表格头部，表格主体，表格脚注，四部分组成。

2.表格涉及的标签：
table：表格
caption：表格标题
thead：表格头部
tbody：表格主体
tfoot：表格脚注
tr：每一行
th，td：每一个单元格（备注：表格头部中用th，表格主体，表格脚注中用：td）

3.具体代码:

 <table border="1">
      <!-- caption 表格标题 -->
      <caption>
        学生信息
      </caption>

      <!--thead 表格头部 -->
      <thead>
        <!-- tr每一行 -->
        <tr>
          <!-- th：表示每一个单元格，表格头部中用th -->
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>民族</th>
          <th>政治面貌</th>
        </tr>
      </thead>

      <!-- tbody 表格主体 -->
      <tbody>
        <!-- tr每一行 -->
        <tr>
          <!-- td：表示每一个单元格，表格主体，脚注中用th -->
          <td>张三</td>
          <td>男</td>
          <td>18</td>
          <td>汉族</td>
          <td>团员</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td>20</td>
          <td>满族</td>
          <td>群众</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>男</td>
          <td>19</td>
          <td>回族</td>
          <td>党员</td>
        </tr>
        <tr>
          <td>赵六</td>
          <td>女</td>
          <td>21</td>
          <td>壮族</td>
          <td>团员</td>
        </tr>
      </tbody>

      <!-- tfoot 脚注 -->
      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>共计：4人</td>
        </tr>
      </tfoot>
    </table>

表格常用属性

在这里插入图片描述
注意点：

<table>元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度 ----需要css控制。
给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。
给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。

表格的跨行与跨列

rowspan: 指定要跨的行数。
colspan : 指定要跨的列数。
课程表效果图：
在这里插入图片描述
代码如下：

<table border="1" cellspacing="0">
      <caption>
        课程表
      </caption>
      <thead>
        <tr>
          <th>项目</th>
          <th colspan="5">上课</th>
          <th colspan="2">活动与休息</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>星期</td>
          <td>星期一</td>
          <td>星期二</td>
          <td>星期三</td>
          <td>星期四</td>
          <td>星期五</td>
          <td>星期六</td>
          <td>星期日</td>
        </tr>
        <tr>
          <td rowspan="4">上午</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>英语</td>
          <td>物理</td>
          <td>数学竞赛</td>
          <td rowspan="4">休息</td>
        </tr>
        <tr>
          <td>数学</td>
          <td>语文</td>
          <td>化学</td>
          <td>物理</td>
          <td>英语</td>
          <td>篮球比赛</td>
        </tr>
        <tr>
          <td>化学</td>
          <td>语文</td>
          <td>体育</td>
          <td>历史</td>
          <td>地理</td>
          <td>每周一考</td>
        </tr>
        <tr>
          <td>体育</td>
          <td>化学</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>社会实践</td>
        </tr>
        <tr>
          <td rowspan="2">下午</td>
          <td>语文</td>
          <td>英语</td>
          <td>数学</td>
          <td>物理</td>
          <td>数学</td>
          <td>英语角</td>
          <td rowspan="2">休息</td>
        </tr>
        <tr>
          <td>化学</td>
          <td>物理</td>
          <td>地理</td>
          <td>生物</td>
          <td>体育</td>
          <td>自由活动</td>
        </tr>
      </tbody>
    </table>
  </body>

常用的几个标签

在这里插入图片描述

表单

表单的基本结构

在这里插入图片描述

表单常用控件

文本输入框

<input type="text" />
常用属性如下：
name 属性：数据的名称。
value 属性：输入框的默认输入值。
maxlength 属性：输入框最大可输入长度。

密码输入框

<input type="password" />
常用属性如下：
name 属性：数据的名称。
value 属性：输入框的默认输入值(一般不用，没有意义)。
maxlength 属性：输入框最大可输入长度。

单选框（type 属性中的 redio 值定义）

<input type="radio" name="gender" value="female" checked /> 男
<input type="radio" name="gender" value="male" /> 女
常用属性如下：
name 属性：数据的名称，注意：想要单选效果，多个 redio 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该单选按钮默认选中。

复选框（type 属性中的 checkbox 值定义）

<input type="checkbox" name="hobby" value="smoke" />抽烟
<input type="checkbox" name="hobby" value="drink" checked />喝酒
<input type="checkbox" name="hobby" value="perm" />烫头
常用属性如下：
name 属性：数据的名称，注意：想要多选效果，多个 checkbox 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该复选按钮默认选中。

隐藏域

<input type="hidden" name="tag" value="100">	
常用属性如下：
用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。
name 属性：数据的名称。
value 属性：提交真正的数据值。

提交按钮

<button>确认</button>
<input type="submit" value="确认"/>	
注意：
   1. button 标签 type 属性的默认值是 submit。
   2. button 不要指定 name 属性。
   3. input 标签编写的按钮，使用 value 属性指定按钮文字。

重置按钮

<button type="reset">重置</button>
<input type="reset" value="重置">
注意：
   1. button 不要指定 name 属性。
   2. input 标签编写的按钮，使用 value 属性指定按钮文字。

普通按钮

<button type="button">我是一个普通按钮</button>
<input type="button" value="我是一个普通按钮">
注意：
   普通按钮的 type 值为 button , 若不写 type 值是 submit 会引起表单的提交。

文本域

<textarea name="msg" cols="22" rows="10">我是文本域</textarea>
常用属性如下：
    1. rows 属性：指定默认显示行数，会影响文本域的高度。
    2. cols 属性：指定默认显示列数，会影响文本与的宽度。
    3. 不能编写 type 属性，其他属性，与普通文本输入框一致。

下拉框

<select name="from">
    <option value="京" selected>北京</option>
    <option value="豫">河南</option>
    <option value="冀">河北</option>
    <option value="沪">上海</option>
</select>
常用属性及注意事项：
    1. name 属性：指定数据名称。
    2. option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字；
    如果设置了 value 属性，提交的数据就是 value 的值 （建议设置 value 属性）
    3. option 标签设置了 selected 属性，表示默认选中。

禁用表单控件

含有表单控件的标签设置 disabled 既可禁用表单控件。

input、textarea、button、select、option 都可以设置 disabled 属性。

label 标签

label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与 label 关联的方式如下：

让 label 标签的 for 属性的值等于表单控件的 id。
把表单控件套在 label 标签的里面。

示例代码：
第一种示例：

<!-- lable 标签中的 for 属性值要和 表单控件中的 id 值相对应 -->
 <label for="mima">密码：</label>
 <input id="mima" type="password" name="pwd" value="123" maxlength="6" />

第二种示例：

<!-- 把表单控件套在 label 标签的里面 -->
 <label>
   密码：<input id="mima" type="password" name="pwd" value="123" maxlength="6" />
 </label>

fieldset 与 legend 的使用（了解）

fieldset 可以为表单控件分组，legend 标签是分组的标题。
示例代码：

<fieldset>
        <legend>主要信息</legend>
        性别：
        <input type="radio" name="gender" value="female" checked /> 男
        <input type="radio" name="gender" value="male" /> 女<br />
        爱好：
        <input type="checkbox" name="hobby" value="smoke" />抽烟
        <input type="checkbox" name="hobby" value="drink" checked />喝酒
        <input type="checkbox" name="hobby" value="perm" />烫头<br />
        其他：
        <textarea name="msg" cols="22" rows="10">我是文本域</textarea><br />
        <!-- 下拉框 -->
        籍贯：
        <select name="from">
          <option value="京">北京</option>
          <option value="豫">河南</option>
          <option value="冀">河北</option>
          <option value="沪">上海</option>
        </select>
      </fieldset>

效果如下：
在这里插入图片描述

表单总结

在这里插入图片描述

框架标签

在这里插入图片描述
iframe 标签的实际应用：

在网页中嵌入广告。
与超链接或表单的 target 配合，展示不同的内容。

示例代码：

<!-- 嵌入一个普通网页 -->
    <iframe src="https://www.baidu.com" width="1000" height="900"></iframe>

    <!-- 与超链接的target属性配合使用 target属性值可以随便写 -->
    <a href="https://www.taobao.com" target="abc">点我看淘宝</a>
    <iframe name="abc" frameborder="0" width="900" height="800"></iframe>

    <!-- 与表单的target属性配合使用 target属性值可以随便写 -->
    <form action="https://so.toutiao.com/search" target="def">
      <input type="text" name="keyword" />
      <input type="submit" value="搜索" />
    </form>
    <iframe name="def" frameborder="0" width="1000" height="800"></iframe>

字符实体

在HTML中我们可以使用一种特殊的形式内容，来表示某个符号，这种特殊形式的内容就是HTML实体，比如小于号 < 用于定义HTML标签的开始。如果我们希望浏览器正确的显示这些字符，我们必须在HTML源码中插入字体字符。
字体字符的组成： 由三部分组成一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个英文分号。
在这里插入图片描述
完整实体列表参考：实体列表官网

HTML 全局属性

常用属性：

完整全局属性参考：全局属性

meta元信息

配置字符编码

<meta charset="UTF-8">

2.针对 IE 浏览器的兼容性配置。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

3.针对移动端的配置。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.配置网页关键字

<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

5.配置网页描述信息

<meta name="description" content="80字以内的一段话，与网站内容相关">

6.针对搜索引擎爬虫配置：

<meta name="robots" content="此处可选值见下表">

在这里插入图片描述

7.配置网页作者

<meta name="author" content="作者名称">

8.配置网页生成工具

<meta name="generator" content="Visual Studio Code">

9.配置定义网页版权信息

<meta name="copyright" content="2023-2027©版权所有">

10.配置网页自动刷新

 <!-- content属性中的10是10秒后刷新，url=网址是需要跳转的地址 -->
  <meta http-equiv="refresh" content="10;url=https://www.baidu.com">

完整的网页信息，参考：文档级元数据元素

林泽JAVAEE

关注

23
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫