第一天:Web基础

今天是学习的第一天,我们需要学习的内容是 Web基础,也就是所有前端小白必须要了解熟悉的内容

一、网页是怎么组成的

  • Html:内容层——负责页面的内容——文字、链接、图片…
  • CSS: 样式层——负责页面的样式——颜色、大小、位置、表现…
  • JavaScript:行为层——负责页面的行为——交互效果、轮播图

二、HTML 是什么

HTML:超文本标记语言 Hyper Text Markuip Language,可以把它简单理解成我们常见的网页,Html 是一门编程语言,由大量的标签组成。

超文本:指文本、图片、超链接、音频、视频…
标记(标签):HTML的语法标签 <>

三、HTML的语法规则

1、HTML的特点

  • HTML文档是以 .html 或者 .htm为后缀
  • 需要由浏览器解析执行(默认代码从上往下、同一行从左往右执行)
  • 页面中还可以嵌入JS代码(交互)
  • 我们学习的是 HTML5 ,代表第5次重大版本修改,简称H5

2、语法基础

标签:<标签名>用尖括号包裹标签名,分为:
双标记标签,封闭类型标签
<开始标签> 内容区域 例: 我是标题
单标记标签,非封闭类型标签
<标签名/> h5 后可以单标记标签不加斜杠 <标签名> 例:

3、完整的HTML结构和基础标签

DOCTYPE HTML>   


<html> 

    <head>   
            <meta charset = "utf-8"> 
        <title>我是标题:南昌彭于晏title>
    head>
 
    <body>
   
        我是要展示的内容
                <b>加粗文本 boldb>
                <strong>加粗文本strong>
        <i>斜体文本 italici> 
        <u>下划线文本 underlineu>
            <s>删除线(中划线)文本s>
        <del>删除线(中划线)文本 deletedel>
        <mark>高亮标记文本mark>
                上标字:X<sup>2sup>
        下标字:y<sub>1sub>    
                <br>
                
        < tom >
        
        ©
        
        ®
        
        ×
        
        
        
        ÷
        
        
        
              
    body>    
html>

4、段落标签


        <p>我是一段话,代表自然段1p>
        <p>我是一段话,代表自然段2p>
        
        
        
        
        
        <h1>江西彭于晏h1>
        <h2>江西彭于晏h2>
        <h3>江西彭于晏h3>
        <h4>江西彭于晏h4>
        <h5>江西彭于晏h5>
        <h6>江西彭于晏h6>
        
             lorem
            

5、分割线标签



<hr  color="blue" size="10px">

四、Hbuilder 的快捷键

想要开始 html 的学习,必须下载相关的软件,Hbuilder就是一款前端开发的软件,可以去百度下载,下载地址如下:https://www.dcloud.io/

常用快捷键

  • Ctrl+C 复制当前行
  • Ctrl+V 粘贴当前行
  • Ctrl+D 删除当前行
  • Ctrl+↑/↓ 向上/向下移动当前代码
  • Ctrl+/ 添加注释,再按一次取消注释
  • 按出 Ctrl 点击多处可以同时编辑,按 Esc 退出多行同时编辑
  • h1*100 按 Tab 键可以补全快速出现100个 h1标签
  • 按 Ctrl + Enter 可以在下一行添加一个空白行
  • lorem + 回车 ,可以生成一个假文章

五、图片

图片的分类

  • pg / jpeg 普通图片
  • png 带透明度的图片
  • gif 动图
  • webp 谷歌新出的图片格式(最清晰、体积最小)

你可以这样使用

src = 图片路径  (可以使用本地路径、也可以使用网络图片,使用网络图片时,需要使用绝对路径)
alt = 资源加载失败时显示的替换文字(非必填)
width = 图片的宽度,单位(% 或 px)
height = 图片的高度,单位(% 或 px)
建议修改图片宽高时,只修改宽度或高度,代码会根据设定的宽高比自动适配,如果宽高一起设置,需要按照图片宽高比例来调整。

 
<img src="photo.jpg" alt="哎呀图片走丢了"  height="100px" width="300px" >

<img src="img/photo.jpg" alt="哎呀图片走丢了"> 
        

<img src="../photo.jpg" alt="哎呀图片走丢了">

<img src="https://cdn.tmooc.cn/bsfile//imgad///d65b725e8ffa4d8f9c764adde2837545.jpg" alt="">

自学如果缺乏恒心,专业知识就无法得到巩固,与大家共勉!

你可能感兴趣的:(从零开始学前端之一阶段,前端,javascript,html)