实训第一天以及第二天所学记录
浏览器内核
IE:Trident
Firefox:Gecko
Chrome:Webkit / Blink
Safari:Webkit
Opera:Presto / Blink
在VScode中使用注释的快捷键
按住键盘的Ctrl+/元素
(标签 标记)
<a href="http://www.baidu.com">百度</a>
<title>document</title>
整体:element(元素)
元素 = 起始标记(begin tag) + 结束标记 (end tga)+ 元素内容 + 元素属性(描述元素的额外信息)
属性 = 属性名 + 属性的值 (加到起始标记里面)
属性的分类:
1.局部属性(某些元素特有的属性)
2.全局属性(所有元素同意)
<meta charset="UTF-8">
``html
<title>Document</title>
网页标题
<body></body>
文档体,页面上所有要参与显示的文件,都应该放在文档体中。
什么是语义化
-
每一个HTML元素都具有的意义
a元素:超链接
p元素:段落
h1元素:一级标题 -
所有元素与展示效果无关。
元素展示到页面中的效果,应该由CSS决定。
因为浏览器带有默认的CSS样式,所以每个元素有一些默认样式。
重要理论:选择什么元素,取决于内容的含义,而不是显示出的效果
文本元素
HTML5中支持的元素:HTML5元素周期表。
h
标题
h1~h6:表示一级标题到六级标题。
p
段落
HTML实体
实体字符,HTML Entity
实体字符通常用于在页面中显示一些特殊符号。
- &单词;
- &#数字;
- 小于符号:<
- 大于符号:>
- 空格符号: none-breaking space
- 版权符号:©
- &符号:&
a元素
超链接
路径的写法
站内资源和站外资源
站内资源:当前网站的资源
站外资源:非当前网站的资源
绝对路径和相对路径
对站外资源使用绝对路径,对站内资源使用相对路径。
绝对路径的书写格式:
url地址:
协议名://主机名:端口号/路径
schema://host:port/path
图片元素
image元素
image缩写,空元素
src属性:source。
alt属性:当图片资源失效时,当显示该属性的文字替代图片。
列表元素
有序列表
ol:ordered list
li:list item
无序列表
把ol改为ul
ol:unordered list
无序列表常用于制作菜单或新闻列表。
定义列表
通常用于一些术语的定义
dl:definition list
dt:definition title
dd:definition description
总结:
-
容器元素中可以包含任何元素:div header article
-
a元素中几乎可以包含任何元素
-
某些元素有固定的子元素(ul>li ol>li dl>dt+dd)
-
标题元素和段落元素不能相互嵌套,并且不能包含容器元素
表格元素
在CSS技术出现之前,网页通常使用表格布局。
现在因为表格的渲染速度过慢,不再适用于表格布局.
表格由 table标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下:
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
在浏览器显示如下:
Row 1, cell 1 | Row 1, cell 2 |
表格的表头
表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下:
Heading | Another Heading |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |