Web前端--从入门到自闭cursor: pointer

标签的快捷键:单词 + tab键 +单词

h3初始代码:!+Tab 快速创建符合规范的html

<!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>

注释

html的注释:<!-- 注释的内容 -->

css的注释: /* 注释的内容 */

vscode快捷键是:ctrl + /  和 shift + alt + a

标题h和段落p

<h1> - <h6> 标签可定义标题。

<h1> 定义最大的标题。(尤为重要,一个html文件最好只出现1次

<h6> 定义最小的标题。

亲自试一试

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。

亲自试一试

文本修饰

<strong></strong>

<em></em>

  • 写法和展示效果是有区别的,一个加粗、一个斜体
  • strong的强调性更强,em的强调性稍弱。

下标 : <sub></sub>
上标 : <sup></sup>

删除文本 : <del></del>
插入文本 : <ins></ins>

  • 一般情况下,删除文本都是和插入文本配合使用的。

图片img

元素向网页中嵌入一幅图像。用于展示

  • src : 引入图片的地址。
  • alt : 当图片出现问题的时候,可以显示一段友好的提示文字。
  • 前两个是是必须属性
  • title : 提示信息
  • width、height : 图片的大小

亲自试一试

如何正确地使用图像

原文地址:https://www.cnblogs.com/Dalala/p/12548196.html

时间: 2024-10-11 01:30:26

Web前端--从入门到自闭cursor: pointer的相关文章

web前端工程师入门须知

先说下web前端工程师的价值,目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做web前端工程师是 设计加开发的综合体,web前端工程师是在开发人员中最直接面向产品,面向用户的设计人员,一个开发团队的成果是要靠web前端工程师去展现,因为用户不 会去关心后台的处理有多么强大 :在设计人员中web前端工程师是直接面向开发人员的设计人员,向开发人员以一种计算机语言的方式传递其设计理念,web前端工程师在整个团队中是很关键 的. 在我眼中一名合格的web前端工程

web前端开发入门HTML5知识点

1.首先我们先了解一下什么是前端,简单说,就是我们平常所浏览的网页啊,以及app首页和小程序. 2.我们经常访问浏览器的时候,经常会输入网址,又可称为域名http://www...com.有时候是http有时候又是https,二者的区别在于后者更加安全些,有秘钥.www就是万维网,后缀com.org.edu.cn以及DNS称为域名. 3.web开发设计的基础之一是html.html基本框架有以下几部分组成:结构<html><!DOCTYPE html> .//声明网页类型 lang

Web前端从入门到精通-2 关于html和开发工具

上节课呢,我们说到了html源文件在浏览器中打开就是一个网页了,那么html源文件是怎么来的呢? 很多教程为了让大家很快入门,就直接告诉大家说先创建一个记事本文件,然后把它的扩展名改成html,双击就会发现在浏览器中打开了 之后就对记事本里面怎么写html开始大讲特讲 但是个人认为,这样说忽略了初学者的感受 第一次接触html的朋友如果看到上面这样的讲解的话很容易会提出疑问 你为什么新建了一个txt改成了html就可以了?我新建一个别的文件比如word文件(扩展名为doc)改成html可不可以呢

Web前端从入门到精通-9 css简介

欢迎大家回来,前段时间给大家介绍了浮动以及清除浮动的相关内容 上节课到最后我们留了一个小问题 如果所有的子元素都没有加浮动,父级不设置高度时,父级的高度会不会随子级的高度自动撑开 我们可以通过下面的代码来测试 .ul1{ width:102px; border:2px solid red;} .ul1 li{ width:100px; height:100px; border:1px solid black;} <ul class="ul1"> <li><

Web前端从入门到精通-4 html简介

本节课我继续带着大家学习html 上节课的话我们已经有了一个页面,大概长成这个样子: <!DOCTYPE html> <html lang="en"> </html> 双击这个文件打开预览,什么都没有 好的,从现在开始我们给它加一些内容 根据html语法规定,html标签里的直系子标签有head body等 所以你的脑海中应该想着我们的页面变成了这样 <!DOCTYPE html> <html lang="en"

Web前端从入门到精通-7 css简介

欢迎回来,上节课没有给大家留什么问题,但是介绍了一个很重要的问题,那就是css的层叠优先级顺序: 行间样式>id选择器>类选择器>元素选择器 好的,复习到此结束,接下来我们继续学我们的css 这节课要讲一个很重要也是理解起来略有困难的东西——浮动 之前的课程中我们举了好几个列表的例子,但无一例外的是所有的列表都是竖着成一排的 那么怎么让它们横起来呢?——就是用我们的浮动(float) 在正式介绍浮动这个东西之前,我们先来说个知识点——块元素和内嵌元素 什么意思呢?不知道大家是否发现了一个

Web前端从入门到精通-13 css简介

欢迎回来,上节课的话我们做了一个导航 总体来说还能看,但是也有一些小问题 首先,当我们把鼠标移上去的时候不变成小手 这个看起来最不舒服了 所以先从这里开刀 说到这里了,想和大家沟通一个问题 我们平时上网的时候鼠标放到什么地方才变成小手呢? 是不是可以点的地方呢? 可以点的话意味着什么? 意味着是一个链接对不对 链接的话在我们的html里面毫无疑问就是a标签了 好的,说到这里脾气着急的马上就会说,那就用a标签包裹文字不就完事儿了? 话一说完,代码就会被改成这样 <!DOCTYPE html> &

Web前端从入门到精通-10 css简介

上节课呢,我们介绍了一个很重要的概念——盒模型 主要介绍了盒模型的一些基础知识:margin padding的概念 以及margin:0 auto;和margin的塌陷 如果对上述知识点还有不清楚的地方大家一定要弄懂 要不然再往下看的话比较费劲 这节课的话我们接着上节课的话题继续扯 实际上关于margin的话题还远远不止我们上节课说的那些问题 我们再看下面一个布局: <!DOCTYPE html> <html lang="en"> <head> &l

Web前端从入门到精通-6 css简介

上节课我们主要介绍了三种css的选择器 结束的时候留了一个小问题,不知道大家还有没有记得 当多种选择器同时对一个元素操作时,会有什么情况呢? 不知道大家试了没有 先说句题外话,可能有的朋友说 你闲的蛋疼用多种选择器操作一个元素 我让一种选择器操纵一个元素不就可以了吗 我们学一个东西往往是为了用的,而不是为了装13的 所以我提出的这个问题自然有它的价值所在 接下来我会给大家分析 还拿我们的列表做例子,这次给大家举一个百度首页的例子 百度的推荐导航列表这里是不是我们的鼠标移上去的那一个块儿 外面会出