HTML学习笔记

HTML

Hyper Text Markup Language 超文本标记语言，结构化标准语言，是最基础的网页开发语言。

超文本

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.

标记语言

由标签构成的语言。<标签名称> 如 html，xml
标记语言不是编程语言

1、标签

HTML 标签参考手册 - 功能排序 (w3school.com.cn)

1、文件标签

构成html最基本的标签

<html> </html>:html文档的根标签

<head> </head>：头标签。用于指定html文档的一些属性。引入外部的资源

<head>
    <!-- 指定字符集 -->
    <meta charset = "UTF-8">   
</head>

<title> </title>：标题标签。
<body> </body>：体标签
<!DOCTYPE html>：html5中定义该文档是html文档

2、文本标签

和文本有关的标签

注释：
<h1> </h1> to <h6> </h6>：标题标签，h1~h6:字体大小逐渐递减

<p> </p>：段落标签
<br>：换行标签
<hr>：展示一条水平线
<i>: 字体斜体
<em>: 定义强调文本。
- <i>和<em>显示效果相同，但是意义不同。
- <i>: 仅仅是一种样式／风格需求。
- <em>: 表示“强调”的意思，搜索引擎会了解这些语义，一些屏幕阅读器可能使用不同的inflection，更利于SEO。
<b>: 字体加粗
<strong>：定义语气更为强烈的强调文本。
- <b>和<strong>显示效果相同，但是意义不同
- <b>为了加粗而加粗，是一种样式／风格需求。
- <strong>为了标明重点而加粗，表示该文本比较重要，提醒读者／终端注意。
<font>:字体标签，HTML5 中不支持。请使用 CSS 代替。
<center>: 居中标签。HTML5 中不支持。请使用 CSS 代替。

文本属性

color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例

特殊符号(需要什么符号去百度查)

空格键的空格：无论多少个，只显示一个
空格： 
大于符号(greater than)：>
小于符号(less than)：<
版权符号©：©

3、图片标签`<img>`

<img>：展示图片

属性：

src(必填)：图片地址，可以填相对地址（推荐）和绝对地址，../ 代表上一级目录。
alt(必填 )：图片加载失败会返回的内容（图片地址/图片名不对等原因）
title：鼠标悬停显示的文字
width : 图片规格pixel 像素
height : ...
...

4、列表标签

有序列表（unordered list）

可以通过type属性指定序号的样式，start属性指定序号从哪个数字开始

<ol>
  <li>Java</li>
  <li>Python</li>
  <li>C</li>
  <li>C++</li>
</ol>

<!--
效果：    
		1.Java
		2.Python
		3.C
		4.C++
-->

<ol type="A" start="5">
  <li>Java</li>
  <li>Python</li>
  <li>C</li>
  <li>C++</li>
</ol>

<!--
效果：    
		E.Java
		F.Python
		G.C
		H.C++
-->

无序列表（order list）

可以通过type属性指定序号的样式

<ul>
  <li>Java</li>
  <li>Python</li>
  <li>C</li>
  <li>C++</li>
</ul>

<!--
效果：
		·Java
		·Python
		·C
		·C++
-->

自定义列表（definition list）

<dl>
  <dt>机器语言</dt>
  <dd>Java</dd>
  <dd>Python</dd>
  <dd>C</dd>
  <dd>C++</dd>
  <dd>Go</dd>
</dl>

<!--
效果：    
	机器语言
		Java
		Python
		C
		C++
-->

5、链接标签`<a>`

<a> </a>

<!--
href: 跳转路径 必填
      标签内可以放图片标签作为内容
target: 表示窗口在哪里打开
        _blank  在新窗口打开
        _self   在当前窗口打开（默认）
-->
<!-- 这是个图片链接 -->
<a href="https://limestart.cn/?from=old" target="_blank">
  <img src="../resource/image/小号头像.jpg" alt="图片加载失败了" 
       title="点击跳转到青柠主页" width="300" height="250">
</a><br>



<!--锚链接
1.需要一个标记，定义一个标记
2.跳转到标记
-->
<!--使用name作为 标记 -->
<a name="#top">这里是顶部</a><br>
       ...
<!--跳转到当前页面的#top标记处 -->
<a href="#top">回到顶部</a><br>
<!--跳转到指定页面的#down标记处 -->
<a href="3.图像标签.html#down">跳转到图像标签页的底部</a><br>

<!--功能性链接
邮件链接： mailto:
QQ链接：去QQ推广里面制作链接

图片链接

<!--
href: 跳转路径 必填
      标签内可以放图片标签作为内容
target: 表示窗口在哪里打开
        _blank  在新窗口打开
        _self   在当前窗口打开（默认）
-->

<!-- 这是个图片链接 -->
<a href="https://limestart.cn/?from=old" target="_blank">
  <img src="../resource/image/小号头像.jpg" alt="图片加载失败了" 
       title="点击跳转到青柠主页" width="300" height="250">
