HTML/CSS基础知识总结
2018-09-03 10:28:51
来源:
扬州市新竹网络科技有限公司
在WEB中,HTML和CSS的布局是比不可少的。其中不同标签和属性的使用方法及作用与网站页面紧密关联。
Html页面
<html>
<head>
<meta charset="UTF-8"> <!--设置为UTF-8字符集-->
<title>20180810</title> <!--网页标题-->
<!-- 在title内部放入图片 -->
<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">
<!-- 链接外部css样式表 外部样式:为了共享 -->
<link rel="stylesheet" href="css/style.css" type="text/css" >
<style type="text/css">
/* 内部调用CSS样式,只针对当前页面*/
/*tag标签名、id名(名字前面加 #) class名 属性选择器*/
/*标记选择器*/
body{}
/*属性选择器*/
a[href="https://www.baidu.com/"]{color:red}
/*CSS选择器*/
.top{
width:150px;
height:150px;
background-color:#00FFFF;
}
/*ID选择器*/
#one{
width:100px;
height:100px;
background: pink;
}
a{color:red}
/*派生选择器 根据文档上下文关系来定义样式*/
div a{color: #000;}
#one a{}
</style>
</head>
<body><!-- 内联样式 style="background: #F5F5DC;"-->
<img src="" alt="">
<div class="top">
<a href="https://www.baidu.com/">百度</a><!--a链接,链接到百度-->
</div>
<div id="one">
<a href="">新竹网络</a>
</div>
<a href="http://www.xinz56.cn/">新竹网络</a><!--链接到外部文件-->
</body>
</html>
总结:
html是一种描述网页的语言我们称之为超文本标记语言;(它不是编程语言);
在head内部必须设置编码,一般设置为uft-8,谨防在页面显示的时候出现乱码情况
同时在head内部可以设置链接外部的CSS样式表和title标题img标题图片
标签分为 单标签:img meta link
双标签/闭合标签: html head title body style div a
属性选择器
“.” 表示为CSS选择器
“#” 表示为ID选择器
“Body{}”表示为标记选择器(属性选择器)
内部样式:
写在head内部 只针对当前页面
外部样式:
外部样式 为了共享 注释 Hmtl中用
在CSS样式style中 /*注释*/
Html页面
<!doctype html><!-- xml xhtml 声明 -->
<html>
<head>
<meta charset="UTF-8"> <!--设置为UTF-8字符集-->
<title>20180810</title> <!--网页标题-->
<!-- 在title内部放入图片 -->
<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">
<!-- 链接外部css样式表 外部样式:为了共享 -->
<link rel="stylesheet" href="css/style.css" type="text/css" >
<style type="text/css">
/* 内部调用CSS样式,只针对当前页面*/
/*tag标签名、id名(名字前面加 #) class名 属性选择器*/
/*标记选择器*/
body{}
/*属性选择器*/
a[href="https://www.baidu.com/"]{color:red}
/*CSS选择器*/
.top{
width:150px;
height:150px;
background-color:#00FFFF;
}
/*ID选择器*/
#one{
width:100px;
height:100px;
background: pink;
}
a{color:red}
/*派生选择器 根据文档上下文关系来定义样式*/
div a{color: #000;}
#one a{}
</style>
</head>
<body><!-- 内联样式 style="background: #F5F5DC;"-->
<img src="" alt="">
<div class="top">
<a href="https://www.baidu.com/">百度</a><!--a链接,链接到百度-->
</div>
<div id="one">
<a href="">新竹网络</a>
</div>
<a href="http://www.xinz56.cn/">新竹网络</a><!--链接到外部文件-->
</body>
</html>
总结:
html是一种描述网页的语言我们称之为超文本标记语言;(它不是编程语言);
在head内部必须设置编码,一般设置为uft-8,谨防在页面显示的时候出现乱码情况
同时在head内部可以设置链接外部的CSS样式表和title标题img标题图片
标签分为 单标签:img meta link
双标签/闭合标签: html head title body style div a
属性选择器
“.” 表示为CSS选择器
“#” 表示为ID选择器
“Body{}”表示为标记选择器(属性选择器)
内部样式:
写在head内部 只针对当前页面
外部样式:
外部样式 为了共享 注释 Hmtl中用
在CSS样式style中 /*注释*/
本站文章均为新竹网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,我们谢绝直接复制和抄袭!感谢...
猜你喜欢
联络方式:
电话:18905275582
邮箱:1700970777@qq.com
微信公众号
手机网站
小程序
我们猜你喜欢
-
外贸营销网站建设流程及技巧
1、网站策划:在网站建设之前,需要进行网站策划,明确网站的目标、受众、定位以及设计等方面的要求,形成完整的网站建设方案。同时需要进行市场分析,确定网站内容和定位,以适应不同国家和地区的市场需求。 2、网站设计:设计是外贸营销网站建...
-
PHP 类的继承与方法重写
类的继承与方法重写 class Demo1 { 父类属性 private $name; p...
-
小程序开发公司都是用什么框架来开发小程序
小程序开发会有多种选择,现在有很多种框架都可以进行小程序制作。而Z终编译的结果也是将框架按照原生来进行编译,说白了还是跟原生开发靠拢。 像很多大公司做开发的话通常都会选择用原生来进行开发,毕竟原生是官方的规则,根据官方规则做出来的东...
-
深入理解SEO优化
SEO(Search Engine Optimization),即为搜索引擎优化,在扬州网站建设中,SEO是非常重要的一环。它包括优化内容、页面结构和后台代码等方面。SEO的作用是为了提高网站在搜索引擎中的排名,从而吸引更多的访问者和潜在客户。 ...
-
PHP 数组模拟栈与队列操作
数组模拟栈与队列操作 $actable = ['id'=>1, 'name'=>'张三','grade'=>'高三','subject'=&...