前端与HTML | 青训营的笔记

59 阅读2分钟

这是我参与[第五届青训营]伴学笔记创作活动的第1天

一、本堂课的重内容:

  • 前端的概述
  • HTML基础

二、前端的概述:

  1. 前端介绍:前端即是网站中前台的部分,它可以运行在pc端,移动端等浏览器上展示给用户浏览的网页。但是随着互联网技术的进步,前端运用在更多的地方。
  2. 前端基础的技术栈HTML5,CSS3,JavaScript前端基础三大件,HTML5用于网页的结构设计,CSS3用于设置网页元素的版式,颜色,大小等外观设计,js主要负责行为行为就是实现交互效果。

三、HTML基础:

  1. HTML的简介:HTML是一种标记语言,它是不可以设置样式的。
  2. HTML基础标签:注意:明白标签一般是双标签,当然还有特殊的单标签<br/>
  3. 理解HTML语义化的好处:开发效率提升等

HTML基础标签:

1、认识基础结构标签:

<!DocTYPE html> 文档声明标签,告诉浏览器使用什么版本渲染效果
<head></head>不给用户看的就写在这里面
<body></body>用户可以看的,HTML代码基本写在这里面

2.常用标签:

标题标签,一共六级加粗,字体从大到小

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

实现效果

20230115120019.png

段落标签
<p>文字</p>,根据浏览器窗口变化大小
图片标签
<img src="URL图像地址"/>,可以设置图片高宽
链接标签
<a herf="网站地址" target="窗口弹出方式"(_blank打开一个新页面)>文本或图片</a>
列表标签

  1. 无序列表
    ul>li含有小圆点,内容上没有先后之分
  2. 有序列表
    ol>li含有数字,内容上有先后之分,就像排名一样
  3. 自定义列表
    dl>dt>dd没有明显特征,内容上可随意

表单标签几个重要的,有代表性的
<input type="属性"/>输入表单元素
select>option下拉表单元素
<textarea></textarea>文本域表单元素

四、个人总结:

本节课中,讲的基础标签较多,但是难度不是很大。总的来说还是很好的,就是标签记忆要结合代码编写来记忆。加油!