第一节课(html5和css3)

最新推荐文章于 2024-11-02 15:48:17 发布
最新推荐文章于 2024-11-02 15:48:17 发布
阅读量167 收藏
点赞数 2
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tianjiangganquan/article/details/127879843
版权

html的初体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  这是我的第一个页面
  <!-- 通过注释写笔记 -->
  <!-- html元素/标签/根标签(根元素) 所有的网页元素都要写在里面 -->
  <!-- 开始标签和结束标签,一个页面只能有一个html标签 -->
  <!-- head标签,保存一个元信息 它里面的内容,用户看不到
  主要帮助浏览器编译代码 -->
  <!-- body标签 书写网页的主体内容,所有的给用户看 -->
</body>
</html>

利用Typora记录笔记

 

页面一整个完整的所要求的基本元素

<!DOCTYPE html>,<html>,<head>,meta, <body>


<!DOCTYPE html>

<html>
  <head>
    <!-- meta标签 是一个自结束标签 也可以存一些信息 帮助浏览器编译代码
      自结束标签(单标签)有两种写法<meta>和 <meta /> 
    在开始标签里我们可以加属性 和 属性值
    charset 字符集属性 设置密码本
    uft-8 万国码属性值 某一个密码本
    GB  GBK中国扩展版-->
    <!-- 
      编码:文字,图片,音视频===>二进制
      解码:二进制===>文字,图片,音视频
      乱码: 编码和解码用的不是一个密码本
     -->
    <meta charset="utf-8">
    <meta name="keywords" content="手机大全">
    <meta name="description">
    <title> 网页标题</title>
  </head>
  <body>
    娟评讨，井夫不。
  </body>
</html>

快捷生成:

 shift + tab + ! 网页结构快捷键

代码规范

<!-- shift + ! 网页结构快捷键 -->
<!-- 格式化代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 一下的代码是我吗响应式开发配置 -->
  <!-- 右键格式化代码 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.html标签成双成对,也有自结束标签
       2.html 不区分大小写, 一般小写居多
       3.标签可以嵌套 但不可以交差嵌套
       4.注释尽量养成良好的注释规范 简洁明了 注释也不可以嵌套!!!
       5.我们的html,css,js都是一种宽泛的语言,它的容错率比较高 它会给你自动纠错
       但是我吗要近两年避免 防止网站的性能有所影响 而且它改的不一定是你想要的
      -->
</body>

</html>

 

实体

<!-- shift + ! 网页结构快捷键 -->
<!-- 格式化代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 一下的代码是我吗响应式开发配置 -->
  <!-- 右键格式化代码 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
    什么事实体
     在编写网页是 我们的有些字符无法打出来,例如空格,大于小于号等
       这些字符已经提前被编译器征用, 我们不能正常使用,我们用额外的 字符来代替这些额外的字符叫实体
    实体的语法
    &实体的名字;
    常用的实体
      空格  &nbsp;
      大于号 &gt;
      小于号 &lt;
      版权符号 © &copy;
   -->
   今天我很开心 &nbsp; &nbsp; &nbsp;        太开心了
   2&lt;5
   
</body>

</html>

 常用标签

<!-- shift + ! 网页结构快捷键 -->
<!-- 格式化代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>语文</title>
</head>

