一天复习完HTML

最新推荐文章于 2022-11-04 00:29:55 发布

才不是小弱鸡

最新推荐文章于 2022-11-04 00:29:55 发布

阅读量97

点赞数

分类专栏： web HTML

本文链接：https://blog.csdn.net/qq_40996739/article/details/108581339

版权

web 同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

0x00 DOCTYPE和lang以及charset

DOCTYPE的作用就是告诉浏览器使用的是哪个版本的HTML

<!DOCTYPE html> // 表示使用的版本是html5

lang用来定义文档中显示所用的语言

<html lang='en'></html> // 表示页面是英文页面
<html lang='zh-CN'></html> // 表示页面是中文页面

charset定义编码方式

<meta charset="UTF-8">

0x01 标题标签

<h1>-<h6>都是标题标签，重要性依次递减，一个页面中只能有一个h1

<h1>一级标签</h1> // 每个标签独占一行，并且会有加粗加大等效果

0x02 段落标签和换行标签

<p>标签就是段落标签，可以将文章分为多个段落

<p>一个新的段落</p>

<br />标签为换行标签，他可以强制换行,<br />换行与上文间隙没有<p>那么大

0x03 文本格式化标签

// 这两个都是加粗字体的标签，推荐使用<strong>
<strong></strong>
<b></b>  
// 这两个都是倾斜字体的标签，推荐使用<em>
<em></em>
<i></i>
// 这两个都是删除线的标签，推荐使用 <del>
<del></del>
<s></s>
// 这两个都是下划线的标签，推荐使用<ins>
<ins></ins>
<u></u>

0x04 div与span

// 这两个标签都是没有语义的标签，是用来装内容的盒子
// 这两个标签在布局中使用的非常广泛
<div></div> // 意为分割分区，块状元素，单独占一行
<span></span> // 意为跨度跨距，行内元素

0x05 img标签与路径

// src是图片的路径 alt是图片未成功加载时显示的内容 title是鼠标放在图片上显示的信息
<img src="image/test1.jpg" alt="error" title="这是一张图片" />

// 当图片与html页面同级时
<img src="test1.jpg" />
// 当图片在html页面下级时
<img src="./images/test1.jpg" />
// 当图片在html上级时
<img src="../test1.jpg" />

0x06 链接标签

// href用于指定url链接的地址,target用于指定打开链接的方式，默认为_self，在本页面中打开，_blank为在新页面中打开
<a href="www.bilibili.com" target="_blank"></a>
// 另外，当href中为文件时，点击<a>标签就可以直接下载文件
<a href="test.zip"></a>
// 当href使用选择器时可以作为网页的锚点
<a href="#information"></a>

0x07 特殊字符

0x08 表格标签

<!--  table标签表示一个表格，tr标签表示这个表格的一个行，td标签表示这个表格的一个单元格,th则是表头单元格标签-->
<!--  thead标签表示表格头部区域，tbody表示表格主体部分-->
  <table>
    <thead>
      <tr>
        <th>name</th>
        <th>sex</th>
        <th>age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>joker</td>
        <td>man</td>
        <td>18</td>
      </tr>
    </tbody>
  </table>

除此之外，表格标签还有一个合并单元格的操作，是通过行内样式实现的，跨行合并colsrow，跨列合并colspan

0x09 列表标签

无序列表

<!--  各个li平级，没有顺序-->
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

有序列表

<!--  有序列表，每个li之间有顺序，会按照顺序来排序-->
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>

自定义列表

<!--  自定义列表，dl标签表示自定义列表，dt定义项目名字，dd描述项目-->
<!--  一般用在ul中使用dl，这种用法多用于网页的底部的信息栏-->
  <dl>
    <dt>公司简介</dt>
    <dd>公司背景</dd>
    <dd>公司产品</dd>
    <dd>公司业务</dd>
  </dl>

0x0a 表单

表单域

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

表单控件-input

type属性

<!--  单选框时设置name全为一个值，则可以实现单选，单选复选框规定要设置成同一个name-->
  <form action="url地址" method="提交方式" name="表单域名称">
    <input type="text" name="test-input" value="这是一个输入框">
  </form>

表单控件-select

  <form action="url地址" method="提交方式" name="表单域名称">
    <select>
      <option>select1</option>
      <option>select2</option>
      <option selected="selected">select3</option>
    </select>
  </form>

0x0b label标签

一般来说配合input使用，可以实现点击label也能选中input框的功能

  <form action="url地址" method="提交方式" name="表单域名称">
    <label for="man">男</label><input type="radio" name="test-radio" id="man">
  </form>

0x0c textarea标签

<!--cols表示文本框一行最多输入多个个字，rows表示文本框最多有多少行-->
  <form action="url地址" method="提交方式" name="表单域名称">
    今日反馈：
    <textarea cols="30" rows="3">
      请在此处写入今日反馈
    </textarea>
  </form>

0x0d 其他标签

<hr />水平线标签，显示出来就是一条水平线