html、css学习笔记（一）
2019-07-04 本文已影响0人
dev_winner
- HTML是网页内容的载体。
- CSS样式是表现。
- JavaScript是用来实现网页上的特效效果。
- 文字大小：
font-size - 文字颜色：
color - 文字位置：
text-align - 标题标签：
<h1></h1> - 段落标签：
<p></p> - 图片标签：
<img src="图片所在路径"> - 标签由英文尖括号
<和>括起来 - html中的标签一般都是成对出现的，分
开始标签和结束标签。结束标签比开始标签多了一个/。 - 标签与标签之间是可以嵌套的。
- html文件的固定结构：
<html>
<head>...</head>
<body>...</body>
</html>
- <html></html>称为
根标签，所有的网页标签都在<html></html>中。 - <head> 标签用于
定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。 - 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
-
<head>标签：文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面标签可用在head部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
-
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。 - 代码注释：
<!--注释文字 -->
-
<body>标签：网页上显示的内容放这里 -
<hx>标签来制作文章的标题，标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。 - 强调某几个文字：
<em>或者<strong>标签，其中<em>表示强调，<strong>表示更强烈的强调。 - <em>的内容在浏览中显示为
斜体，<strong>显示为加粗。 -
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。 - 语法：
<span>文本</span> -
<q>标签：短文本引用。注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。 -
<blockquote>的作用也是引用别人的文本，但它是对长文本的引用。 - 语法：
<blockquote>引用文本</blockquote> - 浏览器对
<blockquote>标签的解析是缩进样式。 - 使用
<br >标签分行显示文本 -
<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。在 html 中是忽略回车和空格的。 - 为你的网页中添加一些空格：
，注意分号不能忘记！ -
<hr >标签：添加水平横线。
-
<address>标签：为网页加入地址信息，其在浏览器上显示的样式为斜体。 - 使用
<code>标签：加入一行代码。注意：在文章中一般如果要插入多行代码时不能使用<code>标签了，可以使用<pre>标签。 - 语法： <code>代码语言</code>
- 使用<pre>标签为你的网页
加入大段代码 - 语法：<pre>代码语言段</pre>
- <pre> 标签的主要作用：
预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>前端测试</title>
</head>
<body>
<code>cout << "Hello World！" << endl;</code>
<pre>
var message="欢迎";
for(var i = 1; i <= 10; i++)
{
alert(message);
}
</pre>
</body>
</html>
测试加入代码显示效果
- 列表：
<ul></ul> -
ul-li是没有前后顺序的信息列表。 - 语法：
<ul>
<li>
我的第一个信息列表
</li>
</ul>
- ul-li在网页中显示的默认样式一般为：每项li前都
自带一个圆点。
测试无序列表
-
<ol>标签，ol-li：有序列表。 - 语法：
<ol>
<li>
我的第一个列表信息。
</li>
<li>
我的第一个列表信息。
</li>
</ol>
- <ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始。
测试有序列表
- 在网页制作过程过中，可以把一些
独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器，用div标签为网页划分独立的版块。 - 语法：
<div>…</div> - 逻辑部分：它是页面上
相互关联的一组元素。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div>
<h2>成绩排行榜</h2>
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
</div>
<div>
<h2>最新课程排行</h2>
<ol>
<li>版本管理工具介绍—Git篇 </li>
<li>Canvas绘图详解</li>
<li>QQ5.0侧滑菜单</li>
</ol>
</div>
</body>
</html>
测试div
- 为每一个独立的逻辑部分设置一个名称，用
id属性来为<div>提供唯一的名称。 - 语法：
<div id="版块名称">…</div> - 创建表格的四个元素：
table、tbody、tr、th、td。
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构，tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。 - table表格在没有添加css样式之前，在浏览器中显示是没有表格线的。
- 表头，也就是
th标签中的文本默认为粗体并且居中显示。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>
三班
</td>
<td>
32
</td>
<td>
80
</td>
</tr>
</tbody>
</table>
</body>
</html>
测试表格
- 在<head>标签里添加css样式：
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
- 显示效果如下：
设置表格css样式
-
caption标签：为表格添加标题和摘要。 - 摘要的内容是不会在浏览器中显示出来的。它的作用是
增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好地帮助特殊用户读取表格内容。 - 语法：
<table summary="表格简介文本"> - 标题：用以描述表格内容，标题的显示位置：
表格上方。 - 语法：
<caption>标题文本</caption>
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<table summary="测试表格">
<caption>随机测试与填写</caption>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>
三班
</td>
<td>
32
</td>
<td>
80
</td>
</tr>
</tbody>
</table>
</body>
</html>
设置表格的标题与摘要
