前端:网页设计、页面美化、逻辑交互,数据展现、前端服务器
前端三件套:HTML5 CSS JS
编程语言:数据结构/类型 各种运算 流程控制
# HTML的基本概念
H hyper 兴奋 刺激 超级/超越
T text 文本
M markup 标记 <> 语法
L language 语音
超文本标记语音,除了普通的文本之外,还有别的超越了文本的元素
比如:文本框 按钮 图片 超链接 表格 下拉选择 音频 视频
# 开发环境
# 开发软件
记事本 notepad++ HBuilder vscode
# 测试软件
浏览器:谷歌 + 其他市场占有率比较高 adge 360极速版 火狐
# HTML页面内容
# 注释 <!-- 注释的内容 -->
# 文本 / 字符串
# 标签(不区分大小写,一般都小写)
- 单标签 <标签名>
- 双标签 <标签名></标签名>
# 属性
<标签名 属性名1="属性值1" 属性名2="属性值2"> </标签名>
# 查询网站
W3School W3C的中文版 万维网联盟
菜鸟教程
# 页面架构 --index 索引页
<!doctype html> 告诉浏览器,以下的代码请用
<html> </html> 主体标签
<head> </head> 头部标签 内容是给浏览器或者搜索引擎或者服务器 看的
<!-- 设置页面编码 --> --固定格式需要
<meta charest = "UTF-8"> --固定格式需要
<title> 选项卡标题</title>
<body> </body> 身体标签 内容是渲染给人看的
# 运行网页
1.单文件直接打开(右键--打开方式)
先使用浏览器 浏览windows文件夹
2.使用web服务器打开
# 前端常见标签
# 字体标签 <font></font>
# 作用:设置某个区域的文本字体
# 属性:颜色 color 大小 size:1-7 字体类型 face
# 段落标签(独立占一整行,块级元素)
<p></P>
h1~h6 标题标签
<h1></h1> 最大字 特别粗
<h6></h6> 最小字 比较粗
<br> 单纯的换行
<hr> 换行的分割线
# 图片<img>
# 作用:承载图片 / 访问服务器
# 属性:src="路径"
width 宽 height 高
# 超链接 <a> </a> --中间可以加各种标签
# 作用:页面跳转/访问服务器
# 属性:href="页面路径"
- 如果本地路径。直接填相对路径
- 如果外网的网站,必须在网址前面加上协议http://
# 用户输入表单标签<input> 有多重形态
# 作用:在前后端交互时,用于收集用户输入的数据
# 属性:type,根基不同的属性值,展示不同元素
# type="text" 文本框 value="文本框内容" placeholder="在没有输入任何内容的情况下出现的文字"
# type="password" 密码框
# type="button" 按钮 value="按钮的名称"
# type="file" 文件选择器
# type="radio" 单选框 圆点
# type="checkbox" 复选框 打勾
# type="number" 文本框,只能输入数字
<input type="radio" name="sex" checked="checked">男 --checked="checked" 默认选该项
<input type="radio" name="sex">女 --name属性设置一致,单选框只选其中之一
# 下拉选择标签
<select></select> 下拉选择的框架
<option></option> 下拉选择的选项
# 表格
<table></table>
<thead></thead>--属性:border="1" 表格边框
cellspacing="0" 单元格缝隙
<tbody></tbody>
<tr></tr> 行标签 --属性:align="center" 居中对齐
<th></th> 表头中的单元格标签(居中并特别粗)
<td></td> 身体中的单元格标签(默认左对齐)
# 探索:文本域<input type="textarea" style="width:400px;height:80px;">
如何合并单元格、
在td标签中添加colspan="",引号内填写相应的阿拉伯数字即可合并列。--向右合并
在td标签中添加rowspan="",引号内填写相应的阿拉伯数字即可合并行。--向下合并
如何事先页面的空格
1、插入一个非间断空格,当需要插入多个空格时,请输入 或 代码。 它们名为“空格占位符”,输入几个,就能在页面中显示几个空格。
2、插入不同宽度的空格。有多种字符实体可以让浏览器显示空格。
  -- “en空格”是根据字体排印学的计量单位命名,宽度是两个普通空格的宽度,
  -- “em空格”大概是四个普通空格的宽度。