css 一行显示_Html和css入门（更新中）

最新推荐文章于 2024-04-10 00:57:51 发布

weixin_39946500

最新推荐文章于 2024-04-10 00:57:51 发布

阅读量444

点赞数

文章标签： css 一行显示 css 数字换行 css多张图片一行显示 css表格样式大全 css颜色表 html css表格样式模板

0.1只是个人学习笔记的记录，侵删。

0.2目录如下

1.HTML简介

1.1 Hello world

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>制作我的第一个网页</title>
</head>
Hello World
<body>
</body>

</html>

1.2 html和css的关系

1、css是用来修饰html样式的

2、html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css

3、html+css构成了我们网页的基本页面结构和样式

4.#930颜色值前面的#号注意不要忘记了。

5.每行css代码结尾都要加入;（h1{后不用加，因为它不是一条语句）如：

1.3 标签的语法

标签由英文尖括号<和>括起来，如<html>就是一个标签。
html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

如：

（1） <p></p>

（2） <div></div>

（3） <span></span>

标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。如下图所示。
HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。

1.4 html5文档结构

:文档类型声明，表示该文件为 HTML5文件。声明必须是 HTML 文档的第一行，位于标签之前
<html></html>标签对：<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。
<head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。
1. <body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1> 等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。

1.5 认识head标签

文档的头部描述了文档的各种属性和信息，包括文档的标题等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

1、head标签为双标签，有尾标签，<head></head>。

2、head标签表示头部标签,通常用来嵌套meta、title、style等标签。

3、<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

4、<meta charset="UTF-8">设置当前文件字符编码

5、style标签：双标签中设置当前文件样式

例如title标签：

<head>
    <title>hello world</title>
</head>

<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来，如下图所示：

1.6 认识body标签

在网页上要展示出来的页面内容一定要放在body标签中。如下图的例子：

1.7 html文件注释

语法：

2.HTML5语义化标签

2.1 语义化，让你的网页更好的被搜索引擎理解

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等

2.2 段落标签

语法：

段落文本

注意一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<p>标签中。

2.3 使用<span>标签自定义文字样式

这一小节讲解<span>标签，这个标签是没有语义的，它的作用就是为了设置单独的样式用的。

语法：

<span>文本</span>

2.4 使用<hx>标签为网页增加标题

文章的段落用<p>标签，那么文章的标题用什么标签呢？在本节我们将使用<hx>标签来制作文章的标题。标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。 语法： <hx>标题文本</hx> (x为1-6) 文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。如下图为腾讯网站

注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<h1>腾讯网</h1>

h1-h6**标签的默认样式：**

标签代码：

在浏览器中显示的样式：

从上面的图片可以看出标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。

2.5 使用<div>标签自定义块

语法：

…

2.6 <header>标签定义头部区域

2.7 <footer>标签定义底部区域

2.8 <section>定义区段

2.9 <aside>定义侧边栏区域

3.HTML效果标签

3.1 使用标签实现换行效果

标签作用相当于word文档中的回车。

语法：

xhtml1.0写法：

<br />

html4.01写法：

<br>

大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。

讲到这里，你是不是有个疑问，想折行还不好说嘛，就像在 word 文件档或记事本中，在想要折行的前面输入回车不就行了吗？很遗憾，在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。如下边的代码。

上面的代码在浏览中显示是没有回车效果的。如下图所示：

总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br />。

3.2 使用特殊字符实现空格标签

语法：

&nbsp;

3.3 使用<hr>标签实现水平线标签语法：

html4.01版本 <hr>

xhtml1.0版本 <hr />

注意：

<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
<hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

4.HTML5列表标签

4.1 使用<ul><li>标签实现无序列表

语法：

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

4.2 使用<ol><li>标签实现有序列表

语法：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

5.HTML图片、链接及表格标签

5.1 使用<img>标签为网页添加图片

语法：

讲解：

1src：标识图像的位置；

2alt：指定图像的描述性文本，当图像不可见时（下载不成功时）可看到该属性指定的文本；

3title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4图像可以是GIF，PNG，JPEG格式的图像文件。

5.2使用<a>标签为网页添加超链接

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

注意：只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000})

