ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Web前端学习路线笔记(一)html入门篇

2021-05-28 23:57:54  阅读:193  来源: 互联网

标签:块级 Web 行级 标签 元素 宽高 入门篇 html


1.标签的属性

属性名字=属性值 组成

2.文本格式化标签

1.b 和 strong 加粗

(strong还有强调的作用)强调用于SEO引擎优化时可以提取关键字。且都是行级标签

行级标签:不会独占一行,且不识别宽高)

  1. i 和 em 倾斜(em 具有强调作用

  2. pre 预格式化标签 (会保留换行符和空格以及宽度。块级标签,会独占一行,识别宽高。

  3. small 和big 让文字放大 和缩小 (淘汰了,但是没删除,尽量不要使用

  4. 浏览器支持的最小字号为12px,如果要显示比12px还小的效果,要做处理。

  5. sup 和 sub

    x1

    x2

3.单双标签

1.单标签(单标签尽量闭合,不闭合可能报错)

<br />换行 
<hr />横线
<img />图片
<input />
<link /> 
<meta />

4.实体转义字符

1.特点 & 开头 ;结束

&nbsp; 空格 &it;it小于号 gt大于号

5.块级元素和行内元素

块级元素:(相当于执行 display:block)

1.独占一行,可以设置宽高。

2.如果没有设置宽度将默认铺满整行。

3.可以包含块级和行级元素

学过的块级标签有:

div ,p , h1 -h 6 ,ul ,ol ,pre, table , adress 等

行级标签有:

span , a, b, strong, i ,em , sup ,sub

img(行级标签,但是它识别宽高)属于行级块标签,相当于执行了display:inline-block操作

行内元素:(相当于执行 display:inline)

1.不会独占一行,与相邻的行级元素独占一行,直到行占满。会自动到下一行

2.不可以设置宽高

3.只能包含行级元素

块级标签转为行级标签

display: inline

行级标签转化为块级标签

display: block

6. w3c标准

万维网联盟world wide web

简单的来说就是一个web标准

w3c标准 : 结构 ,表现,行为 。组成

标签嵌套规则

1.行级元素不能放块级元素

2.块级元素不能放在p标签里

<p><div></div></p>错

3.有几个特殊的标签只能包含内嵌(行级元素)元素,不能包含块级元素,

这几个特殊的标签是:

h1、h2…h6、p、dt

4.块级元素和块级元素并列,内嵌元素和内嵌元素并列

7.语义化标签

1.更容易被搜索引擎收录

2.使用title来提示

<q>标签 //短文本引用  <q加引号</q>
<adress>标签  -----会倾斜效果

8.文件命名规范

项目开发时,项目文件或者目录名中不能出现汉字和空格之类的其他的符号

文件和目录名字一般以字母或下划线开头,其后可以出现字母下划线数字

目录名:taobaopro images/img/(例子)

文件名:

index.html(首页)首页必须用这个

product.html(产品页)

oder.html(订单页面)等

总结:

html 是一种超文本标记语言,不属于编程语言

html5是2014后推出的,他是公认的下一代web语言,是重要的网络退推手

html具有简易性、可扩展性、平台无关性和通用性等特点

网页分静态网页 和 动态网页

五大主流浏览器:IE(edg)。firefox,chrome,opera,safari
内核:Trident(IE),Gecko(firefox),webkit(chrome)blink(chrome)
国内大多数浏览器采用双核
内核:Trident+webkit 或者 Trident+ blink

常用的开发工具
sublime,hbuild,vscode,atom,webstorm
推荐使用:vscode
一个网页页面的基本组成:

<html>
    <head></head>
​    <body></body>
</html>

标签分为块级和行级。

标签:块级,Web,行级,标签,元素,宽高,入门篇,html
来源: https://blog.csdn.net/qq_43682422/article/details/117376155

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有