前端基础-HTML简介

简介: * 先说下什么是网页:> 网页是网站中的页面,通长是HTML格式的文件,单个或多个页面就组成了一个网站;现在的技术发展到一般都是单页应用,在一个页面中,通过页面跳转的方式,访问不同数据页面; 网页基本都是通过浏览器访问;网页主要有图片,文字、链接、视音频等元素组成;使用不同的标签引入元素;最终生成的文件和展示的方式一般都是html或htm文件;

HTML简介:

  • 先说下什么是网页:
网页是网站中的页面,通长是HTML格式的文件,单个或多个页面就组成了一个网站;现在的技术发展到一般都是单页应用,在一个页面中,通过页面跳转的方式,访问不同数据页面;
网页基本都是通过浏览器访问;网页主要有图片,文字、链接、视音频等元素组成;使用不同的标签引入元素;最终生成的文件和展示的方式一般都是html或htm文件;
  • 什么是HTML
HTML是超文本标记语言《Hyper Text Markup Language》,不是一个编程语言,只是个标记语言,用来描述网页结构;
超文本意思超越了文本的限制,除了文本,还可以加图片,动画,多媒体等内容;
  • 一个网站的诞生:

    • 编写html文件
    • 多个html展示不同页面
    • 用户通过浏览器访问html文件
    • 浏览器渲染html文件展示成web页面;
  • web标准

    • Web标准是W3C标准化组织制定的一系列标准的集合;
    • 主要由结构(tag标签),表现(css样式)、行为(JavaScript用户交互)构成;
    • web标准使得代码更规范,统一;

HTML标签

  • 标签一般都是成对出现的,并且都在'<>'里面;如;也有例外,如单标签'br',数量不多
  • 标签关系有两类:

    包含关系:父子关系,包含关系可以多层包含;
    并列关系:兄弟关系
    <html>
        <head></head>
        <body>
            <h1></h1>
            <div></div>
        </body>
    </html>
  • 4个基本结构标签(也叫骨架标签):

    • html : 根标签,所有代码都在之内
    • head: 文档的头部标签,在里面定义字符集
    • title: 文档的标题标签,在head标签里面
    • body: 文档的主体,页面展示的内容都在body里面
  • 文档标签<! DOCTYPE html>:

    • <! DOCTYPE> 是文档类型的声明标签,用于告诉浏览器已什么版本显示网页;
  • HTML常用标签

    1. 标题标签 <h1> ~ <h6>  作为标题使用,文字变粗,独占一行;
    2. 段落标签:<p> 将html文档分割成多段,段落之间保有空隙
    3. 换行标签:单标签 <br />  强制文字换行;行之间没有空隙
    4. 文本格式化标签: 加粗<strong>或<b>  倾斜<em>或<i> 删除线<del>或<s> 下划线<ins>或<u>
    5. 盒子标签: <div>和<span>;没有语义,用来装内容;div是division的缩写,span表示跨度,跨距;
        div是大盒子,单独占一行,span是小盒子可以多个在一行显示;
    6. 图像标签:<img>标签用于定义页面中的图片,是一个单标签;
        <img src="" alt="",title="" width="" height="" bolder>  
        src是img标签的属性,用于指定图片路径(相对路径或绝对路径)或链接;alt是文本替换,title是提示文本。width和height是图片宽度个高度,单位是像素,修改宽度,高度会等比缩放;反之亦然; border是图片边框;
    7.  超链接标签:<a>(anchor 锚点) 作用是从一个页面链接到另一个页面;分为:外部链接,内部链接,空链接,下载链接,网页元素链接,锚点链接(通过id定位)等
        <a href="目标地址" target="打开方式_self、_blank、 ">文本或图像 </a>;    
    8. 注释标签: <!-- -->  注释里面的内容不会显示的页面,只会在源代码显示;
    9. 特殊字符: 如下图; 

在这里插入图片描述

  • 表格标签 table:

    1. 表格主要是显示数据,不是用来布局页面的;
    2. 基本语法:<table><tr><td></td></tr></table> table是表格,tr是行,td是单元格
    3. 表头标签:<table><tr><th></th></tr></table>  表头中的文字会加粗,居中;
    4. 合并单元格: rowspan:跨行合并, colspan:跨列合并;
    5. 表格属性:如图

在这里插入图片描述

  • 列表标签:
    主要是用来布局,整洁,整齐; 根据场景不同可分为三大类,有序列表,无序列表和自定义列表

    • 无序列表ul:
    1. 基本语法: <ul><li>列表项</li><li>列表项2</li></ul>
    2. 基本规范: ul只可以放li标签,li标签对内容无限制,相当于容器,可以容纳所有元素
    • 有序列表ol: 列表排序以数字显示,其他与无序列表一致
    • 自定义列表dl:经常用于对术语和名称进行解释和描述;
    3. 基本语法: <dl><dt><dd></dd></dt></dl>
    4. 基本规范:dl只能包含dt和dd标签,
  • 表单标签:
    表单的主要目的是为了收集用户信息,与用户交互的;

    • 表单的组成: 一个完整的表单通常有表单域,表单控件(元素),提示信息等‘’
    表单域是一个包含表单元素的区域,主要使用form标签定义;
    表单元素是允许用户输入或选择的内容控件;主要有input,, select,textarea等表单元素
    <input type="属性类型" name="属性名" value="值" > 
    表单中lable标签为input元素定义标注,用于绑定表单元素,浏览器会自动聚焦到指定元素;
    <lable for="name">用户名</lable> <input type="text" id="name"/>
    
    select是下拉列表:语法规范如下
    <select>
          <option selected>未选择</option> #至少包含一对选项
          <option>选项1</option>
          <option>选项2</option>
    </select>
    
    textarea数文本域标签,定义多行文本,在输入内容较多的情况下使用。
    语法规范如下:
    <textareacols="10" rows="10">默认值 </textarea>
    

    在这里插入图片描述
    在这里插入图片描述

相关文章
|
移动开发 前端开发 安全
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1231 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
569 25
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
前端开发 JavaScript
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1588 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
1010 0
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
791 6

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1169
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    513
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    398
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    393
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    508
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    680
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1207
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    272
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1004
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    470