福州小型网站建设html网页设计模板
目录
前端概述
前端能做的事情编辑
两步完成一个网页程序
前端工具的选择与安装
HTML
HTML5介绍
HTML5的DOCTYPE声明
HTML基本骨架
文字标签
标题之标签
标签之段落、换行、水平线
标签之图片
标签之超文本链接
标签之文本
列表标签之有序列表
列表标签之无序列表
标签之表格
表格单元格合并
Form表单（用户输入）
块元素和行内元素（内联元素）
HTML5新增标签
需要了解HTML三件套的基本使用，实操使用前端给后端发送Ajax请求
前端概述
前端能做的事情
app:uniapp、RN、Flutter
两步完成一个网页程序
-
第一步：使用记事本，编写代码
-
创建一个文本文档，拓展名改为html
<html><head><title>我的网页</title></head><body>Hello,我的第一个网页</body></html>-
记得保存ctrl+s
-
<>用英文
-
-
-
第二步，以浏览器方式打开即可
-
双击
-
前端工具的选择与安装
-
浏览器
-
谷歌
-
简洁大方，打开响应速度快
-
开发者调试工具
-
-
-
开发者工具
-
VSCode
-
可以直接将code的文件夹拉入vscode里面，再在vscode里面添加文件，很方便
-
-
生成浏览器文件.html的快捷方式
!+回车
-
VsCode常用快捷键列表
代码格式化:Shift+Alt+F向上或向下移动一行:Alt+Up或Alt+Down快速复制一行代码:Shift+Alt+Up 或 Shift+Alt+Down快速保存: ctl+s快速查找:Ctrl + F快速替换:Ctrl + H
-
快速打开浏览器扩展：open in brower
-
右键
-
-
HTML
HTML5介绍
-
2014年
-
超文本标记语言：用来描述网页的一种语言（布局语言）
-
后缀以.html结尾
-
HTML是一种标记语言（一套标记标签）
-
双标签<html></html>
-
单标签<img>
-
-
打开一个网页，右键空白部分-检查，会出现前端代码
-
点第一个图标，当你鼠标指向页面的一个元素时，代码会跟随
HTML5的DOCTYPE声明
-
DOCTYPE是document type(文档类型)的缩写。
-
<!DOCTYPE html>
-
是H5的声明，位于文档的最前面：网页必备的组成部分，避免浏览器的怪异模式
-
HTML基本骨架
-
html标签
-
定义HTML文档。标签限定了文档的开始点和结束点
<html></html>
-
-
head标签
-
定义文档的头部。
-
描述了文档的各种属性和信息：文档的标题、在Web中的位置和其他文档的关系等
-
绝大多数文档头部包含的数据不会真正作为内容显示给读者（不是给用户看的）
<head></head>
-
-
body标签
-
定义文档的主体。
-
包含文档的所有内容（文本、超链接、图像、表格和列表等）
-
会直接在页面中显示出来（给用户看的）
<body></body>
-
-
title标签
-
定义文档的标题
-
显示在浏览器窗口的标题栏或状态栏上
-
是head标签中唯一必须要求包含的东西
-
有利于SEO优化
-
SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求
<titile></title>
-
-
-
meta标签(单标签)
-
描述一个HTML网页文档的属性，关键词等
-
charset="UTF-8"说明当前使用的是utf-8编码格式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>itbaizhan</title></head><body></body></htm1>
-
文字标签
-
<font></font><!--color face字体 size--><font color="bule">蔬菜</font>
标题之标签
-
标题通过<h1>-<h6>标签进行定义（直接输入h1）
-
之后会配合样式表CSS定义
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
-
-
生成h1-h6快捷键：h$*6
-
正确使用标题
-
不要仅仅为了生成粗体或大号字体使用（CSS可以帮助完成）
-
有利于SEO
-
-
标题标签位置摆放
-
在标签中<>添加属性，默认居左：
<h1 align="center|left|right"> -
报红不是报错，只是不推荐使用（CSS会改进）
-
标签之段落、换行、水平线
-
段落：<p></p>
-
<body><p>我是一个段落标签</p>我是一个段落标签<!--虽然两个都是一样的输出，但是在html中不推荐直接把文本放在最外层，一定要通过标签承载--></body>
-
-
换行：<br>
-
水平线：<hr>
-
可设置属性
<hr color="" width="" size="" align=""/>
-
width：长度（px像素）
-
size：高度（px像素）
-
align：默认居中
-
-
标签之图片
-
<img>定义HTML页面中的图像
-
必须将图片放在html文档统一目录下
-
属性
-
src:路径(图片地址与名字)
-
alt:规定图像的替代文本（可提示是什么图像）
-
width:规定图像的宽度（单位：px）
-
height:规定图像的高度（单位：px）
-
一般不设置，可能会失真
-
-
title:鼠标悬停在图片上给予提示（使用率较低）
-
-
图片路径详解
-
绝对路径
-
电脑的盘符存储与访问的具体地址
-
-
相对路径
-
两者相对关系，在同一路径下可以直接访问
-
(照片相对于html文档)子级关系：/
-
父级关系：../
-
同级关系：./
-
-
网络路径
-
图片是网络服务器的图片
-
-
标签之超文本链接
-
超链接：想跳哪里跳哪里
-
<a href="url">链接文本</a>
-
在标签<a>中使用href属性来描述链接的地址（完整地址）
-
未访问的链接：蓝色字体+下划线
-
访问过的链接：紫色+下划线
-
点击链接：红色+下划线
-
后期会用CSS样式修改掉这些效果
<body><a href="https://www.jd.com/">京东</a></body> -
点击哪吒（鼠标会变成小手）会跳转百度页面
-
标签之文本
-
常用文本标签
标签 描述 <em> 定义着重文字 <b> 定义粗体文本 <i> 定义斜体字italic <strong> 定义加重语气 <del> 定义删除字 <span> 元素没有特定的含义 <u> 下划线underline <sup> 上标 <sub> 下标 -
常用文本标签和段落不同，段落代表一段文本，文本标签表示文本词汇
列表标签之有序列表
-
是一列项目，列表项目使用数字进行标记
-
有序列表始于<ol>标签
-
每个列表项始于<li>标签
-
type属性
-
<ol>的属性type拥有的选项
-
1表示列表项目用数字标号(1,2,3...)
-
a表示列表项目用小写字母标号(a,b,....)
-
A 表示列表项目用大写字母标号(A,B,C...)
-
i表示列表项目用小写罗马数字标号(i,ii,ii...)
-
I表示列表项目用大写罗马数字标号(1,,...)
<ol type="A"><li>苹果</li><li>香蕉</li><li>梨子</li> </ol> -
嵌套
<ol><li>水果</li><li>蔬菜<ol><li>白菜</li><li>油菜</li><li>辣椒</li></ol></li><li>肉类</li></ol>
-
列表标签之无序列表
-
是一个项目的列表，用粗体圆点（小黑圆圈）进行标记
-
无序列表始于<ul>
-
每个列表项始于<li>
-
type属性
-
<ul>的属性type拥有的选项
-
disc 默认实心圆
-
circle 空心圆
-
square 小方块
-
none 不显示
-
-
嵌套
-
常见应用场景
-
无序的列表效果
-
导航效果
-
-
快速生成ul+li的布局：ul>li*3(数字根据自己的需要的li数量修改)
标签之表格
-
优点：展示数据简单，优秀
-
表格标签：
-
表格：<table>
-
行：<tr>
-
单元格（列）：<td>
-
-
快速生成表格结构：table>tr*n>td{单元格}
-
表格属性（在table里面）
-
border:表格边框
-
width:表格宽度
-
height:表格高度
-
表格单元格合并
-
给表格更多可能性
-
属性
-
水平合并：colspan(保留左边，删除右边)
-
垂直合并：rowspan(保留上边，删除下边)
-
Form表单（用户输入）
-
在Web网页中用来给用户填写信息，使网页具有交互功能
-
由容器、控件组成
-
一个表单（容器：能够容纳各种各样的控件）一般应该包含用户填写信息的输入框、提交按钮（控件）等
-
<form action="url" method="get|post" name="myform"></form> -
属性
-
action:服务器地址
-
name:表单名称
-
method中Get和Post区别
-
数据提交方式，get把提交的数据url可以看到，post看不到
-
get一般用于提交少量数据，post用来提交大量数据
-
-
-
元素
-
表单标签
-
表单域
-
表单按钮
<form><input><input type="submit"><button>按钮</button></form>
-
-
文本框
-
文本域通过<input type="text">标签设定
-
输入字母、数字等内容
<form>First name:<input type="text" name="firstname"><br>Last name:<input type="text" name="lastname"></form>
-
-
密码框
-
通过<input type="password">来定义
-
密码字段字符不会明文显示，而是以星号或圆点代替
<form>Password:<input type="password" name="pwd"></form>
-
-
提交按钮
-
<input type="submit" value="登录"><!--value是替换submit-->
-
块元素和行内元素（内联元素）
-
对比
块级元素 内联元素 块元素会在页面中独占一行(自上向下垂直排列) 行内元素不会独占页面中的一行，只占自身的大小 可以设置width，height属性 行内元素设置width，height属性无效 一般块级元素可以包含行内元素和其他块级元素 一般内联元素包含内联元素不包含块级元素 -
常见块级元素
div、form、h1~h6、hr、p、table、ul、等
-
常见内联元素
a、b、em、i、span、strong等
-
行内块级元素(特点:不换行、能够识别宽高)
button、img、input等
HTML5新增标签
-
新增布局标签：有利于SEO
-
div:容器元素，也是页面中见到的最多的元素
-
增加文章清晰度，将区域分隔
-
-
H5新标签
