HTML

最新推荐文章于 2024-09-27 23:15:00 发布

weixin_48846877

最新推荐文章于 2024-09-27 23:15:00 发布

阅读量122

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_48846877/article/details/106890813

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

html笔记

一.html的简介

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
html（Hyper Text Marked Language）：是一种描述网页的语言，不是编程语言，是标记语言（标记标签语言）。
html也叫web页面

二.html的标签

1.标签

网页里面的标记标签都是一组<> 包涵的标记

1.1标签的类型

1.按照是否换行来分：
行级元素，块级元素
2.根据是否闭合来分：
完全闭合，自闭和

2.html的基础标签

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>

2.1 声明

声明当前网页的类型为html5 网页

<!DOCTYPE html>

声明当前网页的类型为html4 网页

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">

2.2网页的根元素

<html></html>

2.3 网页的头部信息标签

 <head></head>

2.4 网页的标题标签

  <title></title>

2.5网页的内容区域标签

<body></body>

3.常用标签

3.1 标题标签

h1-h6标签
h1-h6标签（块级标签）：
1.文本加粗
2.文字大小从上到下由大变小
3.自动换行

<body>
      <h1>我是h1标签</h1>
      <h2>我是h2标签</h2>
      <h3>我是h3标签</h3>
      <h4>我是h4标签</h4>
      <h5>我是h5标签</h5>
      <h6>我是h6标签</h6>
</body>

3.2 段落标签

p标签
p标签：块级标签，自动换行

<body>
      <p>我是段落</p>
      <p>我是段落</p>
      <p>我是段落 我是段落 我是段落</p>
</body>

在这里插入图片描述

3.3 文本格式化标签

行级标签

<body>
      <b>我是文本</b>
      <strong>我是文本</strong>   <!--加粗-->
      <br/>  <!--强制换行标签 -->
      <i>我是文本</i>
      <em>我是文本</em>  <!--斜体-->
      <br/>
      <u>我是文本</u>
      <ins>我是文本</ins>  <!--下划线-->
      <br/>
      h<sub>2</sub>o   <!--下标-->
      <br/>
      2<sup>2</sup>=4  <!--上标-->
      <br/>
      <small>我是文本</small>  <!--小号字-->
      <br/>
      <del>我是文本</del>   <!--删除线-->
      <hr/>    <!--水平线-->
      <pre>
           我是文本
           我是文本
      </pre>   <!--预先格式化（块级标签）-->
</body>

在这里插入图片描述

3.4 超链接

a标签
href属性是链接的地址，不写地址默认当前页面，#默认跳转当前页面
href 属性可以写远程地址也可以写相对地址(相对路径是指当前文件的目录)
target 属性
target="_blank" 重新打开选项卡 _self在自身打开相当默认

<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<br/>
<a href="https://www.baidu.com" target="_self">百度一下</a>
<br/>
<a href="../相对路径.html">跳转</a>
<br/>
</body>

3.5 图像标签

img标签
src 图片的地址，可写远程地址，可写相对地址
alt 图片加载失败显示文字
width height像素

<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片丢失"/>
<img width="200" height="150" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="加载失败"/>
<img src="../img/u=1906469856,4113625838&fm=26&gp=0.jpg" alt="图片丢失"/>
</body>

在这里插入图片描述

3.6 列表

有序列表 ol 无序列表 ul
有序列表可以修改前面的序号 type属性
自定义列表 dl dt dd

<body>
<ul>
    <li>蔬菜
        <ul>
            <li>青椒</li>
            <li>西红柿</li>
            <li>茄子</li>
        </ul>
    </li>
    <li>肉类
        <ul>
            <li>猪肉</li>
            <li>鸭肉</li>
            <li>鸡肉</li>
        </ul>
    </li>
    <li>水果
        <ul>
            <li>苹果</li>
            <li>橘子</li>
            <li>香蕉</li>
        </ul>
    </li>
