小黑子的HTML入土过程

小黑子的HTML入土过程

  • 1. HTML+CSS系列教程第一章
    • 1.1 了解什么是HTML和CSS
    • 1.2 编译器VS Code
      • 1.2.1 下载方式和设置
      • 1.2.2 VS Code的快捷键基础用法
    • 1.3 了解网页开发
    • 1.4 Web前端的三大核心技术
    • 1.5 HTML的基本结构和属性
    • 1.6 HTML的初始代码
    • 1.7 HTML的注释
    • 1.8 HTML的语义化
    • 1.9 标题与段落
    • 1.10 文本修饰标签
    • 1.11 图片标签和图片属性
    • 1.12 引入文件的地址路径
    • 1.13 跳转链接
    • 1.14 跳转锚点
    • 1.15 特殊符号
    • 1.16 无序列表
    • 1.17 有序列表
    • 1.18 定义列表

1. HTML+CSS系列教程第一章

1.1 了解什么是HTML和CSS

I.它们是做网站的编程语言。

HTML 英文全称是 （Hyper Text Markup Language），即超文本标记语言。 它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。

CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

II.浏览器把代码解析后的样子就是我们看到的网站，如何看到网站的原始代码呢？就是通过鼠标右键选择查看网页源代码。

III。每一个网站都由N个网页构成，而每一个网页就是HTML文件。

1.2 编译器VS Code

在这里插入图片描述

1.2.1 下载方式和设置

  • 下载方式：
    http:// code.visualstudio.com/在这里插入图片描述
  • 设置：
    在这里插入图片描述

1.2.2 VS Code的快捷键基础用法

  • ctrl基础用法：
    在这里插入图片描述

  • shift基础用法：
    在这里插入图片描述

  • alt基础用法：
    在这里插入图片描述

  • Tab基础用法：
    在这里插入图片描述

1.3 了解网页开发

一个大型网站的开发，离不开团队内各个岗位的配合，每个岗位都不可或缺。
  • 主要有三个岗位：
  UI设计师：负责设计稿撰写web前端开发工程师：主要负责页面视图将设计稿编写为代码将数据库里的数据显示到页面编写HTML以及CSSweb后端开发工程师：主要负责后台存储数据

1.4 Web前端的三大核心技术

1.HTML:结构
2.CSS：样式
3.JavaScript：行为

1.5 HTML的基本结构和属性

什么是超文本标记语言？

 超文本：文本内容+非文本内容（图片、视频、音频等）语言：编程语言标记（也叫做标签）：<单词>单标签：<head>；<p>等双标签：<head></head>;<p></p>等创建标签的快捷键：单词+Tab键-> <单词>HTML常见标签: http://www.html5star.com/manual/html5label-meaning/标签可以上下排列，也可以组合嵌套标签的属性：用来修饰标签，设置当前标签的一些属性<标签 属性1="值1"  属性2="值2">

1.6 HTML的初始代码

每一个html文件都需要添加初始代码，要符合.html文件的规范写法初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码快速的创建HTML的初始代码：！+Tab键
例子：<!DOCTYPE html>   文档声明：告诉浏览器这是一个.html文件<html lang="en">  html的最外层标签，包裹着所有html标签代码        lang="en"：表示是一个英文网站       lang=“zh-CN”：表示这是一个中文网站<head>     设置的内容<meta charset="UTF-8">元信息:是编写网页中的一些赋值信息charset="UTF-8"国际编码，让网页不出现乱码的情况<title>Document</title>  网页的标题</head><body>显示网页内容的区域
</body></html>
  • 展示一下哪里是head，哪里是body：
  • 在这里插入图片描述

1.7 HTML的注释

写法:
<!--注释的内容 --〉是在浏览器中看不到，只能在代码中看到注释的内容
意义：
1。把暂时不用的代码注释起来，方便以后使用。
2。对开发人员进行提示。
快捷添加注释与删除注释:
l.ctrl +i
2.shift + alt +a

1.8 HTML的语义化

所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。

好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4.便于团队开发与维护。

1.9 标题与段落

  • 标题
标题->双标签:<h1></h1> ... h6></h6>
逐级递减，标题会随着设置的数字变得越来越小
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签，而
其他的可以h标签可以出现多个
h5、h6标签在网页中不经常使用。
  • 段落
段落->双标签:<p> 写你想写的段落内容</p>

1.10 文本修饰标签

强调->双标签: <strong></strong>、<em></em>
区别:
1．写法和展示效果是有区别的，一个加粗、一个斜体2. strong的强调性更强，em的强调性稍弱。 下标:<sub></sub>上标:<sup></sup>删除文本:<del></del>插入文本:<ins></ins>注:一般情况下，删除文本都是和插入文本配合使用的。

  • 上标与下标的效果：
    在这里插入图片描述

  • 删除文本与插入文本的效果：
    在这里插入图片描述

  • strong与em的强调效果：
    在这里插入图片描述

