html学习笔记--1

更新于 | 阅读次数
| 字数统计 2,734 | 阅读时长 11

抽空学习了一下html、css、JavaScript。

这部分内容是我抽空学习的时候整理的笔记,这部分是看的前端的内容。学习地址。

基础知识

  1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
  2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
  3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

注释

html代码注释 <!--注释内容-->

html文件的基本结构

1
2
3
4
<html>
	<head>...</head>
	<body>...</body>
</html>
  1. <html></html>为根标签，所有的网页标签都在<html></html>中.
  2. <head></head>标签用于定于文档的头部，他是所有头部元素的容器。头部元素有以下这些标签
    • <title>
    • <script>
    • <style>
    • <link>
    • <meta>
    • etc
  3. <body></body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容，在这里的标签中的内容会在浏览器中显示出来。

head 标签

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

下面标签可用在head 部分

1
2
3
4
5
6
7
<head>
	<title>...</title>
	<meta>
	<link>
	<style>...</style>
	<script>...</script>
</head>
  • title标签: 网页的标题信息,内容显示在浏览器的标题栏目中.

body 标签

作用:网页上要显示的内容必须放在body标签中。

1、<p></p>段落文本

如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。注意一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<p>标签中。<p>标签的默认样式是段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。

2、<hx></hx>标题

x: 1-6 分别为一级标题、二级标题….六级标题。
注意:因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。如<h1>腾讯网</h1>

3、<strong><em>强调

<strong></strong>:加粗

<em></em>:斜体

4、<span>行内标签

  1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调;
  2. <span>是没有语义的，他的作用就是为了设置单独的样式;

如我要对段落中某个词语改变颜色:

在<head>的<style>标签中

1
2
3
4
5
`<style>
	span{
		color : red;
	}
</style>`

在文本中用<span></span>包上需要将颜色变成红色的文字;

那么问题来了,如果我对词语`objc`红色 对 `javascript`蓝色呢？

这也很简单。同上在<style>中

1
2
3
4
5
6
7
8
`<style>
span.blue{
    color:blue;
}
span.red{
    color:red;
}
</style>`

然后在文本中 <span class = "blue">javascript</span> 、<span class = "red">objc</span>

5、<q> 引用文本

效果类似于手动给文本加上双引号。但是使用<q></q>关键点在于增加语意：引用别人的话

6、<blockquote>长文本引用

跟<q></q>的简短文本不同，<blockquote><／blockquote>表示长文本引用。比如在文中需要引用一首李白的一句诗，那么用<q>窗前明月光</q>。如果是一首诗，那么用<blockquote>。。。。。<／blockquote>

使用<blockquote> 并不会像<q></q>一样添加双引号。但是会被浏览器解析成添加缩进样式。

7、 <br/>分行显示文本。

html代码中输入空格、回车都是没有作用的。如果要换行就是在要分行的地方添加<br/>标签。

<br /> : 换行

<hr /> : 分段线

<img> : 插入图片

8、 &nbsp;添加空格

在html中如果需要输入空格，必须写入&nbsp;；

一个&nbsp;是一个空格。

9、 <address>为网页加入地址信息

默认斜体

10、<code>加入一行代码

<code>var string = "aaa";</code>

var string = “aaa”;

如果加入多行代码使用<pre></pre>代替<code></code>

11、 无序列表、有序列表

无序列表语法：

1
2
3
4
5
6
`<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
</ul>`

有序列表语法：

1
2
3
4
5
6
`<ol>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
</ol>`

12、<div>

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

可以通过id给div命名

语法

<div id = "板块名称">...</div>

13、 <table> 表格

<table>、<tbody>、<tr>、<th>、<td>

  1. <table>...</table>:整个表格以<table>标记开始，以</table>标记结束。
  2. <tbody>...</tbody>:当表格内容非常多的时候，表格会一边下载一边加载。加上<tbody>...</tbody>之后，这个表格就要等全部下载完之后才回加载。
  3. <tr>...</tr>:表格的一行，有几个<tr>就表示有几行。
  4. <td>...</td>:表格的一列，一行中有几个<td>就表示这一行有几列。
  5. <th>...</th>:表格的头部单元格,表格表头。
  6. 表格中列的个数，取决于一行中数据单元格的个数。

