基础课-前端

发布时间 2023-11-06 15:49:09作者: HeFury

前端技术的实际意义

前端就是软件中的图形界面页面

软件通过前端界面:1.获得用户的输入数据

                                2.展示数据给用户

前端开发需要掌握的三项技术(语言):

1.HTML 超文本标记语言

2.CSS 层叠样式表语言

3.Java Script(JS) 动态脚本语言

HTML基本语法

HTML代码需要编写在后缀是.html文件中

HTML代码构成是由若干标记和标记中的文本内容构成

标记是HTML中最为核心的语法

被一对尖括号括起来的一个英文单词就是标记

标记分为起始和结束标记(/:代表结束)

标记在运行时并不会显示在浏览器中,它的意义是控制它中间内容的显示

标记之间有夫子关系、兄弟关系

标记分类:

1.行标记:可以和其他的行标记共处一行,从左向右显示

2.块标记:必须独占一行显示

3.双标记:有起始有结束,标记中间必须有内容

4.单标记:只有起始,不需要内容

HTML常用标记:

html.5:总代码 每次进行编码都要先写

big:字体变大      例如:<big>内容</big>

small:字体变小      例如:<small>内容</small>

strong:字体加粗      例如:<strong>内容</strong>

em:字体倾斜      例如:<em>内容</em>

h1~h6:字体变大加粗黑体字,1~6字体依次变小       例如:<h1>大标题</h1>

br:强制换行

hr:水平分割线

a:超链接,必须设置href属性, 尖括号中间填写名称,起始和结束中间的双引号填写需要跳转的地址

例如:<a href="https://www.baidu.com">百度一下,你就知道</a>

img:插入图片 必须设置src属性(公式:./) 可选加宽度、高度

width:宽度 单位:px

heigh:高度 单位:px

例如:<img src="./素材/程序员.jpg" width="100px" height="100px">

audio:插入音频 必须设置src属性(公式:./)controls(加入按钮)

例如:<audio src="./素材/out.mp3" controls>浏览器版本过低</audio>

video:插入视频 必须设置src属性(公式:./),controls(加入按钮),width、height

例如:<video src="./素材/抖音.mp4" controls width="200px" height="200px"></video>
input:输入标记 可以设置不同的type属性值
(text:文本输入框、password:密码输入框、radio:单选按钮、checkbox:多选框、date:日期选择框、color:颜色选择框)
例如:
<input type="color">
select:下拉列表
option:选项
公式:select>option*数量      
例如:<select name="" id="">
        <option value="">黑龙江</option>
        <option value="">吉林</option>
        <option value="">辽宁</option>
    </select>
button:插入按钮      例如:<button>点我中大奖</button>

标记属性

使用某些标记时,根据使用需要需要设置属性

属性设置在起始标记中,语法:属性名="属性值"