Mao-Design的博客

外观

HTML

3465字约12分钟

2024-12-02

h 标签（标题）

<h1> 这是一级标签 </h1>
1.加了标题标签的文字字体会加粗变大
2.一个标题会单独占用一行
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

p 标签（文本）

<p> 这是一个段落 </p>
1.文本在一个段落中会根据浏览器窗口的大小自行换行
2.段落与段落之间有空隙
3.一个 p 标签单独占一行

p 和 h 标签里面不能放块级元素（如 div 之类的）

br 标签（换行）

<br>
1. br标签是一个单标签
2. br标签只是简单的开始新的一行，所以用br换行的文本是没有空隙的

文本格式化标签

语义标签说明
加粗<strong></strong> 或者 <b></b>更推荐是用 strong 标签加粗，语义更强烈
倾斜<em></em> 或者 <i></i>更推荐是用 em 标签倾斜，语义更强烈
删除线<del></del> 或者 <s></s>更推荐是用 del 标签删除线，语义更强烈
下划线<ins></ins> 或者 <u></u>更推荐是用 ins 标签下划线，语义更强烈

strong标签（文字加粗）

em标签（文字倾斜）

del标签（删除线）

ins标签（下划线）

重点记加粗和倾斜

div

块元素，可以设置宽高

<div> </div>
一个div标签就表示一个区域，相当于是一个盒子
1.div标签用来布局，div默认占用一行，我们可以使用css来改变div的大小，一个div就相当于是一个大盒子
2.div标签没有语义，就是单纯用来布局的

span

行内元素，不能设置宽高

<span> </span>
一个span标签就表示一个区域，相当于是一个盒子
1.span标签也是用来布局的，一行上可以有多个span，span标签就相当于是一个小盒子
2.span标签没有语义，就是单纯用来布局的

img 图片

图片属于行内块元素

<img src="" />
src是img的必须属性，它是用来指定图像的路径的
  1. 图片标签的特点：图片标签可以有多个属性，但这些属性都必须写在标签后面
  2. 属性之间没有顺序之分，但属性与属性之间要用空格分开
  3. 属性的建议采取值对格式，即src="" ，属性="属性值"
属性属性值说明
src图像路径必须属性
alt文本替换文本，图像不能正常显示的时候显示的文字
title文本提示文本，鼠标放在图像上，显示文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像边框的粗细

src

alt

title

width 和 height

border

a标签（链接）

<a> </a>
链接里面不能放链接
属性作用
herf用于指定网页链接的，该属性是超链接里面必写的属性
target指定链接的打开方式，_self 为默认值，就是在当前窗口打开；_blank 则是在新窗口打开

外部链接

<!-- 外部链接，就会跳转到外部的网页，像百度之类的 -->
<a href="https://www.baidu.com">外部链接</a>

内部链接

<!-- 内部链接，就会跳转到自己的另一个网页 -->
<a href="index.html">内部链接</a>

空部链接

<!-- 空部链接，就是点击该链接不会有什么反应 -->
<a href="#">空链接</a>

下载链接

<!-- 下载链接 -->
<!-- 不是什么文件都可以使用下载链接，像图片之类的使用下载链接是不能直接下载的，只能在新窗口打开
所以提供的下载文件必须是压缩包或则是安装程序，这样才能正常下载 -->
<a href="images/屏幕截图(3).7z">下载链接</a>
<a href="images/7z1900-x64.exe">exe</a>

网页元素链接

<!-- 网页元素链接 -->
<!-- 超链接里面嵌套一个图片标签，这样该图片也就具备的有超链接的功能了 -->
<a href="https://www.baidu.com"><img src="images/屏幕截图(3).png"></a>

锚点链接

<!-- 锚点链接，相当于目录一样，可以通过锚点标签快速的定位到文章的各个位置 -->
<a href="#id">锅锅</a>
<a id="id">大家好，我是练习两年半的偶像练习生</a>

注释

<!-- 这是一个注释标签 -->

table 标签 （表格）