</ul>
<ol type="a">
    <li>蔬菜
        <ol type="I">
            <li>青椒</li>
            <li>西红柿</li>
            <li>茄子</li>
        </ol>
    </li>
    <li>肉类
        <ol>
            <li>猪肉</li>
            <li>鸭肉</li>
            <li>鸡肉</li>
        </ol>
    </li>
    <li>水果
        <ol>
            <li>苹果</li>
            <li>橘子</li>
            <li>香蕉</li>
        </ol>
    </li>
</ol>

<dl>
    <dt>蔬菜
    <dd>青椒</dd>
    <dd>西红柿</dd>
    <dd>茄子</dd>
    </dt>
    <dt>肉类</dt>
    <dt>水果</dt>
</dl>
</body>

在这里插入图片描述

3.7 区块标签

区块标签-块元素
内联标签-行级元素
div 容器标签这个元素是做网页框架布局的
span 文字容器内联元素

<body>
<div>我是框架div</div>
<span>span</span>
<span>span</span>
</body>

在这里插入图片描述

3.8 表格标签

table标签
tr 行 td/th 列
border 属性表格的边框
align 居中方式 center left right
cellspacing 列之间的间隙 0
cellspadding 列的内间距 cellspadding=“20”
width 宽度属性 height
bgcolor 属性背景色
表格里面的跨行跨列属性
跨行rowspan 跨列colspan
表头 caption

<body>
<table bgcolor="red" border="1" align="center" cellspacing="0" width="300" height="400">
    <caption>学生信息</caption>
    <tr bgcolor="#ff7f50">
        <th rowspan="4" bgcolor="aqua">信息</th>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>20</td>
        <td>女</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王麻子</td>
        <td>8</td>
        <td>男</td>
    </tr>
    <tr>
        <td colspan="5">备注;学生信息</td>
    </tr>
</table>
</body>

在这里插入图片描述

3.9 表单

form 标签是包含表单元素的区域
action 属性表单提交给后台的地址
method 表单的提交方式 get 显示提交 post 隐式提交
表单元素对象 input标签 type属性控制表单元素对象的类型
默认不写type属性默认单行文本框
checked属性是默认选择一般用于单选和复选
placeholder属性智能提示
radio 圆形选项 checkbox 方框形选项
text 文本 password 密码 button 按钮 file 打开文件
textarea 文本域 select 选择列表
value 属性
都是作用于form表单的 reset重置按钮 submit提交按钮

<body>
<form action="" method="post">
    <input name="id" type="text" placeholder="请输入账号..."/>
    <br/>
    <input name="pwd" type="password"/>
    <br/>
    <input type="radio" checked name="sex" value="男"/>男
    <br/>
    <input type="radio" name="sex" value="女"/>女
    <br/>
    <input type="checkbox" name="ck" checked value="0"/>篮球
    <br/>
    <input type="checkbox" name="ck" value="1"/>羽毛球
    <br/>
    <input type="button" value="按钮"/>
    <br/>
    <input type="file" name="file"/>
    <br/>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <br/>
    <select name="" id="2">
        <option>-请选择-</option>
        <option value="西安市">-西安市-</option>
        <option selected value="宝鸡市">-宝鸡市-</option>
    </select>
    <br/>
    <input type="reset" value="重置"/>
    <input type="submit" value="注册"/>
</form>
    <hr/>
    <button>按钮</button>
</body>

在这里插入图片描述

3.10 框架

iframe 可以做小型的企业系统
src 嵌入的路径
frameborder 设置边框的属性

<body>
<a href="https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_6fdb3a242a03423dbe7c78316cddb9d7" target="page">京东</a>
<a href="https://www.taobao.com/" target="page">淘宝</a>
<iframe name="page" src="https://www.baidu.com" width="900" height="600"  frameborder="0"></iframe>
</body>

在这里插入图片描述

3.11 html的颜色

四种值
1.单词值
2.十六进制 #fff
3.rgb(255，0，0)
4.rgba(255,0,0,0.5)

三.html的快捷键

复制 ctrl+c
粘贴 ctrl+v
剪切一行或删除一行 ctrl+x
复制本行到下一行 ctrl+d
退回之前操作 ctrl+z
注释行 ctrl+/
注释选定区域 ctrl+shift+/
格式化快捷键 ctrl+alt +d +l
打开设置界面 alt+ctrl+s
快速写标签标签名称+tab