<body>
  <!-- 
    html 主要就学习一些标签, 30~40个够用
    css 样式
   -->
  <!-- 标签 html 要关注语言的意义 不关心样式-->
  感觉快下雨了!
  感觉快下雨了!
  感觉快下雨了!
  死洞褒量升贤罚后，元同陈王惊量的仄留天向融张，国入反，看拾就答楚知不磊外天回不一老整对程为，白了最为月到陀气了，承且贤的，我惶同身满丑事元重叩而够想她极是，尺受爱司他则龄养破，婵当对融要你思千始关里。
  <!-- 
    1.标题标签
    h1:一级标题
    h2:二级标题
    默认样式: h1 ~ h6,字体大小逐步减小, 字体加粗,会变黑
    从语义上看 h1~h6 语义是逐步降低的, 也是可以帮助浏览器检索内容,帮助网络排名
    常用的标题标签为h1~h3
    标题标签会独占一行,是块元素
    h1的语义是最重的,所以页面只能有一个
    h3
    h4
    h5
    h6
   -->
  <h1>感觉快下雨了</h1>
  <h2>感觉快下雨了</h2>
  <h3>感觉快下雨了</h3>
  <!-- 2,段落标签 p 
   默认样式: 段落与段落之间有较大的距离
   段落标签也会独占一行
    -->

  人她妄能为情之才心畴文承弟不罪，帅的别。
  <p>会德么订赏却种，览妄如留招我不得密，也。</p>
  <p>会德么订赏却种，览妄如留招我不得密，也。</p>

  <!-- 3,标题分组 让标题之间有关系,没有默认样式 -->
  <hgroup>
    <h1>古诗一首</h1>
    <h3>杜甫</h3>
  </hgroup>

  <!-- 
    4,strong 强调标签
    默认样式: 字体加粗加黑
   -->
  <p>我,看着<strong>真帅</strong></p>
  <!-- 
    5, em 强调标签 
  -->
  <p>我,看着<em>真帅</em>/p>
    <!-- 
      面试题:在html中,有两个强调标签, 他们有什么区别
      默认样式有区别
      语义上有区别: strong强调的内容, em强调的是语音语调
      一般情况,在实际的使用当中,em,strong不做区别
     -->
     <p>同学们,你们可<strong>真帅</strong></p>
     <!-- 
      6. br 强制换行,是一个自结束标签
      -->
      上承木活负情恩学，<br>希沫里问有禀五们倒认，圣句说光目价我韩人。
      <!-- 
        7,hr 分割线 
      -->
      读非破登死大非且<hr>招苟创牙太救赏其死说作。

      <!-- 
        8.del 删除线
       -->
       原价: <del>199999元</del><br>
       现价: 1999

       <!-- 
        9,center
        -->
      <center>
        <h1>打德兮。五</h1>
      </center>

      <!-- 
        10,div 是一个没有任何语义的标签是块元素
       -->
       三命知说然太，衣说。
       <div>
        张以之过，婵无降降。
       </div>
      <!-- 
        11,span 是一个没有意义的标签,常用来包裹文字
      -->
       <span></span>

       <!-- 
        12,引用标签
        默认样式:加双引号
        -->
        子曰:<q>学而时习之</q>

        <!--  -->

</body>

</html>

img标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    开始标签里 可以添加多个属性, 用空格隔开即可
    img 标签
    也是一个自结束标签
    4个属性:
    src 引入图片的路径
    alt 是对图片的描述,正常情况下, alt的内容不显示,当图片的路径出现问题了,引入不成功
    它可以帮助我们的百度检索图片,养成写alt的习惯
    width 设置图片的宽度
    height 设置图片的高度
   -->
   <img src="img/粉色少女系文胸 - 副本 (5).png" alt="文胸" width="100" height="80" >
</body>
</html>

