前端基础笔记记录（html）

最新推荐文章于 2024-08-22 11:06:05 发布

要努力啊啊啊！！

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量147

点赞数

文章标签：前端笔记 html

本文链接：https://blog.csdn.net/m0_50488257/article/details/131834247

版权

前端的基本框架（文件后缀名为html）

快捷方式，在vocode中创建html文件，输入!直接全部输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

快捷键(Visual Studio Code)

Shift + alt +f 调整代码格式

Ctrl +f 快速查找内容

Ctrl +h 替换

Ctrl +s 保存文件

H5标签介绍

1.<h>标签为标题标签，标题大小依次递减，1级最大，6级最小

代码展示

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

样式

标签加属性align="right"|"left"|"center"

    <h1 align="right">一级标题</h1>
    <h2 align="left">二级标题</h2>
    <h3 align="center">三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

样式展示：

2.<p>段落标签

<p>创建一个便签</p>

样式展示

一个段落便签内容需要换行在内容中加入<br>

 <p>创建一<br />个便签</p>

样式展示

3.hr便签，在html中显示一条水平线

<hr>

样式

加属性

Color 添加颜色属性 wideth 添加长度属性 size 添加高度属性 align添加位置属性

    <hr color="red" size="30px" width="100px" align="center">

样式展示

4. <img >图片标签（为单标签）

<img src="47.jpg" alt="wegame" width="300px" height="300px" title="wegame图片">

Src属性为图片路径 alt 当图片无法显示时显示文字，width为图片宽度，height图片高度

Title为鼠标停在图片上是提示文字

样式展示

5.<a href=’’></a> 超文本连接

<a href="https://www.baidu.com/">点击跳转百度</a>

样式展示(点击文字跳转百度)

未点击前，显示蓝色

点击后，显示紫色

鼠标是点击时，显示红色

文本标签

<em> 定义着重文字
<b> 定义粗体文本
<i> 定义倾斜字
<strong> 定义加重语气
<span> 元素没有特殊含义
<def> 定义删除字(有一条横线，把字划掉)

代码演示

   <em>em字体</em>
    <b>b字体</b>
    <i>i字体</i>
    <strong>strang字体</strong>
    <span>span字体</span>
    <del>del字体</del>

样式展示

列表标签

1.有序标签 <ol> <li> </li> <li> </li> </ol>

 <ol>
     <li>香蕉</li>
     <li>苹果</li>
     <li>荔枝</li>
   </ol>

样式展示

<ol type=’’> <ol > 中的type标签决定排序的序号

1表示项目用数字
a 表示项目用小写字母
A 表示项目用大写字母
i 表示项目中用小写罗马数字
I 表示项目用大写罗马数字标号

代码展示

<ol type="1">
  <li>香蕉</li>
  <li>苹果</li>
  <li>葡萄</li>
</ol>
<ol type="A">
  <li>香蕉</li>
  <li>苹果</li>
  <li>葡萄</li>
</ol>
<ol type="a">
  <li>香蕉</li>
  <li>苹果</li>
  <li>葡萄</li>
</ol>
<ol type="I">
  <li>香蕉</li>
  <li>苹果</li>
  <li>葡萄</li>
</ol>
<ol type="i">
  <li>香蕉</li>
  <li>苹果</li>
  <li>葡萄</li>
</ol>

样式展示

2.无序列表<ul> <li> </li> </ul>

加入type属性改变项目的形状

disc 实心圆

circle 空心圆

square 实心正方形

None 什么都没有

代码展示

<ul type="disc">
    <li>香蕉</li>
    <li>苹果</li>
    <li>葡萄</li>
   </ul>
   <ul type="circle">
    <li>香蕉</li>
    <li>苹果</li>
    <li>葡萄</li>
   </ul>
   <ul type="square">
    <li>香蕉</li>
    <li>苹果</li>
    <li>葡萄</li>
   </ul>
   <ul type="none">
    <li>香蕉</li>
    <li>苹果</li>
    <li>葡萄</li>
   </ul>

样式展示

标签表格

table 表格标签
tr 表格行
td 表格列

代码展示

  <table>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
 </table>

样式展示

表格属性

broder 增加表格边框
width 改变表格宽度
Height 改变表格高度

代码展示

<table border="1" width="300px" height="200px">
    <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
 </table>

样式展示

合并单元格操作

水平合并cosspan
垂直合并rowspan

如图

合并单元格1，单元格2。
合并单元格4，单元格8。
合并单元格5，单元格6，单元格9，单元格10。

代码展示：

 <table border="1" width="300px" height="200px">
    <tr>
        <td colspan="2">单元格1,2 </td>
        <td>单元格3 </td>
        <td rowspan="2">单元格4,8 </td>
     </tr>
     <tr>
         <td colspan="2" rowspan="2">单元格5,6,9,10 </td>
         <td>单元格7 </td>
  
     </tr>
     <tr>
         <td>单元格11 </td>
         <td>单元格12 </td>

样式展示

form表单

form表单是由容器和控件组成，一个表单一般应该包含用户填写信息的输入框，按钮等，表单就是容器，他能够容纳各种各样的控件

创建表单代码

<form action="index" method="post" name="index"> 
</form>

表单元素

输入文本框

<input type="text">

输入密码框

<input type="password">

确认按钮2种，input框加submit和button

<input type="submit" value="注册">
<button>提交</button>

样式展示

要努力啊啊啊！！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端基础笔记记录（html）

代码展示<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>样式标签加属性align="right"|"left"|"center"<h1 align="right">一级标题</h1><h2 align="left">二级标题</h2><h3 align="center">三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
复制链接

扫一扫