前端学习笔记

HTML5

标记

<!DOCTYPE html><!--规定html5的类型-->
<html lang="en"><!--页面显示的语言-->
<head><!--页头-->
    <meta charset="UTF-8"><!--字符集：万国码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!--页面标签显示的标题-->
</head>
<body><!--文章主体部分写在里面-->
</body>
</html>

标签大部分都有两个互相匹配,少部分只有单个

标签类型:

标题标签：h1~h6

<h1>震惊！</h1>

段落标签:p

<p>这是第二段</p>

换行标签（break）：

   <p>这是第一段<br />这是第二段</p>

四种特殊标签:

 <strong>加粗</strong>
    <b>加粗</b>
    <em>这是倾斜线</em>
    <i>倾斜</i>
    <br />
    <del>删除线</del>
    <s>删除线</s>
    <ins>我是下划线</ins>
    <u>我是下划线</u>

两种盒子标签

 <div>这是头部</div>
    <span>今日价格</span>
    <div>divsion</div>
    <span>span</span>
    <div>每个div单独占一行</div>
    <span>一行可以放多个span</span>

图像标签

 <img src="img.jpg" />
  src是<img>标签的必须属性，它用于指定图像文件的路径和文件名
<h4>alt 替换文本,图像显示不出来可以用文本替换</h4>
    <img src="im1.jpg" alt="pink" />
    <h4>width 给图像设定宽度</h4>
    <h4>height 给图像设定高度</h4>
    <h4>border 给图像设定边框</h4>
    <h4>图像标签可以拥有多种属性，但必须写在标签后面</h4>
    <h4>属性不分先后，之间由空格分隔</h4>
    <h4>属性采取键值对的格式，属性=属性值</h4>

alt:替换文本（当图片无法正常显示时，用这段文本替换）
title：图片注释（光标移至图片显示的文字）
height,width,border分别设定图像的高，宽，以及边框

路径：

相对路径：用的素材相对于html的位置
绝对路径：以盘符为开头的位置信息
以图象为例，如果处于同一级那么src可以直接使用图像名
如果在上一级，那么需要加/
在下一级需要加../
根目录：文件夹的最外面一层

超链接标签：

外部链接：

 <!--href:用于指定链接目标的url地址，（必须）-->
    <!--target用于指定链接页面的打开方式-->
    <a href="http://www.qq.com" target="_blank">tencent</a>

blank：创建一个新窗口打开，self：当前窗口变成新窗口

内部链接：

跳转到内部html文件

 <a href="htmlpage.html">测试</a>

空链接：

  <a href="#">测试2</a>

其他链接：

压缩包/图片等链接(下载链接，网页元素链接）

 <a href="img.rar">压缩包</a>

锚点链接：

用于页面内的跳转

 <a href="#个人经历">个人经历</a><br />

<h4 id="个人经历">114514</h4>

注释标签：

快捷键：ctrl+/

特殊字符：

&nbsp:空格
&lt:左尖括号
&rt：右尖括号

表格标签：

表头

th加粗居中，tr为一行，td为一个单元格

<!--表格标签-->
    <!--table:定义表格的标签-->
    <table>
        <tr><!--tr定义表格中的行-->
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>15</td>
            <td>男</td>
        </tr>
    </table>

表格标签：

<!-- 表格的对齐方式 -->
     <!-- align 属性值：left，center，right -->
      <!-- 表格边框 -->
       <!-- border：属性值：1或""（边框大小） -->
        <!-- cellpadding 属性值：像素值 文字距离单元格边框的距离 -->
         <!-- cellspacing 属性值：像素值  规定单元格与单元格之间的距离 -->
        <!-- width height 表格的宽度和高度 -->

<!-- 表头区域thead -->
    <thead></thead>
    <!-- 表格区域tbody -->
     ><tbody></tbody>

   <!-- 合并单元格 -->
     <td colspan="2"></td>
     <td rowspan="2"></td>

列表

<ul>
    <li></li>
    <li></li>
</ul>
<!--无序列表：里面只能有li 无顺序 li中可包含任何标签-->
<ol>
    <li></li>
</ol>
<!-- 有序列表，里面只能由li 有顺序 li中可包含任何标签 -->
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>
<!--自定义列表，里面只能由dt和dd， dt和dd可包含任何标签-->

表单元素：

input

格式

type类型

  1. text：文本框，用户可以在里面输入任何文字
  2. password：密码字段，该字段的字符被掩码
  3. radio：单选按钮 可以选一个 （取name防止复选）
  4. checkbox：多选按钮 可以选多个

除type类型外还有value，name等类型

<!--name and value 主要给后台人员使用的-->
<!--单选和复选按钮可以用checked默认选中-->
<!--maxlength规定输入的字符最大值-->
    <!--单选按钮复选按钮需要有相同的name值-->
posted @ 2025-03-25 19:14  Marinaco  阅读(14)  评论(0)    收藏  举报
//雪花飘落效果