天降甘泉
关注
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6557
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
HTML5+CSS大作业——传统节日--中秋节(5页)
12-01 2516
HTML5+CSS大作业——传统节日–中秋节(5页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HTM
HTML5入门第一节课
qq_43236351的博客
08-26 200
2019/8/26 <input type="text" placeholder="默认值"/> CSS3 渐变 转换 过渡 动画 flash H5 canvas 小的进阶 js Jq 主流浏览器 谷歌 IE 火狐 欧鹏 safari HTML5 定义： 新的DOM标准 html+css+api+api 解释性API H5 定义：...
零基础学HTML5和CSS3前端开发第一课
张晨光老师的播客
09-01 1095
课程目标： 使用HTML5进行网站布局 使用CSS3进行网站美化 开发精美的商业网站 第一章 HTML5基础 概念： 网页 ：互联网的基础，网络页面,网页：文字、图片、声音、视频、VR虚幻等； 网站：淘宝网、京东、亚马逊、腾讯、新浪、网易、哔哩哔哩等，网站就是网页的集合。 浏览器：查看网页的工具；主浏览器：谷歌浏览器Chrome、火狐浏览器、IE（Edge);360、2345、百度等这些浏览器，这些浏览器在国内使用，内核还是外国上述三种的； 1.HTML HTML:超文本标记语言(Hy
H5CSS3第一课——CSS选择器
pumpkin_truck的博客
03-21 445
CSS中的选择器的种类非常多，并且在CSS3中也新增了一些选择器，使选择器的功能更强大，具体如下。结果图有点乱，但是一个一个截图实在是太麻烦了，将就看看吧。/* 鼠标悬停时背景颜色为#0099E5 *//* 设置偶数行背景颜色透明度为0.9 *//* 设置导航栏中的每一项的样式 */`这个比较简单就，不截图结果图了。/* 设置超链接的样式 *//* 设置导航栏样式 */
html5+css3+js学习笔记（持续更新
m0_61041374的博客
04-28 586
可以发现和有序不同，无序的每一个前面都有一个点，代表并列的意思。那我可不可以将那个点去掉呢？当然可以。同样的也可使用type属性（已经不建议该方法，建议用css）：type=“disc” 默认实心圆type=“circle” 空心圆type=“square” 小方块type=“none” 不显示。
HTML5+CSS3+JS(第一课)
热门推荐
null
05-04 1万+
html5+css3+jacascript 一. 简介   书就不介绍了，讲的内容呢。标题都很清楚了，HTML5和CSS3和JS。就这些内容。 二. 第一章:HTML5   1. 发展历史，HTML4.01、XHTML、DTD这个就不用介绍了。因为页面要绚烂，编程要规范，所以除了这么个HTML5。   2. 第一章第二节也就讲了点HTML5的优势:     2.1 解决跨浏览器问题
css3网站代码 html5_html5+css3网站代码
weixin_39967996的博客
12-23 417
文章任平生782017-08-02610浏览量提高前端开发质量和效率的脚手架和工具套件 - Uix KitHello, 这次推荐一款提高前端开发质量和效率，一种流程参考和思维模式的小玩意儿——Uix Kit! 它是一个基于Bootstrap的快速建站HTML5套件，遵循W3C标准，包括手风琴、Tab切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX交互、常用的多风格轮播、...
怎样快速学会HTML和css,CSS教程第一课：HTML 三分钟快速入门
weixin_39620845的博客
06-20 304
45年前，北京时间10月29日上午10点，计算机向世界发出了它的第一句话“LOL”，标志着互联网时代的诞生。而今天的我们，在享受着互联网便利的同时，是否产生过这样的思考：互联网中我们最直接接触的网页，又是如何诞生的呢？这个问题，可以追溯到更近的时间，25年前，HTML这门语言第一次诞生的时候。这是因为，网页的基本构成可以简单概括为由HTML、CSS和JS三部分构成。当然，这三部分的出现时间也是有着...
电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】
数据库爆破专家的博客
04-19 7091
文章目录【考拉海购网站】之【分类导航栏】第一步，分析页面布局第二步，写需要的html标签 【考拉海购网站】之【分类导航栏】 之前我们做了顶部导航和搜索框的部分，这一篇我来讲解如何制作分类导航部分 第一步，分析页面布局 总共4个主要的部分：   1，横向分类导航栏   2，垂直分类导航栏（二级下拉菜单）   3，三级菜单内容  &...
【HTML5期末大作业】制作一个简单HTML我的班级网页（HTML+CSS+JS
qq_524614081的博客
11-15 528
HTML：结构CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
节日网页作业成品HTML5+CSS大作业——传统节日--中秋节(5页)
01-08 793
HTML5+CSS大作业——传统节日–中秋节(5页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 文章目录HTML5+CSS大作业——传统节日--中秋节(5页)一、作品展示二
做一个能适配「手机」的网站需要注意什么
illidri的博客
11-01 229
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
前端react常见面试题目（basic)
最新发布
警警的博客
11-02 724
react常见面试题目（basic)
前端 常见开发工具使用
weixin_45534301的博客
10-31 435
【代码】前端 常见开发工具使用。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 664
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
Google Recaptcha V2 简单使用
吴家健ken的博客
10-30 276
Google Recaptcha V2 简单使用
前端JS去重的多种方法
Front end development engineer
10-30 335
在前端开发中，去重操作是非常常见的。无论是处理用户输入、数据请求还是渲染页面，都可能需要对数组或对象进行去重。下面将详细介绍几种常见的前端JS去重方法，并分析它们的优缺点。以上就是前端JS去重的几种常见方法。每种方法都有其优缺点，选择哪种方法取决于具体的需求和场景。如果需要兼容性好且可以保留顺序，可以使用filter()、reduce()或for循环；如果追求性能和简洁性，可以使用Set或Map。对于对象去重，Map是最好的选择。
HTML入门教程3：HTML元素
软考鸭
10-29 499
HTML元素由开始标签、结束标签和内容组成。开始标签用于指定元素的名称，结束标签用于标记元素的结束，而内容则位于开始标签和结束标签之间。HTML元素可以包含属性，这些属性提供了关于元素的额外信息或对元素进行样式设置。通过学习和掌握HTML元素的基本概念、类型、属性、嵌套与结构以及注意事项，您可以创建出结构良好、内容丰富的网页。HTML元素可以嵌套在其他元素中，形成嵌套结构。是段落元素的结束标签，而“这是一个段落”则是元素的内容。元素又可以包含其他内联元素。是段落元素的开始标签，6>`标签定义表格。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值