学习前端第四天——初识Html与css
(第三天是一个对前端的摸底测验)
1.HTML与CSS
1.1.什么是HTML?什么是CSS?
HTML是HyperText Markup Language(超文本标记语言)
它不是一种编程语言,而是一种标记语言,用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。HTML也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名(扩展名)
HTML特点
超文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:
1.简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。
2.可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类 元素的方式,为系统扩展带来保证。
3.平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
4.通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
CSS (Cascading Style Sheets) 层叠样式表
是一个用于修饰文档(可以是标记语言HTML,也可以是XML或者SVN)的语言,可以将文档以更优雅的形式呈现给用户
1.2.HTML和CSS之间的关系?
- HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
- CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
1.3.结构,表现,行为?
在前端页面搭建中, HTML用于描述页面的结构,CSS用于控制页面中元素的样式, JavaScript用于响应用户操作。就好比一个人的基本构成,外在表现 衣物,以及行为动作。
2.新学习的知识(笔者并非0基础入坑 在此系统学习之前有着半年左右的前端基础 熟悉一些基础框架 所以此系列博客一般只记录笔者学习到的新知识)
空白
在文档中无论出现多少个空白或者换行,浏览器都解析为一个空白
实体
在HTML中,某些字符是预留的。例如:不能使用小于号<和大于号>,这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities),实体以&符开始,以;结尾。以下是常见的实体
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 |   |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
’ | 撇号 | &apos (IE不支持) | ' |
¢ | 分(cent) | ¢ | ¢ |
£ | 镑(pound) | £ | £ |
¥ | 元(yen) | ¥ | ¥ |
€ | 欧元(euro) | &euro | € |
§ | 小节 | § | § |
© | 版权(copyright) | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | &trade | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
2.1 块级元素特点
作用:搭建网页结构
特点:
- 独占一行空间
- 默认宽度为100%
- 高度由子元素或内容决定
- 可以通过css指定其宽度和高度
2.2 行内元素特点
作用:在结构中填充网页内容
特点:
- 与其他行内元素共享一行空间
- == 宽高由自身决定==
- 由于不用来搭建网页结构,所以也无需,无法通过css指定其宽高(可替换类行内元素除外)
- 行内元素中不建议嵌套块元素
关于可替换元素:在 CSS 中,可替换元素(replaced element) 的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。可替换元素拥有内置宽高,他们可以设置width和height。
例如<iframe>、<video>、<embed>、<img>
等,有些元素在特定情况下会被当作可替换元素处理,例如<option>、<audio>、<canvas>、<object>、<applet>、<input>
等。
2.3 假链接
什么是假链接?
就是点击之后不需要跳转的链接我们称之为假链接
在企业开发初期,其他的界面都没有完成,所以不知道跳转到什么地方,这个时候先用假链接来代替,项目完成后再换成真链接
假链接的格式
1.# 直接回到页面的顶部
2.javascript: 不会自动回到页面的顶部
<a href="#">回到顶部</a>
<a href="javascript:">点我啊</a>
2.4 锚点
1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
2.如何和HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的
3.所以要想实现通过a标签跳转到指定的位置分为两步
3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
格式:
<a href="#center">跳转</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="center">我是中部</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
注意点:
1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
格式:
//a.html
<a href="b.html#bottom" target="_blank">跳转</a>
//b.html
<p id="bottom">找到我</p>
2.5 base标签
base标签就是专门用来统一指定当前页面中所有的a标签需要如何打开
注意点
1.base标签必须要写在head标签之间
2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行,内联优先级较高
2.6 details
details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字,也可以放置表单,插件或对于一个统计图提供的详细数据表格。
open属性
当该属性值为true时,该元素内部的子元素应该被展开显示;当该属性的值为false时,其内部的子元素应该被收缩起来不显示。默认值为false
summary子元素
summary元素从属于details,用鼠标单击summary元素中的内容文字时,details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素,浏览器会提供默认文字(详细信息)以供单击。
3 HTML5新增语义化标签
除语义外,与div相同。新的标签带来的是网页布局的改变及提升对搜索引擎的友好(有利于seo搜索引擎的优化,meta中的keywords属性,head标签中的title标签同样有此作用)。
语义化标签的好处
1、代码结构清晰,易于阅读,利于开发和维护
2、提高用户体验,在样式加载失败时,页面结构清晰
3、方便其他设备解析(如屏幕阅读器)根据语义渲染网页。
4、有利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同的标签来赋予不同的权重
常见的语义化标签有<header> <video> <article> <aside> <footer> <audio> <nav>
等