表格主要是用于显示和展示数据的，它可以让我们的数据变得非常的工整，且可读性非常好，特别是后台展示数据的时候，表格可以把繁杂的数据整理得井井有条

注意：表格不是用来布局的，表格是用来展示数据的

表格的基本代码

<table>
	<tr>
    	<td>只是一个单元格</td>
    </tr>
</table>
  1. table 表示的是一个表格
  2. tr 表示的是一行，该标签必须写在 table 标签里面
  3. td 表示的是一个单元格，该标签必须写在 tr 标签里面（字母 td 表示的是 table date ，即数据单元格内容）
  4. th 表示的是表头单元格，是 table head 标签的缩写，表头单元格和普通单元格一样占一个单元格，唯一的区别就是表头的文字会被加粗

表格的属性（css）

属性名属性值描述
alignleft、center、right设置表格的对齐方式
border1px 或更多设置表格的边框
cellpadding像素值设置单元格内边距，就是单元格与内容之间的距离，默认为 1px
cellspacing像素值设置单元格之间的距离，默认为 2px
width像素值或百分比设置表格宽度
height像素值或百分比设置表格高度

表格体系

也就是说一个 table 标签就表示的是一个表格，tr 表示的是该表格的一行，td 表示的是该表格中某一行中的一个单元格

表格体系

表头

  1. 用于定义表格的头部，标签内必须要有 <tr></tr> 标签，该标签一般位于第一行
  2. 该标签显示的内容在表格的第一行，其优先级高于 <tr> 标签以及 <tbody>标签 ，而<tr> 标签以及 <tbody> 标签则是同级的
  3. 表头单元格也是单元格，常用于表格的第一行，突出重要性，表头单元格里面的文字会加粗并居中显示
<thead>
    <tr>
    	<th></th>
    </tr>
</thead>

表格主体

表示表格主体，主要用于存放数据本体

<tbody>
    <tr>
    	<td></td>
    </tr>
</tbody>

合并单元格

  1. 跨行单元格：rowspan
  2. 跨列单元格：colspan

合并单元格：

  1. 先确定是跨行还是跨列合并
  2. 先找到目标单元格，写上合并方式=合并的单元格数量
  3. 删除多余的单元格

合并跨行单元格

<table border="1" width="500" height="200" cellspacing="0">
    <tr>
        <!-- 合并跨列单元格 -->
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<table border="1" width="500" height="200" cellspacing="0">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <!-- 合并跨行单元格 -->
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

效果图

ul标签（无序列表）

ul列表（重点）、有序列表和自定义列表

<ul> 在HTML中表示无序列表，列表项则使用 <li> 标签定义的

<ul>
	<li>列表一</li>
	<li>列表二</li>
	<li>列表三</li>
</ul>

无序列表注意点：

  1. 无序列表的各个列表项是没有顺序之分的，是并列的
  2. <ul></ul> 中只能嵌套 <li></li>标签，嵌套别的标签或则文字是不允许的，除非在 <li> 里面嵌套
  3. <li> 于 <li> 之间相当于是一个容器，可以容纳所有元素
  4. 无序列表会带有自己的样式属性，在实际使用中，我们会使用CSS来设置

去掉li标签前面的样式

list-style: none;

ol标签（有序列表）

  1. 有序列表和无序列表一样，只不过有序列表排序的方式是数字
  2. 有序列表是有顺序的

有序列表的语法：

<ol>
	<li>列表一</li>
	<li>列表二</li>
	<li>列表三</li>
</ol>

有序列表注意点：

  1. <ol></ol> 中只能嵌套 <li></li>标签，嵌套别的标签或则文字是不允许的，除非在 <li> 里面嵌套
  2. <li> 于 <li> 之间相当于是一个容器，可以容纳所有元素
  3. 有序列表会带有自己的样式属性，在实际使用中，我们会使用CSS来设置

去掉li标签前面的样式

list-style: none;