1.11 图片标签和图片属性

写法：
<img src="图片位置" alt="当图片出问题时显示的文字
"title="提示图片信息"width="图片宽度"height="图片高度">功能：
<img>：单标签（插入图片时需要输入）
src: 引入图片的地址(网址或文件路径)  
alt：当图片出问题时显示的文字（不用即为没有）
title：提示图片信息（不用即为没有）
width：图片宽度（不用即为图片默认）
height：图片高度（不用即为图片默认

1.12 引入文件的地址路径

1.相对路径
（1）.在路径中表示当前路径
（2）..在路径中表示上一级路径都用于寻找文件所在地例如：<img src=" ../被设置链接的图片的地址" alt="">alt=表示当图片出现问题时，可以写提示信息
2.绝对路径
在D盘也好或者在某个很深的文件夹也好，它都能够找到文件所在位置。
例如：E:/被设置链接的图片的地址

1.13 跳转链接

1.a->双标签<a></a>（1）herf=“ ”属性：链接地址
写法：文本链接：<a href="链接的地址"被设置链接的文本></a>图片链接：<img src="被设置链接的图片的地址">功能：为文本或图片设置跳转链接，点击可直接跳转至相应网页（2）target属性：可以改变链接打开的方式，默认情况下：在当前页面打开-self,新窗口打开-blank写法： <target="_blank或_self">功能：若选择_blank，则网页在新窗口打开若选择_self，则网页在当前页打开若没有选择，则默认为在当前页打开2.base->单标签：作用是改变链接的默认行为             
写法：<base target="_blank或_self">
功能：改变整个html链接的默认行为，一般在整个.hrml文件的<head></head>部分

1.14 跳转锚点

1.定义：在本页面内跳转2.实现方式1：#号 id属性id=“ ”
写法：id属性：<a href="#设定的id属性">锚点的名字</a><h2 id="设定的id属性">被设定id属性的文本<h2>3.实现方式2：#号 name属性name=“ ”（注意name属性加给的是a标签）name属性：<a href="#设定的name属性">锚点的名字</a><a name="设定的name属性"></a> <h2>强调的文本</h2> 
功能：设定类似目录的锚点，点击即可跳转

