首先我们打开VScode，导入html模板，可以看到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
这里其中的lang = 'en' 是将语言设置成英文,中文是 zh
<head></head>是头文件，不显示
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta name="viewport" content="属性名=属性值">
这里看一下viewport的属性值
属性名 属性值说明
- 1、width 控制视区的宽度，可以指定固定宽度值；或设置为device-width（表示设置成为理想视区宽度，即布局视区宽度=可见视区宽度）；
- 2、height 控制视区的高度，这个属性一般不设置，很少使用
- 3、initial-scale 设置页面初始化缩放值，通常设为1，可以是小数
- 4、maximum-scale 允许用户缩放的最大比例值，为一个数字，可以带小数
- 5、minimum-scale 允许用户缩放的最小比例值，为一个数字，可以带小数
- 6、user-scalable 是否允许用户进行缩放, no 代表不允许，yes代表允许
<meta>可以写多行，name和content一一对应
charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。常见的字符编码有：gb2312、gbk、unicode、utf-8。
各个字符编码含义：
gb2312：代表国家标准第2312条，其中是不包含繁体的（虽然咱们不怎么使用繁体了，但是台湾还在使用繁体啊。那怎么办呢？）。
gbk：国家标准扩展版（增加了繁体，包含所有亚洲字符集）。
unicode：万国码（字面意思你也懂的）。
utf-8：unicode的升级版。
<a> 超链接
<a href="http://www.w3school.com.cn">W3School</a>
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
<div>
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
**div的style属性
1、Height：设置div的高度
2、Width：设置div的宽度
3、margin：后面跟有四个距离分别为到父容器的上右下左边的距离，可以看例子中白色的div到黑色的div的边距离效果，还可以分别设置这四个边的距离，用到的属性如下：
4、margin-left
5、margin-right
6、margin-top
7、margin-bottom
8、padding：用于设置div的内边距：
<abbr>标记缩写
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<b>粗体
<p>这是普通文本 - <b>这是粗体文本</b>。</p>
相同的效果的还有
<strong>
<p>我是字体加粗strong标签</p>
</strong>
<base>
标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>
这里的图片就是http://www.w3school.com.cn/i/eg_smile.gif
<br>换行
<br></br>
<table>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
width属性控制表格与显示与网页的比例
- cellpadding = "5" 属性规定单元边沿与其内容之间的空白
图片.png
- height = "50px" 属性规定表格单元格的高度。
- width="100%"(或者写50px) 属性规定表格的宽度
-
cellspacing 属性规定单元格之间的空间。
图片.png
- rowspan=%d 合并两个单元格并将数字相加
class 属性
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>
<h></h> 标题
我们这里需要关注调整标题的style参数
<h style=""></h>
- text-align:right(可以选择left，center)
- padding 属性设置元素的内边距。
padding 属性定义元素边框与元素内容之间的空间。
该属性可采取 4 个值：(4ge )
如果规定一个值，比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。
如果规定两个值，比如 div {padding: 50px 10px} - 上下内边距是 50 px，左右内边距是 10 px。
如果规定三个值，比如 div {padding: 50px 10px 20px} - 上内边距是 50 px，左右内边距是 10 px，下内边距是 20 px。
如果规定四个值，比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px，右内边距是 10 px，下内边距是 20 px，左内边距是 30 px。 -
margin 属性设置元素的外边距
该属性可使用 1 到 4 个值：
如果规定一个值，比如 div {margin: 50px} - 所有的外边距都是 50 px
如果规定两个值，比如 div {margin: 50px 10px} - 上下外边距是 50px，左右外边距是 10 px。
如果规定三个值，比如 div {margin: 50px 10px 20px}- 上外边距是 50 px，而左右外边距是 10 px，下外边距是 20 px。
如果规定四个值，比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px，右外边距是 10 px，下外边距是 20 px，左外边距是 30 px。
图片.png
- font-size:50px 字体大小
- font-weight:50 字体的粗细
- background-color:red 背景颜色
*color 字体颜色 - fontFamily 字体类型
<img>
<img src="smiley.gif" alt="Smiley face" width="32" height="32">
- alt 属性用来为图像定义一串预备的可替换的文本。
- width="32" height="32" 设置图片的高度和宽度
欲速则不达，每天进步一点点
如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
生活很好，有你更好
网友评论