技术改变生活

Technology changes life,Life-long learning

Html和css学习笔记(w3school+慕课网)(一)

Html和css学习笔记(w3school+慕课网)(一)

tip:以下是个人防遗忘而在w3school和慕课网上重新复习基本的HTML和CSS知识所做的笔记,有不足之处望指正。

Html

◆什么是html(概念)

Html(hyper text markup language)是用来描述网页的一种语言,它不是一种编程语言,而是标记语言(标记语言:一套标记标签),用标签来描述网页。

• Html文档=网页

◆简单的html文档结构(举例)

<html>
<head>
<title>简单html文档结构</title>
</head>
<body>
页面内容
</body>
</html>

◆编辑html代码的工具

我们要用什么来写html代码呢?
可以用记事本、notepad、dreamweaver、sublime、webstorm、phpstorm等(列出来的是我个人用过的编辑器)
个人觉得用sublime或者webstorm、phpstorm比较舒服;

◆用编辑器写好代码之后,保存为html格式的文件,在你保存的地方看到你的html文件,双击将用你的默认浏览器打开。如果你的代码没有问题,页面中将显示你body标签中的内容。

◆Html元素

Html元素是指包含从开始标签到结束标签的所有代码。
元素内容是指开始标签到结束标签中间的内容。

• 空元素标签:eg:

tip:①所有标签都要关闭,虽然目前没有闭合也能正常显示,但是有闭合才是标准的、规范的写法。
②使用小写标签。万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

◆常见的html标签及使用方法

●<strong>注释:<!—注释内容–></strong>
可以使用注释对编写的代码进行解释,有助于之后代码的阅读。
使用方法:eg:

在浏览器中显示如图:(注释标签中的内容不会显示)

《Html和css学习笔记(w3school+慕课网)(一)》

1.png

●<strong><!DOCTYPE>标签:定义文档类型。</strong>
tip:①这不是HTML标签。
②必须放在HTML文档的第一行,位于<html>标签之前。
③最好始终在HTML文档中添加<!DOCTYPE>声明,这样浏览器才能获知文档类型。

●<strong><head>标签</strong>
<head>标签中常见<title><link><meta><style><script>标签;
<title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。
<link>标签常用引用外部CSS文件;
<meta>标签常用设置字符编码,eg:<meta charset=”utf-8”/>;

●<strong><body>标签</strong>
body 元素定义文档的主体。
body 元素包含文档的所有内容。

●<strong>
标签:插入一个简单的换行符。</strong>
注意:HTML中将自动忽略键盘手动输入的回车和多余的空格,要换行需使用
,要空格需使用(注意 要加分号,相当于一个空格)。

●<strong>


水平线</strong>
eg:

浏览器显示效果:

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

可见,两段文字中间有一条水平分割线。

●<strong>< a >标签:定义锚(超链接)</strong>
• 用法:<a href=”xxx” title=”鼠标经过出现的文本” target=”_blank”>链接</a>
href是< a>标签的一个重要属性,指示链接的目标。
• HTML5中,如果没有设置href属性,则只是一个占位符。
通过href属性可以跳转到另一个指定的页面,也可以跳转到本页面中指定的位置(例如:页面中常见的“回到顶部”“回到底部”的功能)。
• title属性可以设置鼠标放在链接文字上时出现的文本;
• target属性可以设置点击链接时页面是以在新的窗口打开还是在当前窗口打开;target=”_blank”是在新的窗口打开,target=”_self”是在当前窗口打开。

eg:
< a href=”htttp://www.baidu.com”>百度</a>

< p id=”aim”>我是aim</p>
< a href=”aim”>跳转</a>
<!—点击“跳转”将跳转到“id”值为“aim”的地方去,如果上面的p标签是在页面顶部,则跳转到页面顶部,这样就实现了“回到顶部”功能–>

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

可以通过CSS设置链接的外观。

●<strong>Html标题类的标签</strong>
< h1>< h2>< h3>< h4>< h5>< h6>
从h1到h6分别是第一级标题、第二级标题……第六级标题,各级标题大小不同。
tip:浏览器会自动地在标题的前后添加空行。
Eg:

在浏览器中显示如图:

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

●<strong>< p>标签</strong>
表示这是一个段落。
Eg:

在浏览器中显示如图:

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

可见,第二个< p>标签中的内容不会紧接第一个< p>标签的内容而是自动换行,因为< p>标签是块级元素。如果不做修改,块级元素会新起一行。

tip: HTML 折行:在不产生一个新段落的情况下进行换行(新行),使用 < br /> 标签;
eg:

●<strong>< span>标签</strong>
eg:< span>文本< /span>,行内元素,不可以设置宽度和高度,宽高即为内容实际占有的宽高。

●<strong>< blockquote>长文本引用标签:</strong>
eg:

效果:(使用了< blockquote>的内容,两端自动缩进)

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

●<strong>< b>标签、< strong>标签、< big>标签、< small>标签、< i>标签:</strong>

浏览器显示效果:

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

●<strong>< code>标签:在页面中显示代码而不被浏览器执行。</strong>
eg:

<ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>

<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>

<div>
<h2>热门课程排行榜</h2>
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ol>
</div>
<div>
<h2>最新课程排行</h2>
<ol>
<li>版本管理工具介绍—Git篇 </li>
<li>Canvas绘图详解</li>
<li>QQ5.0侧滑菜单</li>
</ol>
</div>

效果图:

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

●<strong>< button>标签</strong>
eg:
< button type=”button”>Click Me!</button>
type定义了这是一个按钮,click me是显示在按钮上的文字。

●<strong>< img>标签:插入图片</strong>
使用:<img src=”图片地址” alt=”下载失败时的替换文本” title = “提示文本”>
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。

●<strong>表单</strong>
eg:

• < form></form>是表单标签;

• < input>标签type属性设置为“text”时为单行文本输入框,设置为“password”时为密码输入框;设置为“submit”时为提交按钮,设置为“reset”时为重置按钮,点击可清空输入框中已经输入的内容。value属性可设置文本框的默认值(初始值),name:为文本框命名,以备后台程序ASP 、PHP使用。

• label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。使用:< label for=”控件id名称”>,比如下图,用户在“用户名”三个字上点击鼠标,也可以将光标定位到文本输入框,因为“用户名”label的“for”值为下面文本框的ID值。

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

eg:

• < textarea>为多行文本输入框,cols属性为设置列数,rows为设置行数,可用CSS的width和height代替。

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

• 单选框、复选框

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

效果图:

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

1、type:
当 type=”radio” 时,控件为单选框
当 type=”checkbox” 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked=”checked” 时,该选项被默认选中
5、像单选框是一个小圆点很难点中时,可以使用label标签的作用,点击对应的label标签值也能选中对应的单选框,改善了用户体验。

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

• 下拉菜单

eg:

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

效果图:(虽然“读书”选项是第一项,但由于“购物”项的selected属性设置为“selected”,即默认选择“购物”)(一个select是一个下拉菜单,每一个option是下拉菜单的一个可选项)

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

tip:下拉列表也可以进行多选操作,在<select>标签中设置multiple=”multiple”属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。

《Html和css学习笔记(w3school+慕课网)(一)》

Paste_Image.png

原文始发于:Html和css学习笔记(w3school+慕课网)(一)

点赞