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标签,以增加用户的体验价值
    
    

  • 相关阅读:
    Asp.Net Web API 2第八课——Web API 2中的属性路由
    Asp.Net Web API 2第七课——Web API异常处理
    Asp.Net Web API 2第六课——Web API路由和动作选择
    Asp.Net Web API 2第五课——Web API路由
    开始学习python
    BMI 小程序 购物车
    深浅copy 文件操作
    字典 dict 集合set
    基本数据类型 (str,int,bool,tuple,)
    python 运算符
  • 原文地址:https://www.cnblogs.com/li33/p/12969717.html
Copyright © 2011-2022 走看看