HTML--TASK01

最新推荐文章于 2024-07-21 17:58:14 发布

古靈▓精怪☆

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量172

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_52963685/article/details/114451776

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML基础

基础知识前提
HTML和CSS的关系
响应式 Web 设计
HTML框架
HTML内联框架
参考

基础知识前提

任何一个标准的HTML页面，第一行一定是一个以DOCTYPE ……开头的语句。这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML和CSS的关系

学习web前端开发基础技术需要掌握：HTML、CSS…等。

HTML、 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS、 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

HTML文件固定的结构。

<html>

<head>...</head>

<body>...</body>

</html>

注释：

html 根标签；每个页面只能有一个根标签，并且页面内容必须写在根标签内。
head标签；不能在网页中直接显示，它是来帮助浏览器解析页面的，分析该网页检索，来引导用户搜索。一般放置网页的title标题标签。
body标签；用来设置网页的正文内容，网页中所有可见的内容，都应该在body中编写。（比如文本、超链接、图像、表格和列表等等。）
属性；可以通过属性来设置标签如何处理标签中的内容;属性需要写在开始标签中，实际上就是一个键值对的结构,即: key= “value”;并且同一个标签中可以同时设置多个属性，属性之间一般用空格隔开。

外部样式表

注释：

可以将样式编写到外部CSS文件中，然后通过link标签将外部的css文件引入到当前页面中，这样外部文件中的css样式将会应用到当前页面中。外部样式表完全使结构和表现分离，这样使样式表可以在不同页面中使用，使样式可以进行复用，这样就可以不断迭代，“不用重复造轮子”，通过link标签引入，可以利用浏览器缓存加快用户访问的速度以提高了用户体验,所以在开发中最推荐使用的方式就是外部的CSS文件。
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。此元素只能存在于 head 部分，不过它可出现任何次数。

eg：

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

内部样式表

CSS样式编写在head标签中的style标签里，然后选中指定的元素就可以同时为这些元素一起样式，这样可以使样式进一步复用，不必反复定义样式。
一般当单个文件需要特别样式时使用。

eg：

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

内联样式只对当前的元素中的内容起作用，内联样式不方便复用;一般当特殊的样式需要应用到个别元素时，就可以使用内联样式。内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用;

eg：

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

div标签与span标签

div标签可定义文档中的分区或节（division/section）以把文档分割为独立的、不同的部分，是个严格的组织工具。
div标签放在body标签内，记住div是一个容器标签，必须要有结束标签，div用于在页面上进行分割，甚至可以在div中使用div标签来嵌套使用。
div标签是一个块级元素每个块都是独占一行；span是行内元素，所在行未填满往后补。div标签中可以镶嵌span标签，（div可以看做是一个大容器，span是一个小容器，大容器当然可以放下一个小容器）

垂直居中代码示例：

<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}

p.one{  width: 600px;
	height: 100px;
	background-color: gray;
	line-height: 100px;
	text-align: center;
	}
.two{
		height: 200px;
        width: 500px;
		background-color: gray;
		display: table;
		text-align: center;
	}		    
.two1{display: table-cell;vertical-align: middle;}
.two2{display: table-cell;vertical-align: middle;}
</style>
</head>

<body>
<h1>单行元素的垂直居中</h1>
<p class="one">我是单行元素，我要进行垂直居中</p>
<h1>我是多行元素</h1>
	<div class="two">
		<p class="two1">我是多行元素1，</p>
        <p class="two1">我是多行元素2，</p>
        <p class="two1">我是多行元素3，</p>
        <p class="two1">我是多行元素4，</p>
		<p class="two2">我要进行垂直居中</p>
	</div>
</body>

</html>

运行结果：
在这里插入图片描述

注释：

单行元素：width: 600px;height: 100px; 垂直居中尺寸 background-color: gray; 背景颜色为灰色 line-height: 100px; 使得上下所留空白一致 text-align: center;使得左右所留空白一致
多行元素：因为vertical-align属性只能应用于行内元素，所以需要将块级元素转化成行内元素，其中的一个方法就是将块级元素变成单元格元素，这里需要在父元素two中设置display:table，在子元素two1、two2中设置display:table-cell，并且vertical-align要设置成middle。

