前端和HTML基础-CSDN博客

本文链接：https://blog.csdn.net/ge_ziye/article/details/128696795

本文重点：

1. 介绍什么是前端。

2. 简单介绍了html以及html中常用的一些标签。

前端

1.含义

使用web技术栈解决多终端图形界面下的人机交互问题前端技术栈分为三层： HTML为内容，CSS为样式，JavaScript为行为，三者通过HTTP（网络协议）来与服务器端进行交互。

解决GUI人机交互问题

跨越端

PC/移动浏览器

客户端/小程序

VR/AR等

Web技术栈

2. 前端应该关注哪些方面？

美观

功能

无障碍

安全

性能

兼容

体验

3.前端的边界

4.开发环境

HTML

1.定义

HTML(Hyper Text Markup Language)指的是超文本标记语言注意:是一种标记语言,不是编程语言。

2.DOM树

一棵节点树中的所有节点彼此都是有关系的。除文档节点(document对象)之外的每个节点都有父节点。节点间的关系可以用下面的关系图来表示。

3.HTML语法

HTML标签是由尖括号包围的关键词。

HTML标签一般都是成对出现的。

第一个是开始标签，第二个是结束标签。例如"<b></b>"。

标签和属性不区分大小写。

空标签可以不闭合，例如<input>、<meta>

属性值推荐使用双引号包裹

某些属性值可以省略，例如required、readonly

而常用的HTML标签:p标签、h1--h6标签、div标签、ol/ul和li标签、dl/dt/dd标签，href超链接标签，input标签、img标签，label标签等。

4.HTML标签

4.1 标题标签

<h1>~<h6>,<h1>定义最大的标题，<h6>定义最小的标题。

例如：

<h1>这是h1标签</h1>

这是h1标签

<h2>这是h2标签</h2>

这是h2标签

<h3>这是h3标签</h3>

这是h3标签

<h4>这是h4标签</h4>

这是h4标签

<h5>这是h5标签</h5>

这是h5标签

<h6>这是h6标签</h6>

这是h6标签

4.2 段落标签

<p>双标签元素：定义段落

<br>换行标签(单标签)

例如：

<p>我是一段话<b/>我是另一段话</p>

我是一段话

我是另一段话

注意: 1：p标签、h1--h6标签内容建议只放文字。

2：h1~h6发生了变化的是字体大小。在一个HTML文档里面只能有一个h1标签。

4.3 列表标签

概念：列表分为有序列表(<ol/li>)和无序(<ul/li>)列表。（ol和ul标签的子元素只能是li标签！但li标签里面可以包含任何标签，且使用li标签时其父元素只能是ul或者ol），自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 结束。

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>


<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>


<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

效果如下：

世界电影票房排行榜

阿凡达

泰坦尼克号

复仇者联盟

购物清单

🍇

🍉

🍎

霸王别姬

导演：

陈凯歌

主演：

张国荣

张丰毅

巩俐

上映日期：

1993-01-01

4.4 超链接标签和图像标签

img标签是对图片引入的一种方式。

例如：<img src="url" /> url指存储图像的地址。其中属性有： src: 获取图片的地址。 alt: 可以看成是图片地址未能获取成功后的一种备用方案。 audio和video：对音频和视频的导入。

4.5 文本类标签

引用块：blockquote

预格式化文本：pre

代码块：code

4.6 表单标签与选择标签

<input>元素是最重要的表单元素，根据不同的type属性，可以变化为多种形态。 <select>元素定义下拉列表。 <option>元素定义待选择的选项。 <textarea>元素定义多行输入字段。 <button>元素定义可点击的按钮。

<input>标签的作用很广,它可以是一个按钮，可以是一个单选框或者复选框，也可以是一个文本框等。其中<input>标签的常用type属性有:text,password,radio,checkbox,file,data,number等等。

<label>标签：label标签是一种常见的表单控件。它的作用是使用户在填写表单的项目时有更好的体验。

例如：

<input type="redio" name="sex" id="man">
<labelfor="man">男</label>
<label<input type="redio" name="sex">女</label>

如图：

上述方法是label的两种写法。

4.7 内容划分

页面划分的语义化标签：（最好只有一个main标签），header网页头部,nav网页导航,footer网页底部,aside网页侧边栏,section网页区块,article网页文章

最后：谁在使用我们写的HTML？

开发者：修改、维护页面

浏览器：展示页面

搜索引擎：提取关键词、排序

屏幕阅读器：给盲人读页面内容

所以HTML的标签，属性不能随意写，需要符合一定的规范。

综上所述，这是我对HTML基础和前端的一些学习心得，希望大家喜欢