网站建设公司与维护,电商网站公司,如何推广宣传一个品牌,请问注册公司怎么注册目录
前端概述
前端能做的事情编辑
两步完成一个网页程序
前端工具的选择与安装
HTML
HTML5介绍
HTML5的DOCTYPE声明
HTML基本骨架
文字标签
标题之标签
标签之段落、换行、水平线
标签之图片
标签之超文本链接
标签之文本
列表标签之有序列表
列表标签之无序…目录
前端概述
前端能做的事情编辑
两步完成一个网页程序
前端工具的选择与安装
HTML
HTML5介绍
HTML5的DOCTYPE声明
HTML基本骨架
文字标签
标题之标签
标签之段落、换行、水平线
标签之图片
标签之超文本链接
标签之文本
列表标签之有序列表
列表标签之无序列表
标签之表格
表格单元格合并
Form表单用户输入
块元素和行内元素内联元素
HTML5新增标签 需要了解HTML三件套的基本使用实操使用前端给后端发送Ajax请求
前端概述
前端能做的事情
app:uniapp、RN、Flutter
两步完成一个网页程序 第一步使用记事本编写代码 创建一个文本文档拓展名改为html htmlheadtitle我的网页/title/headbodyHello,我的第一个网页/body/html 记得保存ctrls 用英文 第二步以浏览器方式打开即可 双击
前端工具的选择与安装 浏览器 谷歌 简洁大方打开响应速度快 开发者调试工具 开发者工具 VSCode 可以直接将code的文件夹拉入vscode里面再在vscode里面添加文件很方便 生成浏览器文件.html的快捷方式 !回车 VsCode常用快捷键列表 代码格式化:ShiftAltF向上或向下移动一行:AltUp或AltDown快速复制一行代码:ShiftAltUp 或 ShiftAltDown快速保存: ctls快速查找: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网页文档的属性关键词等 charsetUTF-8说明当前使用的是utf-8编码格式 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleitbaizhan/title/headbody/body/htm1
文字标签 font/font!--color face字体 size--font colorbule蔬菜/font
标题之标签 标题通过h1-h6标签进行定义直接输入h1 之后会配合样式表CSS定义 h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6生成h1-h6快捷键h$*6 正确使用标题 不要仅仅为了生成粗体或大号字体使用CSS可以帮助完成 有利于SEO 标题标签位置摆放 在标签中添加属性默认居左 h1 aligncenter|left|right 报红不是报错只是不推荐使用CSS会改进
标签之段落、换行、水平线 段落p/p bodyp我是一个段落标签/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 hrefurl链接文本/a 在标签a中使用href属性来描述链接的地址完整地址 未访问的链接蓝色字体下划线 访问过的链接紫色下划线 点击链接红色下划线 后期会用CSS样式修改掉这些效果 bodya hrefhttps://www.jd.com/京东/a/body 点击哪吒鼠标会变成小手会跳转百度页面
标签之文本 常用文本标签 标签描述em定义着重文字b定义粗体文本i定义斜体字italicstrong定义加重语气del定义删除字span元素没有特定的含义u下划线underlinesup上标sub下标 常用文本标签和段落不同段落代表一段文本文本标签表示文本词汇
列表标签之有序列表 是一列项目列表项目使用数字进行标记 有序列表始于ol标签 每个列表项始于li标签 type属性 ol的属性type拥有的选项 1表示列表项目用数字标号(1,2,3...) a表示列表项目用小写字母标号(a,b,....) A 表示列表项目用大写字母标号(A,B,C...) i表示列表项目用小写罗马数字标号(i,ii,ii...) I表示列表项目用大写罗马数字标号(1,,...) ol typeAli苹果/lili香蕉/lili梨子/li
/ol 嵌套 olli水果/lili蔬菜olli白菜/lili油菜/lili辣椒/li/ol/lili肉类/li/ol
列表标签之无序列表 是一个项目的列表用粗体圆点小黑圆圈进行标记 无序列表始于ul 每个列表项始于li type属性 ul的属性type拥有的选项 disc 默认实心圆 circle 空心圆 square 小方块 none 不显示 嵌套 常见应用场景 无序的列表效果 导航效果 快速生成ulli的布局ulli*3(数字根据自己的需要的li数量修改)
标签之表格 优点展示数据简单优秀 表格标签 表格table 行tr 单元格列td 快速生成表格结构tabletr*ntd{单元格} 表格属性在table里面 border:表格边框 width:表格宽度 height:表格高度
表格单元格合并 给表格更多可能性 属性 水平合并colspan(保留左边删除右边) 垂直合并rowspan(保留上边删除下边)
Form表单用户输入 在Web网页中用来给用户填写信息使网页具有交互功能 由容器、控件组成 一个表单容器能够容纳各种各样的控件一般应该包含用户填写信息的输入框、提交按钮控件等 form actionurl methodget|post namemyform/form 属性 action:服务器地址 name:表单名称 method中Get和Post区别 数据提交方式get把提交的数据url可以看到post看不到 get一般用于提交少量数据post用来提交大量数据 元素 表单标签 表单域 表单按钮 forminputinput typesubmitbutton按钮/button/form 文本框 文本域通过input typetext标签设定 输入字母、数字等内容 formFirst name:input typetext namefirstnamebrLast name:input typetext namelastname/form 密码框 通过input typepassword来定义 密码字段字符不会明文显示而是以星号或圆点代替 formPassword:input typepassword namepwd/form 提交按钮 input typesubmit value登录!--value是替换submit--
块元素和行内元素内联元素 对比 块级元素内联元素块元素会在页面中独占一行(自上向下垂直排列)行内元素不会独占页面中的一行只占自身的大小可以设置widthheight属性行内元素设置widthheight属性无效一般块级元素可以包含行内元素和其他块级元素一般内联元素包含内联元素不包含块级元素 常见块级元素 div、form、h1~h6、hr、p、table、ul、等 常见内联元素 a、b、em、i、span、strong等 行内块级元素(特点:不换行、能够识别宽高) button、img、input等
HTML5新增标签 新增布局标签有利于SEO div:容器元素也是页面中见到的最多的元素 增加文章清晰度将区域分隔 H5新标签
