HTML基础知识

最新推荐文章于 2025-05-14 10:25:06 发布

御魂165

最新推荐文章于 2025-05-14 10:25:06 发布

阅读量572

点赞数 13

文章标签： html 前端 html5

本文链接：https://blog.youkuaiyun.com/qq_59533170/article/details/142903310

版权

HTML

一.HTML基本骨架讲解
二.常用标签
三.块元素，行内元素，行内块元素

一.HTML基本骨架讲解

VScode创建以.htm.html后缀结尾的文件，输入！+回车自动生成html框架。

<!DOCTYPE html>
<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>

在这里插入图片描述
html超文本标记语言，现在html最新修订版本是html5 ，html5是2014年w3c完成标准制定的。如何让浏览器识别这是html5，那当然是使用
doctype声明 ==> <!DOCTYPE html>
<html lang="en"> 声明html主要语言
下面这些是头部标签head里面包含的东西
<meta charset="UTF-8"> 没写这个，写中文会乱码，我们可以声明页面字符编码为utf-8或GBK
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 描述文档信息，width=device-width 即页面宽度等于设备宽度，initial-scale=1.0即初始缩放比例。
<title>Document</title> SEO优化网站名称 head头部标签里必须包含他，有利于seo优化，即浏览器搜索后排列顺序，当然还有一种是用钱的。
然后就是body标签。

二.常用标签

标签有单标签和双标签，用<></>或者</>包含。

1.文本标签

<i></i> 斜体 <em></em>着重斜体
<b></b>粗体 <strong></strong>加重语气，加粗了
<del></del>删除字 <span></span>无特定含义

<ol>
      <li><i>i 文具</i></li>
      <li><em>em 家具</em> </li>
      <li><b>b 水果</b>
          <ol>
              <li><strong>strong 苹果</strong></li>
              <li><del>del 香蕉</del></li>
              <li><span>span 梨子</span></li>
          </ol>
      </li>
  </ol>

在这里插入图片描述

2.段落标签

<p></p>段落标签
<br/>分行
<hr/>直线【属性color,width,size(高度),align】

 <p>我是一段文字嘿嘿</p>
    我也是一段文字，但是我想<br />分行，你能帮我嘛。
    <hr color="red" width="400px" size="50px" align="center" />

在这里插入图片描述

3.图片标签

<img/>（图片和图片之间有空隙可使用float消除）属性 src图片路径 绝对路径（以盘符开头的路径）相对路径（同级./(可省) 子级/ 父级…/ ）网络路径 alt图片加载失败显示文本 title鼠标悬停文本显示 width height

<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/50706fe64cbbdddc2c8c99d27eb64d4d.jpeg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160"
        alt="我是cute的小姐姐" title="小姐姐和柯基" width="500px" >

在这里插入图片描述

4.链接标签

href 跳转链接 target 跳转方式 _blank新窗口打开 _self 当前页面打开（默认）
链接未访问蓝色下划线访问后紫色下划线点击时红色下划线放置其上时小手状态

<a href="https://www.baidu.com" target="_blank">百度网址</a>

在这里插入图片描述

5.标题标签

<h1>1</h1>
<h2>2</h2>
…………
<h6>6</h6>
生成h1到h6标签快捷键 *h$6
在这里插入图片描述

6.有序列表

<ol> <li>苹果</li> <li>香蕉</li> <li>梨子</li> </ol>
列表属性type 默认为阿拉伯数字，还有小写大写字母和i，ii……和Ⅰ，Ⅱ……
<ol type="a"> <li>苹果</li> <li>香蕉</li> <li>梨子</li> </ol>
在这里插入图片描述

7.无序列表

<ul> <li>苹果</li> <li>梨子</li> <li>菠萝</li> </ul>
列表属性type 默认样式为disc实心圆，还有circle（空心圆），square（小方块），none（无）。
<ul type="circle"> <li>苹果</li> <li>梨子</li> <li>菠萝</li> </ul>
在这里插入图片描述

8. 表格标签

基础框架

 <table>
        <tr>
            <td></td>
        </tr>
    </table>

默认不显示边框可配置border=“1”显示边框
边框的间隙使用css table {border-collapse: collapse }去除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    	table {
            border-collapse: collapse
        }
     </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>我是第一行第一列数据</td>
            <td>我是第一行第二列数据</td>
        </tr>
        <tr>
            <td>我是第二行第一列数据</td>
            <td>我是第二行第二列数据</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

9.表单标签

<form action="服务器地址" method="post/get" id="">
        <input type="text">
        <input type="password" name="" id="">
        <input type="submit" value="提交">
</form>

点击提交按钮把数据提交给action，通过post方式或get（url可以看见提交的数据）方式。

10.容器标签

	<header></header>
    <nav></nav>
    <article></article>
    <aside></aside>
    <footer></footer>

header标签里放头部代码 nav放导航栏代码 article放正文代码 aside放侧边栏代码 footer放脚部代码。

三.块元素，行内元素，行内块元素

块元素	行内元素
独占一行	占本身大小
有宽高	无width height属性
块包含行内和块元素	一般行内不包含块元素
div form h1~h6 p hr table ul …	a b em i span strong …

行内块元素不换行，可设宽高，像button img input …
还想了解其他html5知识，可看菜鸟教程。