首页 > 其他分享 >HTML入门

HTML入门

时间:2024-01-20 11:46:40浏览次数:22  
标签:网页 定义 标签 元素 html HTML 入门

# HTML入门

HTML基础 超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

HTML-----用来描述网页的一种语言

```

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>

这是html的基本框架 根据需要的界面,写入相应的html css js 代码即可 文件后缀为.html 在浏览器中按f12即可调试

基础知识

  • 声明为 HTML5 文档
  • 元素是 HTML 页面的根元素
  • 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8
  • </strong> 元素描述了文档的标题</li> <li><strong><body></strong> 元素包含了可见的页面内容</li> <li><strong><h1></strong> 元素定义一个大标题</li> <li><strong><p></strong> 元素定义一个段落</li> </ul> <h3 id="网页结构">网页结构</h3> <p><img src="C:%5CUsers%5C26973%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20240120010006489.png" alt="image-20240120010006489" loading="lazy"></p> <h2 id="html-编辑器">HTML 编辑器</h2> <p>我使用的是vs code功能强大 最重要的是开源免费</p> <p>并且vs code中有扩展,对写代码十分友好</p> <h3 id="标签">标签</h3> <h4 id="行标签内容占满整行后再切换下一行">行标签:内容占满整行后再切换下一行</h4> <p>如 <p></p> <span></span></p> <h4 id="块标签内容独占一行">块标签:内容独占一行</h4> <p>如<div></div></p> <h3 id="常见元素定义">常见元素定义</h3> <p>标题:<h1> - <h6></p> <p>段落:<p>这是一个段落。</p></p> <p>链接:<a href="https://www.baid.com">这是一个链接</a> ------->超链接</p> <p>图片:<img src="/images/logo.png" width="258" height="39" /></p> <h3 id="属性">属性</h3> <p>可以直接在标签中设置属性 或者通过css来设计</p> <h3 id="选择器">选择器</h3> <p>通过给标签“命名”来使css为他们设计样式</p> <table> <thead> <tr> <th style="text-align:left">属性</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">class</td> <td style="text-align:left">为html元素定义一个或多个类名(classname)(类名从样式文件引入)</td> </tr> <tr> <td style="text-align:left">id</td> <td style="text-align:left">定义元素的唯一id</td> </tr> <tr> <td style="text-align:left">style</td> <td style="text-align:left">规定元素的行内样式(inline style)</td> </tr> <tr> <td style="text-align:left">title</td> <td style="text-align:left">描述了元素的额外信息 (作为工具条使用)</td> </tr> </tbody> </table> <h2 id="-元素"><strong><head></strong> 元素</h2> <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。 <p>可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</p> <h3 id="网站布局">网站布局</h3> <p>在铺一个页面时 先布局 会提高编程效率</p> <p>HTML以上就是HTML入门所必须要掌握的内容 对于专业前端来说这是最基础的 想要做出一个优秀的网站 你还需要掌握CSS JS等</p>

标签:网页,定义,标签,元素,html,HTML,入门
From: https://www.cnblogs.com/sfy020520/p/17975949

相关文章

  • ClickHouse入门
    简介:ClickHouse是俄罗斯Yandex公司使用C++语言编写开源的列式存储数据库,主要用于在线分析查询(OLAP),使用SQL查询实时生成分析数据报告。一、安装 二、入门1. 特点A.列式存储:较MySQL行式存储有利于列的聚合、计数等操作,针对每列可选择最优的数据压缩算法来压缩......
  • 洛谷入门赛 #19 题解
    比赛传送门A-分饼干I将三盒饼干按数量排序。若较小的两盒饼干数之和大于另一盒饼干,则将较小的两盒饼干奖励给第一名,另一盒奖励给第二名;若较大的一盒饼干数大于另外两盒之和,则将较大的一盒奖励给第一名,另外两盒奖励给第二名。B-分饼干II每个人分到的饼干数都不同,即可以看......
  • 细说JavaScript BOM之HTML5新特性
    1、applicationCache对象什么是ApplicationCache呢?HTML5引入了应用程序缓存技术,意味着Web应用可进行缓存,并在没有网络的情况下使用,通过创建cachemanifest文件,可以轻松的创建离线应用。ApplicationCache带来的优势:1.离线浏览2、提升页面载入速度3、降低服务器压力需要......
  • 【LGR-172-Div.4】洛谷入门赛 #19 题解
    比赛链接:\(link\)T1分饼干I题目描述洛谷网校举行了期末考试,同学们经过课程的学习,考出了优异的成绩。Z在考试中获得了第一名,yz在考试中获得了第二名,老师决定买一些饼干奖励两名小朋友。老师买了三盒饼干,第一盒有\(a\)块饼干,第二盒有\(b\)块饼干,第三盒有\(c\)块饼干......
  • 中间件 ZK分布式专题与Dubbo微服务入门 4-15 acl的常用使用场景
    0课程地址https://coding.imooc.com/lesson/201.html#mid=12711 1重点关注1.1zk集群,主从节点,心跳机制(选举模式) 选举模式介绍1xx主节点(主人),yy和zz从节点(奴隶)2xx主节点挂掉了,yy和zz竞争当主人,结果zz成功上位,zz是主节点,yy是从节......
  • 最大异或和 可持久化数据结构入门
    最大异或和题目描述给定一个非负整数序列\(\{a\}\),初始长度为\(N\)。有\(M\)个操作,有以下两种操作类型:Ax:添加操作,表示在序列末尾添加一个数\(x\),序列的长度\(N\)加\(1\)。Qlrx:询问操作,你需要找到一个位置\(p\),满足\(l\lep\ler\),使得:\(a[p]\oplusa[p+1]......
  • Adnroid WebView从http协议加载本地html,而不是file协议
    1.使用WebViewAssetLoader需要在build.gradle中添加webkitimplementation'androidx.webkit:webkit:1.6.0'2.然后设置WebviewprotectedvoidwebviewSet(){WebViewwv=binding.wv;WebSettingswvSettings=wv.getSettings();finalWebViewA......
  • 数据结构——线段树 入门以后 学习笔记
    数据结构——线段树入门以后学习笔记入门笔记有时间写。才发现我不会线段树。/ll可以看出来我很喜欢class/cf有的代码需要前置:usingll=longlong;constexprllmod=998244353;constexprintroot=1;P3372线段树1classseg_t{private:structemm{......
  • 若依框架入门一源码分析一登录验证码
    若依框架入门一源码分析一关于登录页面的验证码问题前端页面的验证码开关设置的是true,但是打开画面验证码没有被显示,原因是后端代码判断了redis中是否有值,有则覆盖前端<el-form-itemprop="code"v-if="captchaEnabled"><el-inputv-model="loginForm......
  • PostgreSQL从入门到精通教程 - 第42讲:pg_rman部署与使用
       PostgreSQL从小白到专家,是从入门逐渐能力提升的一个系列教程,内容包括对PG基础的认知、包括安装使用、包括角色权限、包括维护管理、、等内容,希望对热爱PG、学习PG的同学们有帮助,欢迎持续关注CUUGPG技术大讲堂。 第42讲:pg_rman部署与使用 PostgreSQL第42讲:1月20日......