欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

前端（一）之 HTML

程序员文章站 2022-11-30 14:35:07
前端之 HTML 前言 python 基础、网络编程、并发编程与数据库要开始告一段落了，从现在开始进入前端的学习。前端的东西多且杂，需要好好地练习。 什么是前端 前端即网站前台部分，运行在 PC 端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5、CSS3，前端框架的应用，跨 ......

前端之 html

前言

python 基础、网络编程、并发编程与数据库要开始告一段落了，从现在开始进入前端的学习。前端的东西多且杂，需要好好地练习。

什么是前端

前端即网站前台部分，运行在 pc 端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，html5、css3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的 html 和 css 以及 javascript。

  • 广义前端：所有用户可以直接看见并交互的界面；
  • 狭义前端：浏览器上运行的用户交互界面。

什么是 html

html 是一种超文本标记语言（hyper text markup language），主要负责完成页面的结构设计，一般以.html或者.htm 后缀结尾。

超文本指页面内可以包含图片、链接甚至音乐、程序等非文字元素。

  1. 标记语言

    标记语言为非编程语言，不具备编程语言具备的程序逻辑。

  2. html 为前端页面的主题，由标签、指令与转义字符（实体）等组成

    标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg：系统标签、自定义标签。

    指令：被尖括号包裹，由 !开头的标记。eg：<!doctype html>

    转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg：&#60;&#62;&nbsp;

  3. 文档类型

    <!-- 标签语法规范 -->
<!doctype html public "-//w3c//dtd html 4.01//en"
"http://www.w3.org/tr/html4/strict.dtd">

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<!doctype html>

第一个页面

基础模板

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>第一个页面</title>
    </head>
    <body>
    </body>
</html>

模板解读

  • doctype：指定文档类型，规定 html 标签语法；
  • html：文档根标签，标注着文档（页面）的开始与结束；
  • head：文档头标签，可以引用脚本文件、指定样式表、书写代码逻辑块、提供元信息；
  • body：文档主体标签，包含文档所有文本与超文本内容；
  • title：文档 tag 标题标签，设置文档 tag 的标题内容。

其他核心模板标签

1. meta（元标签）

字符编码
<meta charset='utf-8'>
<meta http-equiv='content-type' content='text/html;charset=utf-8'/>
seo
<meta name='keywords' content='8-12个以英文逗号隔开的单词或词语'>
<meta name='description' content='80字以内的一段话，与网站内容相关'>
移动适配
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'/>

2. link（链接标签）

外联样式表
<link rel='stylesheet' type='text/css' href='style.css'/>
文档 tag 图标
<link rel='shortcut icon' type='image/x-icon'
      href='http://www.baidu.con/favicon.ico'/>

3. style（样式标签）

内联样式表
<style></style>

4. sctipt（脚本标签）

<script type='text/javascript'></script>

html 常用标签

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基本标签</title>

    </head>
    <body>
        <!-- 无意义标签 -->
        <!-- div：最常用标签，没有之一（搭建页面架构） -->
        <div></div>

        <!-- span：文本最常用标签 -（构建文本架构，可以直接包裹文本，也可以包裹其他文本类（内联类型标签）-->
        <span></span>

        <!-- span 作为文本架构，删除样式的文本再由具体的文本类标签 del 嵌套 -->
        <span>$1000<del>$2300</del></span>
        <!-- 标题标签：h1~h6 -->
        <!-- 一般一个页面会出现一次，作为该页面的总标题出现 -->
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        普通文本
        <h6>六级标题</h6>

        <!-- 段落标签 -->
        <p>段落段落段落段落段落</p>

        <!-- 原生标签 -->
        <pre>
            呵        呵
        </pre>

        <!-- 分割线 -->
        <hr></hr>

        <!-- 换行 -->
        <br />
        <br />
        <br />

        <!-- 文本类标签 -->
        <!-- 斜体 -->
        <i>斜体</i>

        <!-- 斜体强调 -->
        <em>斜体强调</em>

        <!-- 加粗 -->
        <b>加粗</b>

        <!-- 加粗强调 -->
        <strong>加粗强调</strong>

        <!-- 由 ruby 和 rt 两个标签配合使用 -->
        <ruby>
            拼音<rt>pinyin</rt>
        </ruby>

        <!-- 插入文本 -->
        <ins></ins>

        <!-- 上角标 -->
        <span>文本<sup>上角标</sup></span>

        <!-- 链接标签 -->
        <!-- href 标签的全局属性，超链接，规定协议-->
        <!-- 不规定的话：会在当前文件路径做路径拼接 -->
        <a href="https://www.baidu.com" target="_self">通往百度</a>

        <!-- 图片标签 -->
        <!-- src 图片源地址可以加载网络|本地|动态图片 alt：图片资源加载时文本提示 title：鼠标悬浮产生的文本提示（任意标签都可以具有该全局属性）-->
        <img src="" alt="" title="小柯基">

        <!-- 表格 -->
        <table>
            <tr>
                <th>标题</th>
                <th>标题</th>
            </tr>
            <tr>
                <th>单元格</th>
                <th>单元格</th>
            </tr>
        </table>

        <!-- 表单 -->
        <form >
            <input type="text">
            <input type="text">
        </form>


    </body>
</html>

标签的分类

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>标签的分类</title>
</head>
<body>
    <!-- 系统标签 | 自定义标签: 系统没有的满足标签语法的所有标签 -->
    <zero title="xxx" style="color: red">zero</zero>

    <!-- 行块标签(display) -->
    <!-- 块: 换行显示 -->
    <p>测试1</p>
    <p>测试2</p>
    <!-- 行:同行显示 -->
    <span>测试3</span>
    <span>测试4</span>

    <!-- 单结构 | 组合结构 -->
    <div>单结构</div>
    <!-- 被form包裹的input内容可以提交给后台,单独使用的input内容只能在前台(js)使用 -->
    <form action="">
        <input type="text">
    </form>
    <input type="text">



    <!-- 单双标签 -->

    <!-- 双: 首尾分离 -->
    <!-- 主内容:可以包含文本,也可以包含子标签 (具有作用域) -->
    <div></div>
    <span></span>

    <!-- 单: 首尾连体 -->
    <!-- 主功能: 不需要子内容,标签就可以代表所有的功能语义 -->
    <hr />
    <br />

    <!-- input的内容 -->
    <input type="text" value="abc" placeholder="请输入">
</body>
</html>

html 特殊符号转义

前端（一）之 HTML

上一篇： 荐 LeetCode 44. 通配符匹配 | Python

下一篇： 荐 使用IDEA实现SSM整合(Maven+Spring+Mybatis+SpringMvc)

推荐阅读