dl标签（自定义列表）

  1. dt 和 dd 标签内则可以使用容纳所有元素
  2. 自定义列表的使用组合：一般是一个 dt标签 和多个 dd标签 一起使用
  3. dt标签 和 dd标签 是同级关系，所以显示的顺序和代码的顺序是一样的
  4. dt的文字是左对齐，dd的文字是右对齐

语法格式：

<dl>
    <dt>选项选项</dt>
    <dd>选项</dd>
    <dt>选项</dt>
</dl>

form标签（表单 ）

表单就是用于收集用户输入的信息，然后在传给服务器的

语法格式：

<form action="" method="" name="">

</form>

常用属性

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址
methodget / post用于设置表单数据的提交方式，其取值为 get / post
name名称表单的名称，用于区分不同的表单

input属性

属于行内块元素，可以设置宽高

<input type="text" value="请输入字体">
属性属性值描述
name自定义文字定义 input 元素的名字（相当于设置名字）
value自定义文字规定 input 元素中的值（比如文本框中默认显示的文字）
checkedchecked设置checked的元素则为默认选项
maxlength正整数规定输入内容的最大长度
type自定义表单类型自定义表单类型

type属性（表单类型）

属性值属性描述
button定义点击按钮（一般境况下，和JavaScript一起使用）
checkbox定义复选框
file定义一个上传文件的按钮（该按钮自带换行）
hidden定义隐藏的输入字段
image定义图片形式的提交按钮
password定义一个密码框
radio定义单选按钮
reset定义重置按钮，重置按钮会清楚表单中的的所有数据
submit定义提交按钮，提交按钮会把表单数据提交给服务器
text定义一个输入框，默认宽度为20个字符
  1. name 和 value 是每个表单元素都有的属性值，主要是给后台人员使用
  2. 多个单选按钮或则多个复选框，它们的name名字要一样，这样才能表示多个单选按钮或则多个多选复选框是一组的
<form action="" method="" name="">
    <!-- 点击按钮，两种写法 -->
    <input type="button"><br>
    <button>按钮</button>
    
    <!-- 复选框 -->
    <input type="checkbox" name="n"><input type="checkbox" name="n"><br>
    
    <!-- 上传本地文件按钮 -->
    <input type="file">
    
    <!-- 定义隐藏的输入字段 -->
    <input type="hidden"><br>
    
    <!-- 图片样式按钮 -->
    <input type="image" src="../Demo02/images/向上.png"><br>
    
    <!-- 密码框 -->
    <input type="password" value="123"><br>
    
    <!-- 单选按钮 -->
    <input type="radio" name="gender" checked="checked"><input type="radio" name="gender"><br>
    
    <!-- 重置按钮 -->
    <input type="reset"><br>
    
    <!-- 提交按钮 -->
    <input type="submit"><br>
    
    <!-- 输入框 -->
    <input type="text" value="请输入"><br>
</form>

label属性

label标签的作用是给input元素定义标签的

label用来绑定一个表单元素

当点击lable标签里面的文字时会自动点击绑定的表单

语法格式

<from>
    <label for="man">男</label>
    <input type="radio" name="gender" id="man">
    <label for="woman">女</label>
    <input type="radio" name="gender" id="woman"><br>
</from>

注意：label标签中的for属性要和要绑定的表单元素中的ID名相同

select标签（下拉列表）

想让用户有多个选择，但又想节约网页空间，那么就可以使用select标签

语法格式

<form>
    <select>
        <option>请选择</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</form>

下拉列表

注意：

  1. 在select中至少包含一对option标签
  2. 在某个option中定义一个selected="selected"，则表示默认选择该项；如果没有 selected="selected" 参数，那么该下拉列表默认显示的是列表一中的内容

textarea标签（文本域）

当用户想输入多个内容时，则可以使用文本域来实现

语法格式

<form>
    <textarea>请输入你要输入的内容</textarea>
</form>

文本域

取消文本框轮廓

input {
    outline: none;
}
<input type="text">

禁止拖动文本域大小

textarea {
    width: 200px;
    height: 100px;
    resize: none;
}
<textarea></textarea>