HTML/CSS知识储备
bg：前几天在论坛里找到了
西门子的内推，本想试一试就把简历制作发过去了。没想到回复邮件通知面试，面试的岗位是：内网/外网技术支持实习生,主要负责网页的运行维护、新闻推送页面制作等。我觉得挺好的，虽然平时也会主动去学习相关的web开发的工作，但是真正面试还是第一次，要好好准备，希望这次可以有学习体验的机会。明天下午进行面试，主要考察网页相关的知识，现在把HTML/CSS知识重新梳理复习一遍，明天加油！！！
HTML
-
HTML的定义：是一种超文本标记语言，不是编程语言，利用标记标签来描述网页。
-
HTML的标签：利用尖括号包围、成对出现、有开始有结束的标签、开放标签和闭合标签
-
HTML的元素：
- 标题是通过
<h1>--><h6>的标签进行定义，按重要级从小到大 - 段落是通过
<p>的标签进行定义，分行 - 链接是通过
<a>标签进行定义的，主要还有href的属性值，后面接的是链接的对应的网页地址 - 图像是利用
<img>标签进行定义，注意src属性值表示对应图片的存储位置 - 空的html元素：虽然没有实际的内容，但是还是需要返回和关闭标签，注意
<br />的用法，在开始标签中添加斜杠 - html中的标签对大小写不敏感，但是大多数网站都可以实现大写的
HTML标签.
- 标题是通过
-
HTML的属性
- 这里的属性太多了，挑选一些常见的属性实例
align="center"直接写在开始标签中，用于将文本对齐居中body主体中的属性，比如改变颜色，可以设置为background-color:yellow;同样也可以设置为<body bgcolor="yellow">来表示<table>定义为HTML的表格样式- 同样的在HTML中，对属性和属性值大小写并不敏感
- 属性值（也就是具体的选值）需要被包含在双引号之中
- 这里的属性太多了，挑选一些常见的属性实例
- HTML的标题
- 需要根据具体的样式选取标签，也就是前文所说的
<h1>...<h6>等，其中都是根据标题文字的重要性进行的排列，依次降低- 默认情况下，浏览器会自动地在标题的前后添加空行
HTML的水平线，例如<hr />,直接在当前界面中添加水平分割线
-
HTML段落
- 浏览器会自动地在段落前后添加空行（
<p>是块级元素）
- 浏览器会自动地在段落前后添加空行（
-
HTML样式（这个是重点！）
-
直接style用法
比如说是:
<p style="background-color:green;font-size:20px;text-align:center">This is an apple!</p> -
附加文件CSS
-
<em>和<i>的区别：-
<em>表示的是浏览器中的文本为强调的内容，但是最后 -
<i>本身就是斜体字符的样式 -
<strong>，这个标签也同样是强调文本的意思，但是它强调的程度更强一些，直接加粗字体的用法
-
-
-
HTML引用
-
<q>，元素是简短的引用，浏览器通常会直接对<q>元素包围引号 -
<blockquote>,通常是对元素定义被引用的节 -
cite,表示引用的数据的地址与来源 -
abbr,元素定义缩写或首字母缩略语对缩写进行标记能够成为为浏览器、翻译系统以及搜索引擎提供有用的信息。比如
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p> 输出就是：WHO.... -
dfn，元素定义项目或缩写 -
address元素定义文档或者文章的联系信息（作者/拥有者）,此元素通常以斜体进行表示 -
cite，该元素是著作的标题，通常会以斜体显示<cite>的元素
-
-
HTML CSS
上述的html的样式引入比较浅显，这里具体分类分析一下：
-
外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <!--上述代码中的rel表示当前引入的是外部样式表，type样式表示当前被链接文件的类型，href指定文件的存储路径和位置--> -
内部样式表
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> <!--注意是直接在head内部定义css样式--> -
内联样式
<p style="color: red; margin-left: 20px"> This is a paragraph </p> <!--注意是在标签头内部直接进行样式style的书写-->
<span>表示的是定义文档中的行内较小的一块或者是区域。<div>定义文档中的节或者是区域（块级）
-
-
HTML超链接
-
通过使用 href 属性 - 创建指向另一个文档的链接，也就是规定链接的目标
-
通过使用 name 属性 - 创建文档内的书签，也就是给
-
其中的
target属性：<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> <!--上述的代码表示会将新创建的超链接窗口定义为一个新的网页窗口-->
-
-
HTML图像
-
<img>标签，使用的是src源属性，指的是图像的URL地址关系，<img src="url" /> -
替换文本属性
<Alt>,表示的是为图像定义一串预备的可替换的文本，替换文本属性的值是用户自己定义的。-
<area>标签的coords属性规定了客户端图像映射到鼠标敏感的区域的坐标- 如下面代码：
<area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" /> <!--这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。-->
-
-
HTML表格
-
表格是由
<table>标签进行定义，每个表格都有若干行<tr>，每行是会被分割为若干个单元格<td>。数据单元格的内容，包含文本、图片、列表、段落、表单、水平线、表格等等。<table border="1"> <!--border="1"表示1个像素，也就是1px--> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td></td> <td>row 2, cell 2</td> </tr> </table> <!--tr是行，td是列--> -
*表格跨行、跨列操作
<colspan>实现单元格的跨列操作，使用<rowspan>实现单元格的跨行操作。其中的colspan="0"表示浏览器横跨到列的最后一列，对应rowspan也是一样,其余的直接数字就表示跨的列/行。
<table border="1"> <tr> <th>星期一</th> <th>星期二</th> </tr> <tr> <td colspan="2">星期天</td> </tr> </table>
-
-
HTML列表
- 无序列表
<ul>,每个列表项始于<li> - 有序列表
<ol>，每个列表项始于<li>标签
- 无序列表
-
HTML的块
-
大多数的HTML元素被定义为块级元素或者是内联元素，对于HTML块级元素来说，其在浏览器显示的时候，通常会以新行来开始或者结束。
<h1>,<p>,<ul>,<table> -
HTML的内联元素
常见的有：<b>,<td>,<a>,<img> -
HTML
<span>元素<span>元素可用于部分文本设置样式属性
-
-
HTML的id属性
-
id属性指定HTML元素中唯一id，属性的值在HTML文档中国也必须是唯一的。
这点和类名不一样，一个类名可以由多个元素共同使用，但是一个id属性只能由一个元素使用
-
-
HTML Iframe
-
Iframe通常用于在网页内显示网页，主要是用于嵌套网页<iframe src="https://shakej96.github.io/"></iframe>,<!--URL 指向隔离页面的位置。--> -
<iframe src="https://shakej96.github.io/"></iframe> -
同样是可以设置高度和宽度
-
Iframe:frameborder的属性规定是否显示周围的边框。
先写这么多吧，基本的HTML操作应该都复习到了，后续再添加上常用的CSS。
明天面试加油😊 -
