这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端入门基础语言——HTML(HyperText Markup Language)
前端,解决GUI人机交互问题。HTML负责网页的内容,CSS负责样式,JavaScript负责行为,由这三个共同组成前端。
html是一种标签语言,分为单标签和双标签,双标签使用的更多,可以用VScode来编辑。
html的模板入下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
!DOCTYPE html:表示网页用来显示网页的版本是html5(最新版本)。
html lang="zh-CN":表示使用的语言是简体中文。
meta charset="UTF-8":表示的是使用的字符编码。
标签类型
1.标题标签
标题标签为块级标签,一个标签独占一行
<h1>一级标签<h1>
<h2>二级标签<h2>
<h3>三级标签<h3>
<h4>四级标签<h4>
<h5>五级标签<h5>
<h5>六级标签<h6>
2. 段落和换行标签
段落标签<p><p>,换行标签<br />或<br>
段落标签是块级双标签,用来显示文本。
换行标签是单标签,遇到就要换行。
3.div 和 span标签
这两个标签都是双标签,没有语义,是用来装内容的盒子。
div标签是块级标签,应用较多。
span标签是行级标签
4.img标签
单标签,用来插入图片。
<img src="图片的地址" alt="替换文本" title="提示文本">
对应格式:属性="属性值"
5.超链接标签
双标签
<a href="跳转的地方(必须属性)" target="新窗口打开的方式">文本/图像<a>
target="_self" 当前窗口打开(默认打开方式)
target="_blank" 新窗口打开
6.表格标签
<table>
<tr>
<th>表头部分1</th>
<th>表头部分2</th>
<th>表头部分3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<tr>
</table>
tr :表示表格的一行
th/td:表示tr行中的单元格,其中th表示表头部分
表格的样式后续通过CSS来调节。
7.列表标签
<ul>
<li>无序表1</li>
<li>无序表2</li>
<li>无序表3</li>
<ul>
<ol>
<li>有序表1</li>
<li>有序表2</li>
<li>有序表3</li>
</ol>
<dl>
<dt>自定义表</dt>
<dd>解释1</dd>
<dd>解释2</dd>
</dl>