</a>

超文本链接

<!-- 这是个超文本链接 -->
<a href="https://www.baidu.com/">点击跳转到百度</a>

锚链接

<!--锚链接
1.需要一个标记，定义一个标记
2.跳转到标记
-->

<!--使用name作为 标记 -->
<a name="#top">这里是顶部</a><br>
       ...
<!--跳转到当前页面的#top标记处 -->
<a href="#top">回到顶部</a><br>
<!--跳转到指定页面的#down标记处 -->
<a href="3.图像标签.html#down">跳转到图像标签页的底部</a><br>

功能性链接

<!--功能性链接
邮件链接： mailto:
QQ链接：去QQ推广里面制作链接 -->

<!-- 邮件链接 -->
<a href="mailto:348689061@qq.com">点击联系我</a><br>

<!-- QQ链接 -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
  <img border="0" src="http://wpa.qq.com/pa?p=2:348689061:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

6、页面结构标签

html5中为了提高程序的可读性，提供了一些标签。

<header> </header>: 标题头部区域的内容（用于页面或页面中的一块区域）
<footer> </footer>: 标记脚部区域的内容（用于整个页面或页面的一块区域）
<section> </section>: Web页面中的一块独立的区域
<article> </article>: 独立的文章内容
<aside> </aside>: 相关内容或应用（常用于侧边栏）
<nav> </nav>: 导航类辅助内容

7、表格标签table

table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
tr：定义行
- bgcolor：背景色
- align：对齐方式
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

<table border="1px">
  <tr>
    <!--colspan 跨列-->
    <td colspan="4"> 1-1 </td>
<!--    <td> 1-2 </td>-->
<!--    <td> 1-3 </td>-->
<!--    <td> 1-4 </td>-->
  </tr>
  <tr>
    <!--rowspan 跨行-->
    <td rowspan="2"> 2-1 </td>
    <td> 2-2 </td>
    <td> 2-3 </td>
    <td> 2-4 </td>
  </tr>
  <tr>
    <td> 3-2 </td>
    <td> 3-3 </td>
    <td> 3-4 </td>
  </tr>

</table>

8、`<div>`和`<span>`

<div> </div>:每一个div占满一整行。块级标签
<span> </span>：文本信息在一行展示，行内标签内联标签

9、视频和音频

<!--视频元素
controls: 控制界面
autoplay: 自动播放（需要浏览器允许）
muted: 静音 （默认不静音）
-->

<!-- 视频 -->
<video src="../resource/video/大气震撼七夕情人节片头.mp4" controls autoplay></video>

<!-- 音频 -->
<audio src="../resource/audio/阿YueYue - 云与海.flac" controls autoplay></audio>

10、内联框架iframe

<!--iframe内联框架
src: 地址
w-h: 宽高
name: 别名-->

<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
        name="this" width="1420px" height="1080px">
</iframe><br>

<!--在iframe的位置显示跳转的页面-->
<a href="https://www.bilibili.com/" target="this">点击跳转到B站</a>

2、表单form(内容多)

用于采集用户输入的数据的。用于和服务器进行交互。

<form> </form>：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

1、表单属性

action：指定提交数据的URL，#为当前页面
method：指定提交方式(必填)，一共7种，2种比较常用
- get：
  1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
  2. 请求参数大小是有限制的。
  3. 不太安全，但是快速
- post:
  1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
  2. 请求参数的大小没有限制。
  3. 较为安全，可以传输大文件
- 如何查看post提交的表单信息？ 检查页面元素 -> 网络 -> 提交之后会有个表单文件，点开 -> Payload

注意：表单项中的数据要想被提交，必须指定其name属性。

2、表单项标签

1、`<input>`

可以通过type属性值，改变元素展示的样式

type: 指定元素的类型，默认为text
- text：文本输入框，默认值
  - placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
- password：密码输入框
- radio:单选框
  1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
  2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
  3. checked属性，可以指定默认值
- checkbox：复选框
  1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
  2. checked属性，可以指定默认值
- file：文件选择框
- hidden：隐藏域，用于提交一些信息。
- 按钮：
  1. submit：提交按钮。可以提交表单
  2. button：普通按钮
  3. image：图片提交按钮
cols：指定列数，每一行有多少个字符
rows：默认多少行。
name: 指定表单元素的名称，表单项中的数据要想被提交，必须指定其name属性 必填
value: 元素的初始值。type 为 radio(单选框) 时必须指定一个值
size: 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength: type为text或password时，输入的最大字符数
checked：type为radio或checkbox时，指定按钮是否是被选中
readonly: 只读
disable: 禁用
hidden: 隐藏（可以用来提交一些默认值）

2、`<label> </label>`

指定输入项的文字描述信息

label的for属性一般会和 input 的 id属性值 对应。
如果对应了，则鼠标移至label区域，会让input输入框获取焦点，点击label也相当于点击input

3、`<select> </select>`

