前端|HTML基础 day01

最新推荐文章于 2024-07-30 16:49:30 发布

albercx

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量198

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/albercx/article/details/125969493

版权

前端HTML|青训营笔记-HTML基础

请添加图片描述

新人第一天请指教

一.什么是前端?

解决*GUI(图形用户界面)*的人机交互问题所做的事情
解决跨终端问题
个人认为前端的意义在于：
1.提高产品的开发效率（前后端分离）
2.提高用户的是用体验

二.前端的技术?

前端会用那些技术？
- 三件套（HTML CSS JavaScript）
- HTTP协议
- 前后端交互技术（ajax Socket）

请添加图片描述

服务器通过HTTP（网络协议）来与浏览器通信交换数据，浏览器可以从服务器获得前端的代码，通过自己的渲染引擎来生成页面

而浏览器也可以把用户在浏览器中填写的内容（像是用户名、密码、文字等）通过HTTP协议传到服务器来进行存储

前端在互联网是发展的很快的领域，技术也在随时的更新，而且前端不止可以来写页面

Node.js: 可以开发服务器端的一些应用
ELECTRON：可以开发客户端的应用
WEBRTC：可以实现在线的传输（可以做一个多人的聊天室）

三.开发环境

请添加图片描述

首先我们需要一个浏览器（毕竟要写页面没浏览器咋成啊！）推荐首选Chrome也就是谷歌浏览器
编辑器的话VSCode WebStorm都行

四. HTML

4.1 HTML是什么

HyperText Markup Language：即超文本标记语言

超文本：字面意思超过文本就是不只有文本还可以是图片链接表格等

请添加图片描述

标记语言：所以说HTML不是编程语言，他用标签来描述网页

在这里插入图片描述

<!doctype html>：声明为 HTML5 文档
<html>：HTML 页面的根元素
<head>：头标签
<title>：文档标题
<body>：页面的内容
<h1>：一级标题
<p>：段落内容

4.2 HTML语法

标签和属性不区分大小写，推荐小写，自定义的标签用大写
HTML 标签通常是成对出现的，比如 <b></b>
空标签可以不闭合，比如input、meta
我们的属性值推荐用双引号包裹
有些属性有默认属性值像是input标签的required属性是一个Boolean值

4.3 HTML一些标签

4.3.1 标题标签： h1~h6 从大到小

4.3.2 列表标签

有序列表<ol> <li></li> </ol>：用的相对较少
无序列表<ul> <li></li> </ul>：用的较多
自定义列表<dl> <dt> <dd></dd> </dt> </dl>:用的相对较少
- dl(defnition list)>dt(definition title)>dd(definition description)

在这里插入图片描述

4.3.3 超链接标签

<a href="https://www.baidu.com/" target="_blank">百度</a>

href:超链接引用地址（把网址直接填上，点击a标签跳转到href里的网站）
target:可以理解为在哪里打开网站，_self是在当前页面跳转_blank是新建一个页面，在新建的页面访问网站

4.3.4 input标签

<input type="text" palceholder="FirstName" value="Mickey">

input 标签的type属性值（如下图）：checkbox:多选框、date:日期…

在这里插入图片描述

4.3.5 下拉列表表

<select> <option></option> <select/>

<option></option>:是下拉列表的值的标签

在这里插入图片描述

五.语义化

5.1 啥是语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器更好的解析。

5.2 语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

参考资料

菜鸟教程

W3C School

albercx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端|HTML基础 day01

解决*GUI(图形用户界面)*的人机交互问题所做的事情解决跨终端问题个人认为前端的意义在于1.提高产品的开发效率（前后端分离）2.提高用户的是用体验。
复制链接

扫一扫