1.15 特殊符号

  • 编写一些文本时，经常会遇到输入法无法输入的字符，如R（注册商标)、(版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
  • 例：
    在这里插入图片描述
写法：
1.&+字符
2，解决冲突啊左右尖括号、添加多个空格的实现
3.&lt; &gt; &nbsp;等

1.16 无序列表

  • ul列表和li列表项
<ul>列表：最外层容器和<li>列表项
必须符合嵌套规范，<ul> <li>--</li> </ul>两组标签间隔内不能添加其他标签
但<li></li>标签之间可以有其他标签

范例：
在这里插入图片描述

  • type属性：改变前面标记的样式（一般用CSS去控制）
    type属性详情参考:
    https://www.jb51.net/w3school/tags/att_ul_type.htm

1.17 有序列表

  • ol 和 li标签
<ol>、<li> 注意：有序列表用的非常少，经常用的是无序列表，无序列表
可以去代替有序列表。
和无序列表一样，有序列表的<ol><li>和</li></ol>两组标签之间不能添加
其他标签
写法：<ol type="type属性"><li> 文本 </li></ol>

1.18 定义列表

1.<dl>:定义列表
2.<dt>定义专业术语或名词
3.<dd> 对名词进行解释和描述
写法：<dl><dd>列表项需要添加标题</dd><dt>对标题进行描述的内容</dt></dl>   功能：向列表项需要添加标题，添加对标题进行描述的内容

范例：
在这里插入图片描述
效果：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/22261.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python画图之小黑子头像

Python画图之小黑子头像

效果演示 &#x1f438;真爱粉必备知识 倍速*2.0 实现步骤 设置窗口大小和绘画速度。用 penup() 和 goto() 来定位&#xff0c;画出领子和衣服&#xff0c;使用 fillcolor() 和 begin_fill() 开始填充颜色。用 pensize() 和 pencolor() 来调整线条的大小和颜色&#xff0c;画…
阅读更多...
用 ChatGPT 秒建大模型，OpenAI 全新插件杀疯了，接入代码解释器一键 get

用 ChatGPT 秒建大模型，OpenAI 全新插件杀疯了，接入代码解释器一键 get

ChatGPT 可以联网后&#xff0c;OpenAI 还火速介绍了一款代码生成器&#xff0c;在这个插件的加持下&#xff0c;ChatGPT 甚至可以自己生成机器学习模型了。 上周五&#xff0c;OpenAI 刚刚宣布了惊爆的消息&#xff0c;ChatGPT 可以联网&#xff0c;接入第三方插件了&#xf…
阅读更多...
什么是元宇宙，什么是AI，什么是chatgpt？什么是星云虚境？

什么是元宇宙，什么是AI，什么是chatgpt？什么是星云虚境？

随着现代科技的发展&#xff0c;元宇宙已经不再是科幻电影中的概念&#xff0c;而是逐渐变得真实起来。元宇宙是极为先进的数字世界&#xff0c;它需要人工智能、虚拟现实、区块链、云计算等多种技术的支持。在这个数字空间中&#xff0c;人们可以体验到比现实生活更丰富、更多…
阅读更多...
元宇宙大爆炸：开发元宇宙是互联网的接替者？

元宇宙大爆炸：开发元宇宙是互联网的接替者？

美国游戏引擎公司Epic Games的创始人CEO蒂姆斯威尼&#xff08;Tim Sweeney&#xff09;宣称&#xff0c;玩家已经可以通过风靡的《堡垒之夜》聚集“元宇宙”的虚拟世界中。近期&#xff0c;美国超人气歌手Ariana Grande在全球不同地区&#xff0c;连续举办了5场演唱会&#xf…
阅读更多...
“抢滩”元宇宙：不只Facebook和腾讯

“抢滩”元宇宙：不只Facebook和腾讯

来源 | 01区块链 责编 | Carol Facebook创始人兼首席执行官马克扎克伯格在2021年6月底表示&#xff0c;该公司的未来规划远不止是社交媒体&#xff0c;而是筑造一个元宇宙。扎克伯克宣称&#xff0c;希望在未来用5年左右的时间&#xff0c;将Facebook打造为一家元宇宙公司。 20…
阅读更多...
元宇宙GOD新纪元打通元宇宙

元宇宙GOD新纪元打通元宇宙

J,F,4.5.9.9.9 区块链技术诞生至今已经有十余年了。在国内外不同团队的大力推动下&#xff0c;区块链项目层出不穷&#xff0c;但是对于生活的赋能作用并没有很好地体现出来。区块链技术是一项伟大的革命&#xff0c;但是一项技术如果不能投入实用&#xff0c;和各领域的应用结…
阅读更多...
科技新浪推前浪 ChatGPT将元宇宙“拍在沙滩上”？

科技新浪推前浪 ChatGPT将元宇宙“拍在沙滩上”？

近期ChatGPT的热度显然已经盖过了元宇宙&#xff0c;回想去年元宇宙大热之际&#xff0c;很多企业纷纷跟进&#xff0c;甚至还有不少公司选择更名以表达All In元宇宙的决心。而如今ChatGPT抢占风头&#xff0c;成为新宠&#xff0c;元宇宙似乎被“抛弃”了&#xff0c;难道元宇…
阅读更多...
巴比特 | 元宇宙每日必读：ChatGPT的火热与当年元宇宙的爆火故事如出一辙，科技巨头为何总是喜新厌旧？...

巴比特 | 元宇宙每日必读：ChatGPT的火热与当年元宇宙的爆火故事如出一辙，科技巨头为何总是喜新厌旧？...

摘要&#xff1a;几乎所有公司都在想方设法与ChatGPT攀上关系&#xff0c;几乎人人都在关注、讨论、试用ChatGPT时&#xff0c;谁还记得Roblox、Clubhouse&#xff1f;Roblox是ChatGPT之前的全球顶流&#xff0c;带火了元宇宙&#xff1b;Clubhouse在Roblox之前也曾短暂红遍全球…
阅读更多...
ChatGPT提示词工程（三）：Summarizing概括总结

ChatGPT提示词工程（三）：Summarizing概括总结

目录 一、说明二、安装环境三、概括总结&#xff08;Summarizing&#xff09;1. 简单地概括总结&#xff0c;只有字数限制2. 概括总结需要关注的某些点 四、用“提取”代替“总结”&#xff08;Try "extract" instead of "summarize"&#xff09;五、概括总…
阅读更多...
微信小程序自定义tabbar，custom-tab-bar

微信小程序自定义tabbar，custom-tab-bar

背景&#xff1a; 由于需要按权限配置底部tabbar&#xff0c;所以需要用到自定义&#xff0c;微信官方文档自定义 tabBar 1. 配置信息 在 app.json 中的 tabBar 项指定 custom 字段&#xff0c;同时其余 tabBar 相关配置也补充完整 {"tabBar": {"custom": …
阅读更多...
微信小程序开发 一 tabbar图标和颜色

微信小程序开发 一 tabbar图标和颜色

前期准备 &#xff1a;注册&#xff0c;填材料&#xff0c;验证等等&#xff1a; https://mp.weixin.qq.com1.浏览一遍简易教程&#xff0c;下载相应的开发工具 写一个小例子 点击左侧的 “编辑”-》点击右侧代码里的 app.json 修改为 {"pages":["pages/fig…
阅读更多...
as微信界面设计

as微信界面设计

一、内容 实操实现APP门户界面框架设计&#xff0c;至少包含4个tab页&#xff0c;能实现tab页之间的点击切换 二、技术 使用布局&#xff08;layouts&#xff09;和分段&#xff08;fragment&#xff09;&#xff0c;对控件进行点击监听 三、xml代码 top.xml <?xml ve…
阅读更多...
将iconfont图标引入到vant的Tabbar标签栏里边

将iconfont图标引入到vant的Tabbar标签栏里边

vant的Tabbar标签栏https://youzan.github.io/vant/#/zh-CN/tabbar 在app开发中&#xff0c;这个必不可少&#xff0c;上一张讲了怎么引入iconfont图标&#xff0c;现在就将iconfont图标引入到tabbar标签栏里边&#xff0c;看着vant提供的图标&#xff0c;必将有点丑啊23333&am…
阅读更多...
微信小程序自定义tabBar以及图标-使用vant-weapp

微信小程序自定义tabBar以及图标-使用vant-weapp

小程序整合vant weapp可以看《微信小程序vant weapp安装与使用》 微信官方文档有介绍自定义tabBar 1、在小程序根目录下创建custom-tab-bar文件夹&#xff0c;并创建以下文件。&#xff08;这个是作为入口文件的&#xff09; custom-tab-bar/index.js custom-tab-bar/index.…
阅读更多...
WeTab新标签页：浏览器主页就可以直接使用的Chat GPT

WeTab新标签页：浏览器主页就可以直接使用的Chat GPT

我一直觉得&#xff0c;如果能在打开浏览器的时候就能使用chatgpt&#xff0c;那可以说是再方便不过了。 刚好前段时间我发现我正在使用的WeTab新标签页刚好有了这个新功能&#xff0c;可以在新标签页上直接用gpt。 因为一些原因&#xff0c;很多人都被注册chatGPT的繁琐步骤劝…
阅读更多...
Chat GPT使用体验，现在不会还有人没用过GPT吧？

Chat GPT使用体验，现在不会还有人没用过GPT吧？

“ChatGPT 好得吓人&#xff0c;我们离强大到危险的人工智能不远了”。 这是我们最近听到不少的一些声音&#xff0c;甚至有许多美丽国的大佬&#xff0c;联名要求停止gpt5的开发。 然而&#xff0c;尽管 ChatGPT 确实是一种相当出色的模型&#xff0c;但它也有其限制和局限性…
阅读更多...
用后即弃的人造人

用后即弃的人造人

即使各种鼓励政策不断被使出&#xff0c;很多发达国家的女性&#xff0c;也不大愿意生孩子了。少子化是现代化、工业化的附赠品&#xff0c;这一点无可回避。 所以很多人都很期待用科技来造人。埃隆马斯克&#xff08;Elon Musk&#xff09;等人提出的“人造子宫”方案&#xf…
阅读更多...
Android程序员惨遭社会毒打，如何快准狠的应对下次危机？

Android程序员惨遭社会毒打，如何快准狠的应对下次危机？

一、程序员现状 今年年初&#xff0c;我同行朋友的小公司辞退了10多个程序员。 近3个月过去了&#xff0c;大概一半的人找不到合适工作。大家聊起时正在感慨这两年好多行业都不景气&#xff0c;朋友说&#xff0c;他的前同事们不少非科班出身&#xff0c;半路参加培训机构后就…
阅读更多...
波士顿动力新年炸场！人形机器人飞身转投工具包，最后体操式落地把人类给整不会了...

波士顿动力新年炸场！人形机器人飞身转投工具包，最后体操式落地把人类给整不会了...

杨净 丰色 发自 凹非寺量子位 | 公众号 QbitAI 波士顿动力Atlas&#xff0c;又来整活炸场了&#xff01; 不是跑酷不是跳舞&#xff0c;而是去工地老实上班当助手&#xff0c;结果把人类给整不会了。 当高架上工人需要工具包&#xff0c;Atlas二话不说完成搭桥、爬楼等一系列动…
阅读更多...
“Google 之母”诞生 | 历史上的今天

“Google 之母”诞生 | 历史上的今天

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 7 月 5 日&#xff0c;在 1994 年的今天&#xff0c;在半导体大战中&#xff0c;英特尔宣布降价以阻止竞争对手&#xff1b;当天&#xff0c;英特尔公司宣布了其…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发