下拉列表

子元素：option，指定列表项
selected: 默认下拉框的选项

4、`<textarea> </textarea>`

文本域

cols：指定列数，每一行有多少个字符
rows：默认多少行。

3、表单中元素值的初级验证

placeholder：提示信息
required：非空验证
pattern: 正则表达式

4、代码举例

<form action="1.我的第一个网页.html" method="get">

  <!--文本输入框input
  type: 文本格式
  -->
  <p>名字： <input type="text" name="username" placeholder="请输入用户名" required></p>
  <p>密码： <input type="password" name="pwd"></p>

  <!--radio单选框
  用name控制分组，实现组的单选
  checked: 默认选中-->
  <p>性别：
    <input type="radio" value="boy" name="sex" checked>男
    <input type="radio" value="girl" name="sex">女
  </p>

  <!--checkbox多选框
  也是用name控制分组
  checked: 默认选中
    -->
  <p>爱好：
    <input type="checkbox" name="hobby" value="code">敲代码
    <input type="checkbox" name="hobby" value="singing">唱歌
    <input type="checkbox" name="hobby" value="game" checked>游戏
    <input type="checkbox" name="hobby" value="chat">聊天
    <input type="checkbox" name="hobby" value="sleep">睡觉
  </p>

  <!--button按钮
   -->
  <p>按钮：
    <input type="button" name="bt1" value="点击变长"><br>
  <!--图片按钮
  具有自动提交的功能，跳转到提交表单的页面-->
    <input type="image" src="../resource/image/QQ头像.jpg" width="300px" height="250px">
  </p>

<!--select下拉框
  selected: 默认下拉框的选项
  name: 列表名称
  -->
  <p>国家（下拉框）：
    <select name="country" id="1">
      <option value="选项的值">中国</option>
      <option value="选项的值">美国</option>
      <option value="选项的值" selected>瑞士</option>
      <option value="选项的值">英国</option>
      <option value="选项的值">巴基斯坦</option>
    </select>
  </p>

<!--textarea文本域
-->
  <p>反馈：
    <textarea name="textarea" id="2" cols="30" rows="10">文本内容</textarea>
  </p>

<!--文件域
  input type="file" name="files"-->
  <p>提交文件：
    <input type="file" name="files">
  </p>

<!--邮件验证-->
  <p>邮箱：
    <input type="email" name="email">
  </p>
  <p>自定义邮箱：
    <input type="text" name="diy_email" required pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
  </p>


<!--URL验证-->
  <p>网址：
    <input type="url" name="url">
  </p>

<!--数字-->
  <p>商品数量：
    <input type="number" name="num" max="100" min="0" step="1">
  </p>

<!--滑块-->
  <p>音量：
    <input type="range" name="voice" max="255" min="0" step="2">
  </p>

<!--搜索框-->
  <p>搜索：
    <input type="search" name="search">
  </p>

<!--增强鼠标可用性-->
  <label for="mark">你点我试试</label>
  <input type="reset" id="mark">
  <p>
    <input type="submit">
    <input type="reset">
  </p>
</form>


<h1>注册post提交</h1>
<form action="1.我的第一个网页.html" method="post">
  <!--文本输入框input
  type: 文本格式
  -->
  <p>名字： <input type="text" name="username"></p>
  <p>密码： <input type="password" name="pwd"></p>
  <p>
    <input type="submit">
    <input type="reset">
  </p>
</form>

posted @ 2022-02-08 12:01 猫的心情阅读(69) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaWeb学习笔记

· XML学习笔记

· HTML5

· HTML-超文本标记语言

· 前端学习——HTML

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

公告

昵称：猫的心情
园龄： 3年1个月
粉丝： 0
关注： 2

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

学习笔记(9)

HTML学习笔记

HTML

1、标签

1、文件标签

2、文本标签

3、图片标签`<img>`

4、列表标签

5、链接标签`<a>`

6、页面结构标签

7、表格标签table

8、`<div>`和`<span>`

9、视频和音频

10、内联框架iframe

2、表单form(内容多)

1、表单属性

2、表单项标签

1、`<input>`

2、`<label> </label>`

3、`<select> </select>`

4、`<textarea> </textarea>`

3、表单中元素值的初级验证

4、代码举例

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

HTML学习笔记

HTML

1、标签

1、文件标签

2、文本标签

3、图片标签<img>

4、列表标签

5、链接标签<a>

6、页面结构标签

7、表格标签table

8、<div>和<span>

9、视频和音频

10、内联框架iframe

2、表单form(内容多)

1、表单属性

2、表单项标签

1、<input>

2、<label> </label>

3、<select> </select>

4、<textarea> </textarea>

3、表单中元素值的初级验证

4、代码举例

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

3、图片标签`<img>`

5、链接标签`<a>`

8、`<div>`和`<span>`

1、`<input>`

2、`<label> </label>`

3、`<select> </select>`

4、`<textarea> </textarea>`