响应式 Web 设计

在网页的head标签中增加meta标签，可以让网页的宽度自动适应手机屏幕的宽度
eg：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

注释：

width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例，1.0就是占网页的100%
minimum-scale=1.0：表示最小的缩放比例
maximum-scale=1.0：表示最大的缩放比例
user-scalable=no：表示用户是否可以调整缩放比例

用em替代px主要是为了实现文字缩放.em的实际大小是相对于上下文字体而言的.如果给body的font-size设置为100%,其他文字单位都使用相对单位em,那些文字都将受到body上初始声明的影响.现代浏览器中默认文字大小是16px,因此在body中声明以下的3条css等效：
eg：

body{
  font-size: 100%;
  font-size: 16px;
  font-size: 1em;
}

流动布局，含义是各个区块的位置都是浮动的，不是固定不变的，使用左浮动和右浮动，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

.left{ width:30%; float:left} 
.right{ width:70%; float:right;}

百分比宽度的计算：百分比宽度 = 目标元素宽度 / 上下文元素宽度

<html>

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}

#wrapper{
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}
nav{
  width: 940px;
  margin: 26px 0 0 -10px;
  padding: 25px 10px 0 10px;
}
nav ul li{
  display: inline-block;
}
aside{
  border: none;
  border-right: #e8e8e8 solid 2px;
  margin: 58px 10px 0 10px;
  padding-right: 10px;
  float: left;
  width: 220px;
}
article{
  margin: 58px 10px 0 0;
  float: right;
  width: 698px;    
}
footer{
  float: left;
  margin: 20px 10px 0 10px;
  clear: both;
  width: 940px;
}
</style>
</head>

<body>
<div id="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="https://www.baidu.com/">link1</a></li>
        <li><a href="https://www.bilibili.com/">link2</a></li>
      </ul>
    </nav>
  </header>
  <aside>
    <p>this is aside</p>
  </aside>
  <article>
    <p>this is content</p>
  </article>
  <footer>
    <p>this is footer</p>
  </footer>
</div>
</body>

</html>

运行结果：
在这里插入图片描述

注释：

如果将最外层的#wrapper的宽度设置为96%,那么nav的宽度应该设置多少?用940/960 =97.91666666666666%,所谓的上下文元素就是被参照的元素。

图片自适应

img{max-width: 100%;}

HTML框架

框架集和内联框架的作用类似，都是用于在一个页面中引用其它的外部页面,框架集可以同时引入多个页面，而内联框架只能引入一个，在H5标准中，推荐使用框架集，而不是使用内联框架。
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中，所以要使用框架集，页面中不可以使用body标签。
frameset由以下两个常用属性: 1.rows:指定框架集中的所有的页面，按行排列。2.cols:指定框架集中的所有的页面，按列排列。
这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小。在frameset中也可以嵌套frameset标签。
1. 混合结构框架

<html>
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

运行结果：
在这里插入图片描述
2. 导航框架

<html>
<frameset cols="120,*">
  <frame src="/example/html/html_contents.html">
  <frame src="/example/html/frame_a.html" name="showframe">
</frameset>
</html>

运行结果：
在这里插入图片描述

HTML内联框架

<!DOCTYPE html>
<html>
    <head>
       <title>html内联框架</title>
    <head>      
    <body>
        <iframe src="./index.html" width="1200px" height="800px" name="iframe_a" frameborder="0"></iframe>
        <p><a href="http://www.baidu.com" target="iframe_a">baidu.com</a></p>
    </body>
</html>

属性注释：

src:指向一个外部网页的路径，可以使用相对路径。
width:指定内联框架宽度。
height:指定内联框架高度。
name:可以为内联框架指定一个name属性。

iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性
Iframe - 删除边框,frameborder属性规定是否显示 iframe 周围的边框。设置属性值为 “0” 就可以移除边框

参考

https://www.cnblogs.com/eyed/p/7872521.html
https://www.w3school.com.cn/

古靈▓精怪☆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
HTML--TASK01

HTML基础基础知识HTML和CSS的关系功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入基础知识1.任何一个标准的HTML页面，第一行一定是一个以DOCTYPE ……开头的语句。这一行，就是文档声明头，DocType Decl
复制链接

扫一扫