前端与HTML ｜ 青训营笔记

学习前端的代学生
103 阅读2分钟

前端与HTML ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

一、前端简介

1.前端是什么

  • 解决图形界面下的人机交互问题
  • 跨终端
  • web技术栈

2.web标准

  • 结构->html:页面元素和内容(超文本标记语言)
  • 表现->css:页面外观和位置(颜色、大小)
  • 行为->JavaScript:网页模型的定义和页面交互

二、语法和规范

1.语法

注释：<!-- 内容 -->

  • 标签和属性不区分大小写
  • 空标签可以不闭合
  • 属性值用双引号包裹
  • 某些属性值可以省略

2.标签

  • 双标签：前部分叫开始标签，后部分叫结束标签
  • 单标签：自成一体，无法包裹内容

父子关系（嵌套），兄弟关系（并列）

  • 标题标签：<h1></h1>一共6级
  • 段落标签：用于分段表示<p></p>
  • 换行标签：<br>
  • 水平线标签：<hr>在页面上中显示一条标签
  • 文本个格式化标签： Image.png

后面一种用法用于强调语境的重要性

Image.png src标签属性

Image.png alt 替换文本,在文本没有加载成功时发生 title 提示文本,当鼠标悬停在上面的时候显示

width和height设置高度和宽度,如果只设置一项,另一项按原图比例显示

  • 绝对路径:

  • 相对路径:上级目录,同级目录,下级目录  ./返回上级,多少个.返回多少级

  • 音频标签:<audio src="" controls></audio>

Image.png

  • 视频标签:<video src="" controls></video>

Image.png

当开发网站开始,还不知道跳转地址,就写#

target = ""

三、列表

1.无序列表<ul></ul>

ul:表示无序列表的整体

li:表示无序列表中每一项

2.有序列表<ol></ol>

ol:表示有序列表的整体

li:表示任何内容

3.自定义列表

Image.png

四、表单

表单标签

  • input系列标签:<input type="">

用于收集用户信息的表单效果,根据type属性的不同,展示不同的效果。

Image.png

  • 占位符:(test)

单选框:在网页上显示多选一的单选表单控件(radio checkbox)。

多文件选择:在网页种显示文件选择的表单控件(file)。

  • button按钮标签

场景:在网页上显示用户单击的按钮。

标签名:button

  • select下拉菜单标签

场景:在网页提供多个选择项的下拉菜单控件。

  • textarea文本域标签

场景:在网页中提供可输入多行文本的表单控件。

  • label标签

场景:用于绑定内容和表单标签的关系。

标签名:label

  • list标签

给用户给予提示,让用户有多个选择。

  • blockqute标签**
  • <blockqute cite="表来源">  长引用,表示引用别人的话
  • <cite>用于引用几个字的时候,表示名字或章节
  • <q>引用具体的内容
  • <code>表示代码

五、语义化的标签

1.无语义的标签

<div>和<span>

2.有语义的标签(用在手机上的标签)

Image.png

lang表示内容所使用的语言。

avatar
文章
阅读
粉丝