zoukankan      html  css  js  c++  java
  • 5-26第1天学习前端的笔记

    第一天复习HTML

    1.浏览器内核

    ​ Trident IE的内核,Gecko 火狐内核,WebKit Safari内核,Blink 谷歌的内核。

    2.开发工具

    主要用Visual Studio Code,WebStorm(重量级软件)

    3.HTML的各种标签

    :表示下面的文档用html5规范使用。

    打完标签按tab可以自动加括号,Ctrl+/注释代码。

    body:主体部分代码

    script:放脚本代码的地方 /**/这是它的段落部分

    p:段落

    style:用于放样式的地方

    <link rel = "stylesheet" href="style.css">

    4.body内的标签

    1. !+ tab 可以自动生成代码结构
    2. html:5 + tab 也可以
    3. div用来布局的,没有具体含义。
    4. h1,h2.....h6共六级标题
    5. p标签表示段落,可以用它换行
    6. br 换行
    7. hr一条水平线,单标签可以用width等标签
    8. a标签,超链接,target属性:_blank,_self在空白页面打开,在当前页面打开、
    9. img图片标签 src="文件的目的地址" alt=“没有图片显示这个”
    10. span标签,与div一样都是用来布局的,span不会单独占一行
    11. ul,ol标签,ul表示无序,ol表示有序,每一个都用li标签代表一个选项
    12. 注释,方便后期自己看得懂。

    5.属性(格式: 属性名=“属性值”)

    1.target属性:_blank,_self在空白页面打开,在当前页面打开

    2.起附加说明的作用,不是所有标签都有属性。

    6.转义符

    1.html种代码中多个空格只显示一个空格。

    7.HTML块级元素和行内元素、

    1.块级元素可以独占一行,宽度和高度可控,如果没有设置宽度则默认铺满整行。中间可以包括块级和行级元素。

    2.行内元素(display:inline;)不会独占一行,与相邻的行级元素独占一行,直到这一行占满,

    ​ 行级元素的宽度和高度不可控制(不识别他的宽高)

    ​ 其内部只能包含行级元素

    3.块级标签转换为行级标签

    ​ 在块级标签中的样式中加上display:inline;

    4.行级元素转换为块级标签

    ​ 在行级标签中的样式中加上display:block;

    8.w3c规则(world wide web万维网联盟,统一所有标准)

    8.1块元素可以包含行级元素和某些块级元素,但是行级元素不能包含块元素,只能包含行元素(内联元素)

    <span><div></div></span>这个是错误的
    

    8.2块级元素不能放在p标签内

    8.3有些特殊的块级元素不能包含块级元素

    h1,h2,h3,h4,h5,h6,p,dt
    

    8.4块级元素和块级元素并列,行级元素和行级元素并列,块级元素和行级元素不能并列。

    <div><h2></h2><span></span></div>这样是错的
    

    9.语义化标签

    9.1.使用语义化标签的作用

    ​ 更容易被搜索引擎收录

    ​ 更容易被屏幕阅读器读出网页内容

    ​ 能够更好的体现网页注意

    ​ 兼容性好,支持更多的网络设备

    9.4语义化标签种类

    <title>:页面主体内容。
    <hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。
    <ul>:无序列表。
    <li>:有序列表。
    <header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。
    <nav>:标记导航,仅对文档中重要的链接群使用。
    <main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
    <article>:定义外部的内容,其中的内容独立于文档的其余部分。
    <section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
    <aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
    <footer>:页脚,只有当父级是body时,才是整个页面的页脚。
    <small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。
    <strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。
    <em>:将其中的文本表示为强调的内容,表现为斜体。
    <mark>:使用黄色突出显示部分文本。
    <figure>:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。
    <figcaption>:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。
    <cite>:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
    <blockquoto>:定义块引用,块引用拥有它们自己的空间。
    <q>:短的引述(跨浏览器问题,尽量避免使用)。
    <time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。
    <abbr>:简称或缩写。
    <dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。
    <address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。
    <del>:移除的内容。
    <ins>:添加的内容。
    <code>:标记代码。
    <meter>:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)
    <progress>:定义运行中的进度(进程)。
    

    10.文件命名规范

    和java命名规范差不多

    首页:index.html 产品页:product.html 订单order.html 公司介绍about.html 新闻列表news.html 新闻详情页new_details.html 联系我们contact.html

    由结构:html,表现css,行为JavaScript

    1.定义语言的编码charset="utf-8"

    1.顶替语言规范
    <meta charset="utf-8>
    2.javascrpt定义
    <script language="javascrpt" type="text/javascrpt">	
    	脚本代码位置
    </script>
    3.css顶柜
    <style type="text/css">
    	样式设置。。。
    </style>
    为了把配置各个浏览器的兼容性,在写css时请带上计量单位
    4.不要再注释中写--符号
    <!--注释中不能用--,这样不符合规范 -->
    5.所有标签和属性的名字都必须小写
    6.所有属性值都必须用双引号括起来
    7.输出>,<和&使用转义符去写
    8.要给所有的属性赋值,如果不赋值,默认的值时属性名本身。
    <img src="...." alt=".要复制."/>
    9.所有标签(单/双)都必须要闭合!
    10.所有的标签都必须合理嵌套,不能出现交叉情况(行扩大/列扩大)
    11.图片要添加有意义的alt属性,增加用户的体验
    12.再form表单添加以下lable标签,以增加用户的体验价值
    
    

  • 相关阅读:
    【每日一具3】推荐一个4K、蓝光、3D高清影视下载站,影视资源丰富 发烧友必备
    Python对程序中异常进行处理
    通过一个简单的例子,了解 Cypress 的运行原理
    ABAP 标准培训教程 BC400 学习教程之一:ABAP 服务器的架构和一个典型的 ABAP 程序结构介绍
    如何安装最新版本的 SAP ABAP Development Tool ( ADT ) 2021年度更新
    ABAP R3 时代著名的 SFLIGHT 航班模型测试数据,到了S/4HANA时代的进化版
    SAP Fiori Elements 应用的 i18n 语法使用方式
    SAP Fiori Elements List Report 里的表格类型(tableType)是如何决定出来的
    使用 XSLT 给 SAP PI 增加 CDATA
    SAP Fiori Elements 学习笔记
  • 原文地址:https://www.cnblogs.com/li33/p/12969717.html
Copyright © 2011-2022 走看看