2 Fork me on GitHub 6

前端之HTML

前端之HTML

 

今日内容

  • HTML简介
  • HTML基本标签
    • head 内基本标签
    • body 内基本标签
  • HTML常用符号
  • HTML重要标签
    • div 标签 与 a 超链标签 与 img 图片标签
    • 列表标签
    • 表格标签

内容详细

一、HTML简介

HTML: 超文本标记语言（Hyper Text Markup Language）

是构造网页的骨架，几乎所有的网站都是由HTML构建而成

不是一门编程语言 没有任何的逻辑 只有固定的标记功能

1、HTML标签的分类

    1.双标签(有头有尾)
        <a></a>
    2.自闭合标签(单标签)
        <img/>

2、HTML文档结构

<html>
    <head>
        编写给浏览器查看的内容
    </head>
    
    <body>
        编写展示给用户查看的内容
    </body>
    
</html>

3、HTML语法注释

单行注释： <!--注释语法-->
多行注释： 
          <!--
          多行注释
          多行注释
          -->

4、创建HTML文件

存档网页骨架的文件后缀名一般都是.html，该类型文件主要的打开方式为浏览器形式

  • 以pycharm为例
    右键new点击HTML FILE创建即可
  • 如何打开展示
    右上方会提供多种浏览器(注意需要提前下载)

编写HTML标签的时候 不需要自己写大括号小括号 只需要写标签名称+tab键即可自动补全(所有支持编写html文件的工具内部自带的插件语法功能)

二、HTML基本标签

1、head内常见标签

title       定义网页标题
style       内部支持css代码
script  内部支持编写js代码 还可以通过src属性导入外部js文件
link        通过href属性引入外部的css文件
meta        定义网页源信息
                    keywords关键字搜索
                description网页描述信息
<!--
在html文件中 可以编写html和css以及js
    但是实际工作中三者其实是分开存放的 这样有利于后期维护和扩展
-->

2、body内基本标签

h1~h6   标题标签
p           段落标签
b           加粗
i           斜体
u           下划线
s           删除线
br      换行
hr      水平分割线
"""有时候相同的样式 可能有多种标签可以实现!!!"""
  • 标签分类

分类1:单双标签

分类2:

块儿级标签 h1~h6 p --> 独占一行(后期可以通过css实现不占一行)

行内标签 u i s b --> 自身文本多大就占多大,不会换行

三、HTML常用符号

&nbsp;      空格
&gt;            大于号
&lt;            小于号
&amp;           &符号
&yen;           羊角符
&copy;      版权符
&reg;           注册

四、HTML重要标签

标签的两大重要属性

1.id属性      个体查找
    类似于标签的身份证号 在同一个html页面上id不能重复
2.class属性   群体查找
    类似于python面向对象中的类的继承
    可以将多个标签划为一类
        <h1 class='c1'></h1>
        <p class='c1'></p>
    并且一个标签可以有很多类
        <h1 class='c1 c2 c3'></h1>
        <p class='c1 c8 c9'></p>

1、div 标签 与 a 超链标签 与 img 图片标签

div 标签

网页在制作之前需要提前布局好
布局标签
    div         块儿级标签
    span        行内标签

a 超链标签

a标签>>>:链接标签
    用法1:通过href属性指定网址(URL)点击跳转
        跳转过程中有两种方式
            1.当前页面跳转    target="_self"  默认  
            2.新建页面跳转    target="_blank"
    用法2:锚点功能
            通过href属性指定标签的id值点击即可跳转到对应位置

img 图片标签

img标签>>>:图片标签
  src属性指定图片地址
    可以是本地的地址也可以是网络上的地址
    alt属性编写文本
    用于在图片无法加载出来的情况下的提示信息
  title属性写文本
    用于鼠标悬浮在图片上之后提示的文本信息
  height、width属性写像素
    用于调整图片的尺寸
      需要注意调整的时候 修改一个另外一个自动等比例缩放
      如果同事调整两个 那么可能会造成图片的失真

注意

标签是可以嵌套的 但是需要遵循以下规律
    块儿级标签 可以无限制的嵌套块儿级标签和行内标签
        特例:p标签虽然是块儿级标签但是也不能嵌套块儿级标签
    行内标签不能嵌套块儿级标签 可以嵌套行内标签

<!-- 网址其实并不是一个非常专业的名词
    URL:统一资源定位符
-->

2、列表标签

无序列表（重要）

前面没有用于标识数字顺序的提示
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

<!--
网页上有规则排列的多个横向或者竖向内容 几乎都是无序列表
要想实现需要css相关知识
-->

有序列表

    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>

标题列表

    <dl>
        <dt>标题1</dt>
          <dd>内容1</dd>
        <dt>标题2</dt>
          <dd>内容1</dd>
          <dd>内容2</dd>
    </dl>

3、表格标签

# 当需要展示一些具体固定格式的多条数据的时候可以考虑使用(excel)

# 表格标签的格式
    <table>
    <thead></thead>     表头
    <tbody></tbody>     表单
    </table>
# tr标签
    tr就表示一行
# th标签
    在表头的字段名称
# td标签
    普通的单元格数据
 
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>密码</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>jason</td>
            <td>123</td>
            <td>18</td>
        </tr>
    </tbody>
</table>
"""我们只需要掌握最基本的html标签即可 至于花里胡哨的样式后面学习完前端框架之后  直接cv拷贝即可 都是别人提前写好的"""
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
 
分类: python 前端
标签: 前端
posted @   jinggo  阅读(32)  评论(0)  编辑  收藏  举报
相关博文：
·  前端之CSS
·  前端表单标签form 及 简单应用
·  前端之HTML
·  HTML简介
·  前端基础之HTML
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手