5.3 在新建浏览器窗口中打开链接

a标签有的target属性，代表打开网页的方式。可选值为”self和blank”，默认值为self，代表在当前页面打开链接，blank代表在新窗口打开链接。

5.4 使用table家庭为网页添加表格

上面代码解释：

创建表格的四个元素：table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

注意：

1、table标签用来定义整个表格，为双标签，必须有结束标签。

2、table标签里面可以放caption标签和tr标签。

3、caption标签用来定义表格的标题。

4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。

5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

6、td同来设置表格的列，一组td标签代表一列。

7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

5.5 使用thead、tbody、tfoot定义表格

在上一章节中,我们已经学习了用<table>标签家族来定义一个表格,我们使用到了<tr>标签来定义表格的行,<th>和<td>来定义表格的列,那么这一章,我们来学习<thead>标签定义表格头部,<tbody>标签来定义表格的内容,<tfoot>来定义表格的底部,来将我们的表格继续完善吧！

创建表格的三个区域：

thead、tbody、tfoot

我们想实现一个成绩表,各科成绩和总分,效果如下图：

我们表格第一行为表头数据,我们用<thead>标签包裹,中间的科目和分数为表格的主体内容,我们用<tbody>标签包裹,最后的总分我们用<tfoot>标签包裹。

1、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

3、<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

6.HTML5表单标签，与浏览者交互

6.1 使用<form>创建表单

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

<form   method="传送方式"   action="服务器文件">

讲解：

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ：数据传送的方式（get/post）。

<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki，里面有详细介绍。

6.2 文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

语法：

<form>
   <input type="text/password" name="名称" value="文本" />
</form>
**1**``**、type：**
  当type="**text**"时，输入框为**文本**`**输入框**`**;**
  当type="**password**"时,` `输入框为**密码输入框。**
**2**``**、name：**``为文本框命名，以备后台程序ASP 、PHP使用。
**3**``**、value：**``为文本输入框设置默认值。(一般起到提示作用)

举例：

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>

在浏览器中显示的结果：

6.3 placeholder属性的使用

这一项章节我们来学习input标签中占位符placeholder属性，有时候需要提示用户输入框需要输入框的内容，那么就会用到我们的占位符，比如下面的效果：

想要实现这样的效果,我们只需要输入以下代码：

技术点的解释：

1、placeholder属性为输入框占位符,里面可以放提示的输入信息。

2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。

3、占位符内容不是输入框真正的内容。

6.4 数字输入框

技术点的解释：

1、input的type属性设置为number,则表示该输入框的类型为数字。

2、数字框只能输入数字，输入其他字符无效。

3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。

6.5 网址输入框

技术点的解释：

1、input的type属性设置为url,则表示该输入框的类型为网址。

2、数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。

6.6 邮箱输入框

我们要实现一个邮箱输入框，可以输入以下代码：

技术点的解释：

1、Input的type属性设置为email,则表示该输入框的类型为邮箱。

2、数字框的值必须包含@。

3、数字框的值@之后必须有内容,否则会报错误提示。

6.7 使用<textarea>标签创建文本域

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

<textarea  rows="行数" cols="列数">文本</textarea>
1``、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2``、**cols ：**``多行输入域的**列数**。
3``、**rows ：**``多行输入域的**行数**。
4``、在<textarea></textarea>标签之间可以输入**默认值**。

**举例**：

<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

注意：代码中的<label>标签在本章5-9中讲解。

在浏览器中显示结果：

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

6.8 label标签

语法：

<label for="控件id名称">

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

6.9 单选框、复选框

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即**单选框**和**复选框**，两者的区别是**单选框**中的选项用户只能选择一项，而**复选框**中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

