web前端开发1
一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体 标签:由<>包裹,以字母开头可以结合合法字符可以被浏览器解析的标记(纯字母或字母与数字组合) <zero>小VV</zero> 指令:被<>包裹,以!开头的可以被浏览器解析的标记 <!dcotype> <!-- html的注释 --> 实体:被&;包裹的#开头的十进制数或特殊字母组合 <zero> 文档类型:规定该页面的标签遵循的html语法(h5) <!doctype html>二.第一个页面 <!-- 文档类型; 标签语法为h5 --> <!-- h5语法特点 --> <!-- 1.不区分大小写 2.有很多系统标签,一般都具有语义 3.可以随意定义自定义标签 4.h5内容不保留空白字符(制表符) 5.提倡小写 --> <!doctype html> <!-- html:文档根标签 --> <html> <!-- html只有一儿一女:head,body,所以可以省略缩减 --> <!-- html语法中没有明确规定缩减规则,但从美观可读性出发,开发者要严格遵循缩减 --> <head> 主要放的是功能 <!-- 包含内容:样式表,脚本,元信息,内嵌代码块 --> <!-- 字符编码 --> <meta charset="utf-8" /> <!-- <meta http-equiv="content-type" content="text/html;charset=utf-8" /> -- <!-- SEO --> <meta name="keywords" content="培训,Python培训,IT培训,peixun" /> <meta name="description" content="老男孩皇家培训机构" /> <!-- 移动适配 --> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <!-- tag图片 --> 网站的图标 <!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> --> <link rel="shortcut icon" type="image/x-icon" href="icon.png"> <title>第一个页面</title> </head> <body> 主要放的是内容 <!-- 包含内容:几乎一切内容 --> </body> </html> <!-- 以上为最简易页面模块html>head+body --> <!-- 一个页面只存在一个标准模板 --> <!-- doctype必须出现在第一行 --> <!-- 特殊:如果没有书写模块,浏览器解析会按"自己心情"帮你添加模板 -->三.常用标签 1.head内相关标签 1、指定字符集(字符编码) <meta charset="gbk"> 2、页面描述 <meta name="Description" content="具体描述。。。"> 3、关键字:有助于搜索引擎SEC优化,再怎么优化也抵不过竞价排名 <meta name="Keywords" content="网易,邮箱,游戏,新闻"> 4、3秒后跳转(了解) <meta http-equiv="refresh" content="3,http://www.baidu.com"> 5、三秒刷新(了解) <meta http-equiv="refresh" content="3"> 6、移动适配 (了解) 7、标题 <title>百度一下,你就知道</title> 8、网站的图标 <link rel="icon" href="https://www.baidu.com/favicon.ico"> 9、定义内部样式 <style></style> (css定制 当前了解) 10、引入外部样式文件(css定制,引入css文件 当前了解) <link rel="stylesheet" href="mystyle.css"> 11、定义JavaScript代码或引入JavaScript文件(js定制,引入js文件 当前了解) <script src="hello.js"></script> 2.body内相关标签 1.无语义标签 (css重点介绍) div:最常用的标签,没有之一 <div></div> span:最常用的纯文本标签 <span></span> 2.常用语义标签 1.标题:h1~h6 h1标签较经常出现,作为页面最大title形式出现,且一个页面一般只出现一次 <h1>一级标题</h1> <h2>二级标题</h2> <h6>六级标题</h6> 2.br:换行 | hr分割线 <br>好<br>的<br> <hr>呵<hr>呵<hr> 3.文本标签 i和em:很常用的标签,一般不作为斜体文本使用,作为字体图片使用,原因写法简单 <i>斜体</i> <em>以斜体方式强调</em> <b>加粗</b> <strong>以加粗方式强调</strong> p:段落标签具有具体区域,成段出现,段落之间存在段落间距 <p>段落</p> per原样文本标签:会保留所有字符,原样显示 <pre></pre> ܻ ins和u:样式具有下划线 <ins>插入的文本强调且有下划线</ins> <u>插入的文本具有下划线</u> <del>删除的文本</del> <s>删除的文本</s> 在html5中 strong == b ins == u em == i del == s 新的标签是有语义的,而老的只是单纯的添加样式(这是CSS干的事) strong的语义:定义重要性强调的文字 ins的语义(inserted):定义插入的文字 em的语义(emphasized):定义强调的文字 del的语义(deleted):定义被删除的文字 sup上标子<!-- 10的平方 --> <span>10<sup>2</sup></span> sub下标子<!-- 水分子 --> <span>H<sub>2</sub>O</span> small右标:小号字体 <span>你很帅<small>谁信</small></span> 注明拼音<!-- pinyin --> <ruby>牛掰<rt>niubai</rt></ruby>四.标签分类 1.单双标签 --> <!-- 标签都需要闭合 --> <!-- 单标签:闭合操作在本身的尾部,并且可以省略(自定义标签要自我标注闭合) ==> 单标题一般具有特殊功能,单标签主功能 --> <!-- 双标签:闭合操作有对应的结束标签完成,也可以省略(强烈不建议) ==> 双标签一般具有文本(普通文本与超文本),双标签主内容 --> 2.行块标签 --> <!-- 行:内联,不具备自身宽高,通常同行显示 --> <!-- 块:块级,具备自身宽高,通常换行显示 --> <!-- 自定义标签均属于内联标签 --> <!-- span{我是span$}*2+div{我是div$}*2 --> 3.单一组合标签 --> <!-- 组合标签必须组合出现,协同下才能显示产生相应的内容与效果