web前端开发1
一.前端三剑客之html
 1.为标记语言,是非编程语言
 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V)
 3.组成:标签, 指令, 实体
 标签:由<>包裹,以字母开头可以结合合法字符可以被浏览器解析的标记(纯字母或字母与数字组合)
  <zero>小VV</zero>
 指令:被<>包裹,以!开头的可以被浏览器解析的标记
  <!dcotype> <!-- html的注释 -->
 实体:被&;包裹的#开头的十进制数或特殊字母组合
  <zero&gt;
 文档类型:规定该页面的标签遵循的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.单一组合标签 -->
 <!-- 组合标签必须组合出现,协同下才能显示产生相应的内容与效果

day44前端开发1之html基础的更多相关文章

  1. day44前端开发2之css基础

    web前端开发1一.前端三剑客之css 1.选择器:由标签/类/id单独或组合出现 2.作用域:{}内部区域 3.样式块:满足css链接语法的各种样式 eg:引入的基本样式 <head>  ...

  2. 《JavaScript &amp; jQuery交互式Web前端开发》之JavaScript基础指令

           在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎 ...

  3. WEB前端开发--2(HTML基础)

    HTML基础 HTML不分大小写 1.HTML概述 HTML(HyperText MarkUp Language)"超文本标记语言",他是制作网页的标准语言 1.1 标签--元素 ...

  4. 从零开始学习前端开发 — 2、CSS基础

    一.CSS简介  1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...

  5. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  6. Web 前端开发代码规范(基础)

    一. 引言 对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护. 二. HTML/CS ...

  7. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_03-vuejs研究-vuejs基础-入门程序

    本次测试我们在门户目录中创建一个html页面进行测试,正式的页面管理前端程序会单独创建工程. 在门户目录中创建vuetest目录,并且在目录下创建vue_01.html文件 <!DOCTYPE ...

  8. 从零开始学习前端开发 — 1、HTML基础

    一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...

  9. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_02-vuejs研究-vuejs基础-MVVM模式

    1.2.1 MVVM模式 vue.js是一个MVVM的框架,理解MVVM有利于学习vue.js.   MVVM拆分解释为:   Model:负责数据存储 View:负责页面展示 View Model: ...

随机推荐

  1. shell脚本结构

    echo $? 代表上一次命令的状态返回值,‘0’则代表为真<执行成功>,‘非零’则代表为假<执行失败>. shell脚本: <判断老男孩的年纪> [root@bo ...

  2. S2T40,第四章,简答4

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. AWK入门

    AWK类型    AWK:源于AT&T实验室的AWK    NAWK:AWK的升级版    GAWK:GNU AWK,兼容AWK和NAWK    程序结构    BEGIN语句块,可选     ...

  4. guava-retrying 源码解析(导入项目)

    1.从github上下载guava-retry源码 git clone git://github.com/rholder/guava-retrying.git 2.导入idea,使用gradle记得勾 ...

  5. 磁性窗体设计C#(二)

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  6. Spring Boot 常见标签

    @Controller(value=“名字”,descripation="描述",tags="具体" ) @RestController控制器(path=&qu ...

  7. HTML和CSS标签常用命名规则

    1.Images 存放一些网站常用的图片: 2.Css 存放一些CSS文件: 3.Flash 存放一些Flash文件: 4.PSD 存放一些PSD源文件: 5.Temp 存放所有临时图片和其它文件: ...

  8. webapp 安卓 ios 兼容性问题

    1.ios js中时间不兼容YYYY-MM-DD这种格式的时间,只支持YYYY/MM/DD这种格式 // 在safari中new Date('2018-09-02') // Invalid Daten ...

  9. acrgis导出成tiff图片,全是黑色

    任务:将北京道路矢量数据转成栅格然后导出成tiff格式图片. 1. 北京道路有很多种,矢量合并---用到了merge工具 arcgis位置:data management----general---- ...

  10. What is the RESTful API ?

    REST 是 RepresentationalStateTransfer 的缩写,一般中文译为 “表征状态转移”,Roy Thomas Fielding 在他2000年的PhD论文中发明了这个概念.首 ...