前端html/css/script基础
1. 基础模板 <!DOCTYPE html> <html> <head> <meta charert="utf-8" /> <title>第一个页面</title> </head> <body> day01 第一个页面 </body> </html> 2. 模板解读 - <DOCTYPE>:指定文档类型,是文档声明,必须写在html文档的第一行,位于<html>标签之前,表明该文档是html5标签,规定html标签语法。 - <html>:文档根标签,标注着文档(页面)的开始与结束。 html的lang属性可用于网页或部分网页的语言。通常用于搜索引擎和浏览器的统计分析,不定义也没有什么影响。 根据W3C推荐标准,您应该通过<html>标签中的 lang 属性对每张页面中的主要语言进行声明,比如: <html lang="en"></html> - <head>:文档的开头,可以引用脚本文件、指定样式表、书写逻辑代码块、提供元素信息。包含了文档的与智能数据(meta),如<meta charert="utf-8" /> 定义网页编码格式为utf-8。 - body:文档主体标签,包含文档所有文本与从超文本内容 - title:文档tag标题标签,设置文档tag的标题内容 3. meta(元标签) 字符编码 <meta charset="utf-8"> <meta http-equiv="content-type" conntent ="text/html;charset=utf-8"/> SEO <meta name="keyword" content="8到12个以英文逗号隔开的单词或词语"> <meta name="descreption" content="80字以内的一段话,与网站内容相关"> 移动适配 <meta name="viveport" content="width=device,initial-scale=1,minium-scale=1,user-scaleble=no"/> 4. html标签纤细语法与注意点 - 标签的语法: <标签名 属性1=“值1” 属性2=“值2”........>内容部分</标签名> <标签名 属性1=“值1” 属性2=“值2”........./> 5. html标签分类及语义 1. <br> :换行 2. <hr> :分割线 3. <font> :修改文字大小,颜色 <font color="red" size="10px">岂能尽如人意</font> 4. <u> :下划线 5. <i> :倾斜 6. <s> :下划线 6. <b> :加粗 <b>论颜值,我秒杀宇宙</b> 6. 字符实体 html特殊符号对照表 注意:实体名称对大小写敏感 内容 代码 空格 > > < < & & ¥ ¥ 版权 © 注册 ® 7. h系列标签 语义:标记内容为一个标题,全称headline h系列标签从h1-h6共6个,没有h7标签,标记内容为1~6级标题,h1用作主标题(代表最重要的),其实是h2。。。 虽然h1-h6标签的显示样式是从大到小,但再次强调:记忆HTML标签的显示样式是没有意义的 <!DOCTYPE HTML> <html> <head lang='en'> <meta charset="utf-8"> <title>Egon才华无敌</title> </head> <body> <h1>一级标题</h1><h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <h7>没有七级标题</h7> 没有七级标题 </body> </html> 8. p标签 语义:标记内容为一个段落,全程paragraph <!DOCTYPE HTML> <html> <head lang='en'> <meta charset="utf-8"> <title>Egon无敌</title> </head> <body> <h1>Egon</h1> <p>论颜值,鹤立鸡群</p> <p>论才华,天下无敌</p> </body> </html>