前端html/css/script基础

最新推荐文章于 2023-11-05 03:25:47 发布

weixin_30294021

最新推荐文章于 2023-11-05 03:25:47 发布

阅读量136

点赞数

文章标签：前端人工智能 ViewUI

原文链接：http://www.cnblogs.com/zhaijihai/p/9682030.html

版权

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特殊符号对照表
   注意:实体名称对大小写敏感
     内容      代码    
     空格      &nbsp;
     >       &gt;  
     <       &lt;  
     &       &amp; 
     ¥       &yen; 
     版权      &copy;
     注册      &reg; 
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>