一.背景知识1.两位前驱图灵和冯 诺依曼2.计算机的组成如下图3.两种架构1.B/S无需安装偶尔更新不跨平台。微信2.C/S:无需安装更新跨平台。百度4.浏览器如下图5.HTML历史图鉴6.前端概述1.html结构2.css: 表现3).JavaScript行为二.HTML1.超文本标记语言的国际组织1).IETF:http://www.ietf.org2).W3C:http://www.w3.org3).WHATWF:http://www.whatwg.org2.入门体验1).新建文本改后缀为.html2).源代码marquee内容/marquee3.HTML标签属性1).双标签起始标签 名 终止标签marquee内容/marquee2单标签/可省略input/3).各关系之间可用tab缩近marquee 文本 input /marquee input4.HTML标签属性1). 如图定义e.g.marquee loop1 bgcolororange 文本 /marquee input typepassword2).无名无值e.g.input disabled3).注意a.不同的标签有不同的属性; 也有一些通用属性(在任何标签内都能写后面会详细总结)。属性名、属性值不能乱写都是W3C规定好的。b.属性名、属性值都不区分大小写但推荐小写。c.双引号也可以写成单引号甚至不写都行但还是推荐写双引号。b.标签中不要出现同名属性否则后写的会失效。错误示范:input typetext typepassword4.HTML的基本结构1).查看具体代码a.检查网页渲染的代码b.查看源代码原始代码2).基本结构html head title.../title body ...... /body /html5.HTML的注释1).live sever:一定要使用vs code打开文件夹可实现自动刷新。2).注释会被忽略但不能嵌套e.g.html head title注释/title /head body marquee loop1 内容 !--下面的内容是可以滚动的且只能滚动一次-- input typetext /marquee !--下面的内容是不可以滚动的-- !-- input typetext -- /body /html6.HTML文档说明1).说明该网页的版本e.g.!DOCTYPE html html head title注释/title /head body marquee loop1 内容 !--下面的内容是可以滚动的且只能滚动一次-- input typetext /marquee !--下面的内容是不可以滚动的-- !-- input typetext -- body /html注意必须在最开始说明7.HTML的字符编码1).存储时对数据进行:编码。读取时对数据进行:解码。2)原则:a.原则1: 存储时务必采用合适的字符编码。否则:无法存储数据会丢失!b.原则2: 存储时采用哪种方式编码读取时就采用哪种方式解码。否则: 数据错乱(乱码)!例如下面文字中包含有:中文、英文、泰文、缅甸文我爱你 I love you! ฉันรักเธอ ကျွန်တော် ချစ်သူe.g.!DOCTYPE html html head meta charsetUTF-8 titleHTML字符编码/title /head body marquee loop1 内容 !--下面的内容是可以滚动的且只能滚动一次-- input typetext /marquee !--下面的内容是不可以滚动的-- !-- input typetext -- body /html8.HTML设置语言1).写法(语言-国家/地区)例如:zh-CN : 中文-中国大陆(简体中文)zh-TW : 中文-中国台湾(繁体中文)zh : 中文en-US : 英语-美国en-GB : 英语-英国e.g.!DOCTYPE html html langen head meta charsetUTF-8 titleHTML设置语言/title /head body divweather is good/div marqueeweather is good/marquee marqueeweather is good/marquee body /html9.HTML标准结构1).回车即可生成用ctrlshiftk快速删除第五行代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleDocument/title /head body /body /html2).在文件夹外侧存放facvicon.ico即可定制网站图标需提前设置emmet)三.HTML基础1.开发者文档W3C官网 www.w3c.org\n\nW3School www.w3school.com.cn\n\nMDN developer.mozilla.org——平时用的最多2.排版标签1 h1最好写一个 h2~h6 能适当多写。2.h 1~h6 不能互相嵌套例如h1 标签中最好不要写h2 标签了。3.p 标签很特殊它里面不能有h1~h6 、p、双 div 标签。3.语义化标签1).概念用特定的标签去表达特定的含义。2).原则标签的默认效果不重要后期可以通过 CSS 随便控制效果语义最重要e.g.对于h1标签效果是文字很大不重要语义是网页主要内容很重要。3).优势a.代码结构清晰可读性强。b.有利于 SEO搜索引擎优化。c.方便设备解析如屏幕阅读器、盲人阅读器等。e.g.!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTML语义化标签/title /head body h1把个人信息“安全堤”筑牢/h1 div h42022-6-21 0734 1347评论/h4 p置身移动互联时代人们在享受智能设备带来便利的同时也在一些场景中面临个人信息泄露风险。随着时间推移这样的风险日益呈现出新的表现形式。/p p一些APP声称看视频、玩游戏甚至走路都能赚钱但用户想提现却难上加难还容易泄露个人信息新型不法软件图标透明、没有名称在手机屏幕上十分隐蔽不仅不停推送广告还会收集并转卖用户隐私信息个人信息安全和隐私保护话题引发关注正说明其涉及群众切身利益问题不容小视。/p /div /body /html4.块级元素与行内元素1).块级元素独占一行排版标签2).行内元素不独占一行3).原则:e.g.!DOCTYPE html html langzh-CN head meta charsetUTF-8 title块级元素与行级元素/title /head body !--块级元素独占一行-- marquee内容12/marquee marquee内容12/marquee h1内容/h1 h1内容/h1 p内容12/p p内容12/p div内容/div div内容/div !--行内元素不独占一行-- input typetext input typetext span内容/span /body /html5.文件标签uniforme.g.!DOCTYPE html html langzh-CN head meta charsetUTF-8 title常用文本标签/title /head body p 把个人信息em“安全堤”筑牢 /em /p P strong123/strong /P p 内容span12/span /p /body /html6.文件标签rarely)e.g.html langzh-CN head meta charsetUTF-8 titleHTML_不常用的文本标签/title /head body p 这首cite《光辉岁月》/cite非常的好听 /p p dfn耗子尾汁/dfn是一个网络流行语意思同dfn好自为之/dfn。 /p p 商品原价del199/del限时秒杀ins99/ins /p p 水的化学方程式是Hsub2/subO8的三次方是这么写的8sup3/sup /p p 等过一段我们学习了JS你就会发现这段代码很有意思codealert(1)/code /p p 手机突然提示samp支付宝到账100万元/samp /p p 保存的快捷键是kbdctrl s/kbd /p p abbr title英雄联盟LOL/abbr这个游戏非常好玩 /p p 你是年少的欢喜这句话反过来念就是bdo dirrtl你是年少的欢喜/bdo /p p 等过一段我们学习了JS我们就知道要这样定义变量了codelet vara/var 1/code /p p small本网站所有资料、图表仅供参考涉及投资项目所造成的盈亏与本网站无关。/small /p p 我也买过b罗技GPW二代/b这个鼠标确实很好用 /p p 猪头声嘶力竭的喊着i“燕子没有你我怎么活啊”/i /p p 张三把“你好”的英文写成了uheelo/u这是不对的 /p p 屈原曾经说过q路漫漫其修远兮吾将上下而求索/q /p p 有一首歌歌词是这样的 blockquote后来我总算学会了如何去爱可惜你早已远去消失在人海后来终于在眼泪中明白有些人一旦错过就不在/blockquote /p p 我们的学校地址是address北京宏福科技园/address /p /body /html7.图片标签1).应用:e.g.!DOCTYPE html html langzh-CN head meta charsetUTF-8 title图片标签/title /head body img width200 src奥特曼.jpg alt你相信光吗 img width200 src奥特曼.jpg alt你相信光吗 /body /html10.1 作业!doctype html html langzh-CN head meta charsetUTF-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title卡牌排序/title link relstylesheet hrefstyle.css /head style /*这里修改样式*/ h2{color: darkblue;} h3{color:grey} /style body main h2梅花/h2 h32~4/h3 spanimg srcimages/C2.png alt梅花2width150 lang100/span spanimg srcimages/C3.png alt梅花3width150 lang100/span spanimg srcimages/C4.png alt梅花4width150 lang100/span h2方片/h2 h35~7/h3 spanimg srcimages/D5.png alt方片5width150 lang100/span spanimg srcimages/D6.png alt方片6width150 lang100/span spanimg srcimages/D7.png alt方片7width150 lang100/span h2红桃/h2 h38~10/h3 spanimg srcimages/H8.png alt红桃8width150 lang100/span spanimg srcimages/H9.png alt红桃9width150 lang100/span spanimg srcimages/H10.png alt红桃10width150 lang100/span h2黑桃/h2 h3J~K/h3 spanimg srcimages/SJ.png alt黑桃Jwidth150 lang100/span spanimg srcimages/SQ.png alt黑桃Qwidth150 lang100/span spanimg srcimages/SK.png alt黑桃Kwidth150 lang100/span spanimg srcimages/SA.png alt黑桃Awidth150 lang100/span /main /body /html