前端基础知识

最新推荐文章于 2022-07-19 21:52:30 发布

胡兔学前端

最新推荐文章于 2022-07-19 21:52:30 发布

阅读量241

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44360364/article/details/112763702

版权

第二站—前端基础上篇

HTML
HTML|XHTML|XML|HTML5区别
CSS
服务器端脚本化

HTML

(Hyper Text Markup Language)
概念：超文本标记语言，是一套标记标签，使用标记标签来定义网页的内容和结构。

元素

<开始标签> 纯文本 </结束标签>

没有内容的html元素叫空元素，它以开始标签结束
eg，<br>换行标签，没有结束标签

*在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，html、XHTML和 XML 都接受这种方式。

<hr /> 标签在html页面中创建水平线。
定义注释，提高可读性。
<!DOCTYPE>定义文档类型

问题：为什么html文档第一行要写<!DOCTYPE HTML>?
原因：
1 、作用：html也有多个不同的版本，只有完全明白页面中使用的确切html版本，浏览器才能完全正确地显示出html页面。
2、结果：开启标准模式(W3C标准)，浏览器能提前了解html文档类型，再返回通知浏览器用哪种规范（DTD）解析文档（比如html或xthml规范）。
3、此为h5版本声明语句

链接
由<a>标签定义

<a href="http://www.w3school.com.cn">w3官网</a>
href为属性

html标签可以有属性
属性以名称/值对的形式出现，比如：name=“value”
属性总是在html元素的开始标签中规定

*属性值应该始终被包括在引号内。双引号是最常用的
但在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

标题
由<h1>最大-<h6>最小的标签定义
默认情况下，html会自动地在块级元素前后添加一个额外的空行，eg，段落、标题前后。

用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

如何查看网页源码？

单击右键，选择“查看源文件/查看页面源代码”，打开一个包含页面html代码的窗口
补充：设置—更多工具—开发人员工具（测试）

输出时，所有人为连续的空格或空行都会被算作一个空格
&nbsp(non-breaking space)空格符

布局
<div>块级元素
<span>行内元素
声明一次元素，同种元素均可应用该样式，详情可见效果图

URL
统一资源定位器，(Uniform Resource Locator)
又称网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：

scheme://host.domain:port/path/filename

解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

HTML|XHTML|XML|HTML5区别

具体详见
https://www.cnblogs.com/6long/p/6044499.html
在这里插入图片描述
基于 HTML 衍生出 XML，XML 不是 HTML 的替代者。
XML 用来描述及传输数据，而 HTML 用来显示数据。
XHTML是一个从HTML 到 XML 过渡的产物
HTML5即第五版HTML标准，目前主流

根据上述标记语言（标准），设计网页

CSS

(Cascading Style Sheets)
概念：层叠样式表，样式表定义如何显示 HTML 元素。

语法
CSS 规则由两部分构成：选择器，以及一条或多条声明。

selector {declaration1; d2; ... dN }

选择器是需要改变样式的 HTML 元素。
每条声明由{属性：值}组成。
eg，

h1 {color:red;
 	font-size:14px;}

*每行只描述一个属性，增强样式定义的可读性

提示1：
多重声明用分号隔开，为什么最后一条声明加上分号？
——为了增减声明时，减少出错的可能性

提示2：
如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}

选择器的分组&继承
用逗号将需要分组的选择器分开，被分组的选择器就可以分享相同的声明。

body  {
     font-family: Verdana, sans-serif;
     }
          
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

结论：
1、通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。
2、Netscape 4不支持继承，不过他们可以理解组选择器。
3、创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则。

创建样式表
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：
1、外部样式表
每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，通过改变 CSS 文件，你就可以改变网站中所有 HTML 页面的的样式和外观。
详见-外部样式表

2、内部样式表
使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

当单个文档需要特殊样式时，就应该使用内部样式表。

3、内联样式
在相关的标签内使用样式(style)属性，style 属性可以包含任何 CSS 属性。

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

当样式仅需要在一个元素上应用一次时。
更多基础知识：进入W3School学习
ps：一直以为该网站是w3c，且编程狮是旗下app，今天才发现原来是两码事儿
小误区：

	W3School	W3CSchool (编程狮)
时间	06年	09年
学习	免费	付费
平台	web	web&app

服务器端脚本化

服务器端脚本化指的是服务器端编程。

通过服务器端编程，我们可以访问数据库，并向浏览器返回结果，这也是许许多多的服务器端脚本应用中的重要一项。

学习网站推荐：w3school、我要自学网、菜鸟教程

胡兔学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础知识

HTML&CSSHTMLHTML|XHTML|XML|HTML5区别CSS插入链接与图片生成一个适合你的列表创建一个表格设定内容居中、居左、居右HTML(Hyper Text Markup Language)概念：超文本标记语言，是一套标记标签，使用标签来描述网页。元素<开始标签> 纯文本 </结束标签>没有内容的html元素叫空元素，它以开始标签结束eg，<br>换行标签，没有结束标签*在开始标签中添加斜杠，比如 <br /&g
复制链接

扫一扫