注意：

  • table表格在没有添加css样式之前，在浏览器中是没有表格线的。
  • <th>中的表头，默认粗体并且居中显示。

14、<caption> 为表格添加标题和摘要

标题:

语法:<caption>title</caption>

作用:用于描述表格内容，显示在表格上方

摘要:

语法:<table summary="表格简介文本">

作用：摘要是不会在浏览器中显示出来的。作用是为了增加语义性。

15、<a> 链接到另外一个界面

使用<a>标签可以实现超链接.

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

链接显的文本

这里的title属性的作用是: 鼠标滑过链接文字的时候，显示的内容。

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

以上表示在新窗口中打开超链接

16、<mailto> 在网页中链接Email地址

<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网址管理者发生电子邮件。还可以用它做些其它事情。

如下：













































功能 关键字 功能详解 举例
邮箱地址 mailto: 浏览器自动调用默认的电子邮件程序，并在收件人中填上跳上收件人地址 <a href="mailto: aa@163.com">发送</a>
抄送地址 cc= 在收件人地址后用cc=地址 ，可以填写抄送地址 <a href="mailto: aa@163.com?cc=bb@163.com">发送</a>
密件抄送地址 bcc= 在收件人地址后用cc=地址 ，可以填写密件抄送地址 <a href="mailto: aa@163.com?bcc=bb@163.com">发送</a>
多个收件人、抄送、密件抄送人 ; 用分号隔开多个地址 <a href="mailto: aa@163.com;bb@163.com">发送</a>
邮件主题 subject= 用subject= 添加邮件主题 <a href="mailto: aa@163.com？subject＝发送电子邮件">发送</a>
邮件内容 body= 用body= 添加邮件内容 <a href="mailto: aa@163.com？body= 邮件内容">发送</a>

注意:如果mailto后面有多个参数的话，第一个参数必须以？开头 其它&分开。

17、<img> 为网页插入图片

语法:<img src"图片地址" alt= "下载失败的替换文本" title = “提示文本”>

支持格式 : GIF PNG JPEG

18、 <form>与用户交互

语法:<form method="传送方式" action = “服务文件”>

  1. <form>: form 标签是成对出现的。
  2. action:浏览者输入的数据被传送到的地方，比如一个php页面
  3. method:数据的传输方式get／post
1
2
3
4
5
6
7
8
//
<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>
//





注意:

  • 所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>之间。
文本输入框 <input ... />

<input type = "text" name = "username" value = "placeholder"/>

其中type ＝ “text”时: 文本输入框

其中type ＝ “password”时: 密码输入框

name: 为文本框命名

value: 默认值

文本域 <textarea></textarea>

语法:<textarea rows="行数" cols="列数">默认文本</textarea>

cols:列数

rows:行数

单选框 和 复选框

语法: <input type="radio/checkbox" value = "值" name = "名称" checked = "checked" />

  1. type radio时，单选框 ，checkbox时，多选框。
  2. value:提交数据到服务器的值
  3. name:为控件命名
  4. checked:当设置 checked=”checked” 时，该选项被默认选中

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

下拉列表框
1
2
3
4
5
6
7
8
9
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>



  1. value <option value = “提交值”>选项<／option> 向服务器提交的值
  2. selected 默认选中

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。如下代码：

1
2
3
4
5
6
7
8
9
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select multiple = "multiple">
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物" selected = "selected">购物</option>
    </select>
</form>



按钮

语法: <input type="submit" value = "按钮" />

重置按钮

语法: <input type="reset" value = "重置" />

表单中的label标签

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

语法: <label for="控件id名称">

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








总结input标签的type属性 资料

  • text: 文本输入框
  • password: 密码输入框
  • radio:单选框
  • checkbox:多选框
  • submit:提交按钮
  • reset:重置按钮

CepheusSun wechat
订阅我的公众号，每次更新我都不一定会告诉你！
坚持原创技术分享，您的支持将鼓励我继续创作！