如下面代码：

注意：代码中的<label>标签在本章 5-9 中有讲解。

在浏览器中显示的结果：

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

6.10 使用select、option标签创建下拉菜单

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：

讲解：

1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。

2、select标签里面只能放option标签，表示下拉列表的选项。

3、option标签放选项内容，不放置其他标签。

4、value：

5、selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

在浏览器中显示的结果：

6.11 提交按钮

在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

<input   type="submit"   value="提交">
type``**：只有当type值设置为submit时，按钮才有提交作用**
value``**：**``按钮上显示的文字

**举例**：

在浏览器中显示的结果：

6.12 使用重置按钮，重置表单信息

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

语法：

<input **type="reset"** value="重置">
type``**：只有当type值设置为reset时，按钮才有重置作用**
value``**：**``按钮上显示的文字

**举例**：

在浏览器中显示的结果：

输入账号

单击重置按钮

7.CSS3简介

7.1 给html打扮一下 - 认识CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

如下列代码：

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

7.2 CSS样式的优势

为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句。

第一步：把这三个短语用<span></span>括起来。（见右边代码编辑器15行）

第二步：写入下列代码：（见右边代码编辑器8-10行）

span{
    color:red;
}

观察结果窗口文字的颜色是否变为红色了。

7.3 CSS代码语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{font-size:12px;color:red;}

注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{
   font-size:12px;
   color:red;
}

7.4 CSS注释代码

就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。就像下面代码：

weixin_39946500

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 一行显示_Html和css入门（更新中）

0.1只是个人学习笔记的记录，侵删。0.2目录如下1.HTML简介1.1 Hello world<!DOCTYPE html>1.2 html和css的关系1、css是用来修饰html样式的2、html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css3、html+css构成了我们网页的基本页面结构和样式4.#930颜色值前面的#号注意不要忘记了。5.每行css...
复制链接

扫一扫

css 一行显示_Html和css入门（更新中）

0.1只是个人学习笔记的记录，侵删。

0.2目录如下

1.HTML简介

1.1 Hello world

1.2 html和css的关系

1.3 标签的语法

1.4 html5文档结构

1.5 认识head标签

1.6 认识body标签

1.7 html文件注释

2.HTML5语义化标签

2.1 语义化，让你的网页更好的被搜索引擎理解

2.2 段落标签

2.3 使用<span>标签自定义文字样式

2.4 使用<hx>标签为网页增加标题

2.5 使用<div>标签自定义块

2.6 <header>标签定义头部区域

2.7 <footer>标签定义底部区域

2.8 <section>定义区段

2.9 <aside>定义侧边栏区域

3.HTML效果标签

3.1 使用 标签实现换行效果

3.2 使用特殊字符 实现空格标签

3.3 使用<hr>标签实现水平线标签语法：

4.HTML5列表标签

4.1 使用<ul><li>标签实现无序列表

4.2 使用<ol><li>标签实现有序列表

5.HTML图片、链接及表格标签

5.1 使用<img>标签为网页添加图片

5.2使用<a>标签为网页添加超链接

5.3 在新建浏览器窗口中打开链接

5.4 使用table家庭为网页添加表格

5.5 使用thead、tbody、tfoot定义表格

6.HTML5表单标签，与浏览者交互

6.1 使用<form>创建表单

6.2 文本输入框、密码输入框

6.3 placeholder属性的使用

6.4 数字输入框

6.5 网址输入框

6.6 邮箱输入框

6.7 使用<textarea>标签创建文本域

6.8 label标签

6.9 单选框、复选框

6.10 使用select、option标签创建下拉菜单

6.11 提交按钮

6.12 使用重置按钮，重置表单信息

7.CSS3简介

7.1 给html打扮一下 - 认识CSS样式

7.2 CSS样式的优势

7.3 CSS代码语法

“相关推荐”对你有帮助么？

3.1 使用标签实现换行效果

3.2 使用特殊字符实现空格标签