探索HTML：从入门到精通Web开发（一）

洁洁！

已于 2023-12-03 21:04:57 修改

阅读量1.3k

点赞数 57

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

于 2023-10-18 16:37:25 首次发布

本文链接：https://blog.csdn.net/2202_75623950/article/details/133881589

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端

一：图片属性
二：音频标签
三：视频标签
四：链接标签
五：列表标签
六：表格
- 6.1合并单元格
七：input标签
八：select系列
九：文本域标签
十：label标签
十一：语义化标签
十二：字符实体
十三：图书推荐

一：图片属性

属性名： src
属性值：路径，常用相对路径
路径可以分为以下几种：

同级路径：直接写图片名或者./+图片名
下级路径：写文件夹名字 + 图片名
上级路径：先到上一文件夹到上一级目录 …/ 当看到目标文件时再进入再找图片名
属性名：title
属性值：提示文本当鼠标悬停是才显示的文本

属性名：alt
替换文本，当图片不显示时显示的文本

属性名：width height
宽度和高度
只设置一个，另一个会自动调整（不会使比例失调）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body> 
  <img src="./dir.png" alt="错误" title="我是title的效果" width=“20”>

二：音频标签

<!-- 音频标签 ，在页面中·插入音频-->
<audio src="./music.mp3" controls autoplay loop></audio>

src      音频的路径
controls 显示播放的控件 
autoplay 自动播放（部分浏览器不支持）
loop     循环播放

三：视频标签

 <!-- 视频标签 ，在页面中·插入视频-->
  <video src="./video.mp4" controls loop autoplay muted></video>

src   视频的路径
controls 显示视频播放的控件 
autoplay 自动播放视频（谷歌浏览器可配合muted进行默认播放）
loop     循环播放

四：链接标签

使用场景：点击之后，从一个页面跳转到另一个页面

  <a href="./目标网页.html">超链接</a>

特点：双标签内容可以包裹内容
如果需要a标签点击之后去指定页面，即需设置a标签的href属性

属性： 
_self 默认值，在当前窗口跳转（覆盖原网页）
_blank 在新窗口中跳转（保留原网页）

<a href="./one.html" target="_blank">html</a>
   <a href="https://www.baidu.com/" target="_blank">baidu</a>

五：列表标签

5.1.无序列表

ul表示无序列表的整体
li表示无序列表的每一项
ul标签中只能放li标签但是li中可以放其他标签比如p什么的

  <ul>
    <li>123</li>
    <li>321</li>
  </ul>

5.2.有序列表

ol表示有序列表的整体
li表示有序列表的每一项
ol标签中只能放li标签但是li中可以放其他标签比如p什么的

 <ol>
    <li>jiejie</li>
    <li>xiaojiejie</li>
  </ol>

3.自定义列表

dl表示自定义列表的整体用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容
dl标签中只能放dd/dt标签但是dd/dt中可以放其他标签比如p什么的

<dl>
  <dt>
    <dd>123</dd>
  </dt>
</dl>

dd前会默认显示缩进效果

六：表格

基本标签： table 表格整体，可用于包裹多个tr
> tr 表格每行，可以用于包裹td
> td 表格单元格，可用于包裹内容
caption 表格大标题表示在表格整体大标题，默认在表格整体顶部居中位置显示
th 表格单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

6.1合并单元格

具体步骤如下所示：
1.明确合并哪几个单元格
2.通过左上原则，确保保留谁删除谁
上下合并只保留最上的，删除其他
左右合并只保留最左的，删除其他
3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
代码如下所示：

<table border="1" width="200" height="300">
  <caption>1</caption>
  <tr>
    <th>xioajiejie</th>
    <th>表题</th>
  </tr>
  <tr>
    <td>jiejie</td>
    <td>2</td>
  </tr>
  <tr>
    <td colspan="2">jie</td>
   
  </tr>
</table>

如下所示：

表题
xioajiejie	1
jiejie	2
jie

七：input标签

type 属性值
text 文本框，用于输入单行文本
password 密码框用于输入密码

radio 单选框用于多选一
name 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked 默认选中

checkbox 多选框用于多选多
checked 默认选中

file 文件选择用于之后上传文件
multiple 多文件上传

reset 重置按钮用于重置，点击之后恢复表单默认值
submit 提交按钮用于提交，点击之后提交数据给服务器
button 普通按钮，默认无功能，之后配合js添加功能

<form action="">
  action是提交地址
 <input type="text" placeholder="情输入账号">
 <input type="password" placeholder="请输入密码">
 <input type="reset">
</form>

 <input type="radio" name="sex" checked>
 <input type="radio" name="sex" checked>#此时默认选择第二个
 <input type="checkbox" name="sex" checked>
 <input type="file" >
 <input type="file" multiple>
 <input type="submit" value="随心所欲提交">
 <input type="button" value="普通按钮">

button可以做标签，可以做任何功能
 <button> 我是标签</button> 
  <button type="submit">提交按钮</button>
  <button type ="reset">重置按钮</button>

八：select系列

下拉菜单
select标签 下拉菜单整体
option标签 下拉菜单的每一项
selected 下拉菜单默认选中

   <select name="" id="">
    <option value="">北京</option>
    <option selected value="">上海</option>
   </select>

默认显示第一项 option标签

九：文本域标签

标签名：textarea
可在网页中提供可输入多文本的表单控件

<textarea name="" id="" cols="30" rows="10"></textarea>

十：label标签

常用与绑定内容与表单标签的关系

使用方法一：
使用label标签把内容（文本）包裹起来
在再表单标签上添加id属性
在label标签的for属性中设置对应id属性值

<input type="radio" id="nam"><label for="nam">nam</label>

第二种方法：
直接使用label标签把内容和表单标签一起包裹起来
需要把label标签中的for属性删除即

<label> <input type="radio">wen </label>

十一：语义化标签

做手机的网页常用（有语义化的标签）：

<head>网页头部</head>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>

十二：字符实体

空格用  代替

一个   代表一个空格，从而可以输出多个空格

结尾

  <h1>文章标题</h1>
  <p>段落标签</p>
  <strong>重要加粗</strong> <b>不重要加粗</b>
  <ins>下划线</ins> <u>下划线</u>
  <em>倾斜</em> <i>倾斜</i>
  <del>删除线</del> <s>删除线</s>

  单标签：
  <br>换行标签
  <hr>分割不同的主题内容的水平线
</body>
</html>

十三：图书推荐

请添加图片描述

《C++从入门到精通（第5版）》从初学者角度出发，以通俗易懂的语言和丰富多彩的实例，详细讲解了C++程序开发需要掌握的知识。本书分为4篇共18章：第1篇是基础知识，包括绪论，数据类型，运算符与表达式，条件判断语句，循环语句，函数，数组、指针和引用，以及构造数据类型；第2篇是核心技术，包括面向对象编程，类和对象，以及继承与派生；第3篇是高级应用，包括模板、标准模板库、RTTI与异常处理、程序调试、文件操作和网络通信；第4篇是项目实战，结合人事考勤管理系统，依照软件项目的开发流程，讲述如何进行实际开发。书中所有知识都结合具体实例进行介绍，涉及的程序代码给出了详细的注释，读者可以轻松领会C++的强大功能，快速提高开发能力。
购书链接京东：购书链接

文章到此结束，欢迎点击下方名片一起交流合作。