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

原文地址:https://www.cnblogs.com/li33/p/12969717.html