前端开发学习笔记-----HTML

菜鸟教程: HTML CSS

视频: php js

HTML

一.初识认识html标签

Tips:标签推荐小写!

1.标签(一般成对出现)

<li>< h1 >到< h6>表示标题 <li>< p >表示段落 <li>< a >用来定义链接 <li>提示:在 href 属性中指定链接的地址 <li>< img >来定义图像

如: < img src="/images/logo.png" width="258" height="39" /> 图像的名称和尺寸是一属性的形式提供

<li>< br> 换行

mark

<li>< body> 元素定义了 HTML 文档的主体 <li>< html> 元素定义了整个 HTML 文档

切记:不要忘记结束标签!!!!!!

没有内容的HTML元素被称为空元素.

空元素在开始标签中关闭.如 < br >这样的元素就是没有关闭标签的空元素在开始菜单中加上撇斜杠也就是 / 可以关闭空元素如< br />

2.HTML属性

HTML的元素可以设置属性,属性可以在元素中添加附加信息.属性存在开始标签中,属性应该始终包括在引号内.

如:< a href="http://blog.fangmingxuan.com">This is my blog</a>>

HTML属性参考:

二.标签详细说明

1.标题 < h1>至< h6>

<li>标题通过< h1>至< h6>来定义,其中< h1>定义最大标题< h6>定义最小标题

< hr >元素在HTML页面中创建水平线.

实现效果:

mark

<li>HTML中注释的方法为

< !-- 注释内容 -->

总结:

2.段落< p>

切记:浏览器并不是完全按照段落内输入的内容进行输出

mark

3.文本格式化

<li>HTML文本格式化标签

< b> 定义粗体文本 < em> 定义着重文字 < i> 定义斜体字 < small> 定义小号字 < strong> 定义加重语气 < sub> 定义下标字 < sup> 定义上标字 < ins> 定义插入字 < del> 定义删除字

<li>通常标签< strong>替换加粗标签< b>来使用, < em>替换 < i>标签使用

HTML "计算机输出" 标签

< code> 定义计算机代码 < kbd> 定义键盘码 < samp> 定义计算机代码样本 < var> 定义变量

< pre> 定义预格式文本

<li>HTML 引文, 引用, 及标签定义

< abbr> 定义缩写

< address> 定义地址 < bdo> 定义文字方向 < blockquote> 定义长的引用 < q> 定义短的引用语 < cite> 定义引用、引证 < dfn> 定义一个定义项目。

实现过程:

HTML

<h4>文本格式化</h4>
     <br />
	 <b>这个文本是加粗的</b>
	 <br />
	 <strong>这个文本是加粗的</strong>
	 <br />
	 <big>这个文本字体放大</big>
	 <br />
	 <em>这个文本是斜体的</em>
	 <br />
	 <i>这个文本是斜体的</i>
	 <br />
	 <small>这个文本是缩小的</small>
	 <br />这个文本包含
	 <sub>下标</sub>
	 <br />这个文本包含
	 <sup>上标</sup>
	 <hr />
	 <p>该段落文字从左到右显示。</p>  
 	 <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  
	 <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

效果:

4.HTML链接< a>来设置一个超文本链接

<超链接可以是一个字,一个词....也可以是一幅图,点击内容来跳转

标签< a>中使用href属性来描述链接的地址

<li>target 属性可以定义被链接的文档在何处显示.

**<li>target="_blank"**会让超链在新窗口打开文档.

<li>id 属性可用于创建在一个HTML文档书签标记

先用< a id="需要标记的部分"> 标记部分< /a>

然后用< a href="#需要标记的部分">访问标记部分< /a>

如果不在同一个页面需要加上页面地址

5.头部< head>

&nbsp <li>< head> 元素包含了所有的头部标签元素。在 < head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: < title>, < style>, < meta>, < link>, < script>, < noscript>, and < base>.

<li>使用**< title>**标签定义HTML文档标题 <li>使用**< base>**定义页面中所有链接的默认的链接目标地址,如可以先定义一个链接为新窗口打开,下面的URL可以直接使用不需要再后面加上**target="_blank"**即可再新窗口打开 <li>使用 **< meta>** 元素来描述HTML文档的描述，关键词，作者，字符集等。我把它当作注释或者声明来理解.**< meta>** 标签提供元数据.元数据不显示在页面上,但是会被浏览器解析.一般放在**< head>**区域.

**<li>< link>**标签定义了文档与外部资源之间的关系

**<li>< style>标签定义了HTML文档的央样式文件引用地址.在< style>**标签中可以直接添加样式来渲染HTML文档

HTML

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

三.深入

1.CSS

css是用于渲染HTML元素标签的样式.

使用**style="text-decoration:none;"**属性,可以使超链接没有下划线

CSS可以通过以下方式添加到HTML中:

<li>内联样式--在HTML元素中使用"style"属性

<li>内部样式表--在HTML文档头部**< head>区域使用< style>**元素来包含CSS

<li>外部引用--使用外部CSS文件,(推荐方法)

如:内联样式

HTML

<p style="color:blue;margin-left:20px;">看内联样式效果</p>

效果:

mark

background-color可以定义一个元素的背景颜色,颜色可用英文代码或者16进制代码表示.

如:将body背景色改成淡青色,主标题的背景色改成蓝色

mark

效果:

mark

<li>可使用font-family color font-size text-align(文字对齐属性) 等属性来定义字体的样式,多个样式之间用分号分隔.

如:

HTML

<p style="font-family:arial;color:red;font-size:20px;">段落</p>

<li>内部样式表可在< head>部分通过< style>标签定义内部样式表

HTML

<head>
	<meta charset="utf-8">
	<title>前端开发笔记</title>
	<meta name="description" content="前端开发学习笔记,实例测试">
	<meta name="author" content="隔壁家的三少爷">
	<style type="text/css">
		h1,h2,h3 {color: green}
		p {color: blue}
	</style>

</head>

<li>外部样式表,可以改变所有应用此文件的站点的外观

< link>定义资源引用地址

2.图像,HTML中图像使用 < img>来定义

<li>< img>是个空标签,它只包含属性,没有闭合标签.要在页面上显示图像,需要使用源属性 src .源属性的值是图像的URL地址.

<li>alt属性为图像定义一串预备的可替换的文本,即当图像在浏览器上无法显示的时候,则替换为这一串文本,这样可以很快找到出错地方在哪

<li> height 和 width 属性用于设置图像的高度和宽度.属性值默认单位为像素

3.表格< table>定义用< tr>来定义行 ,< td>来分割行并且输入内容 ,< th>来定义表头.< caption>来给表格价格标题< cellpadding>可以改变单元格边距, < cellspacing> 可以改变单元格间距.< colgroup>为表格设置背景色

HTML

<table border="1" cellpadding="10">
     	<colgroup>
     		<col span="2" style="background-color: pink">
     		<col style="background-color: yellow">
     	</colgroup>
     	<caption>表格效果</caption>
     	<tr>
     		<th>图片</th>
     		<th colspan="2">描述</th>
     	</tr>
     	<tr>
     		<td><img src="http://qiniuph.fangmingxuan.com/blog/20200422/1ccYuXRXXsjO.png?imageslim" height="150" width="192"></td>
     		<td>鹿			</td>
     		<td>海报</td>
     	</tr>
     </table>

<li>效果:

mark

4.列表

<li>有序列表

有序列表使用**< ol>**标签,此列项目使用数字进行比奥及

HTML

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

mark

<li>无序列表

无序列表使用**< ul>**标签,此列项目使用粗体圆点标记.

HTML

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

mark

<li>自定义列表

自定义列表不仅仅是一列项目,而是项目机器注释的组合

自定i列表一**< dl>标签开始.每个自定义列表项以< dt>开始.每个自定义列表项的定义以< dd>**开始.

HTML

<dl>
    <dt>Coffee</dt>
    	<dd>- black hot drink</dd>
    <dt>Milk</dt>
    	<dd>- white cold drink</dd>
</dl>

mark

5.区块-布局

<li>大多数 HTML 元素被定义为块级元素或内联元素

实例: < h1>, < p>, < ul>, < table>

<li>内联元素在显示时通常不会以新行开始。

实例: < b>, < td>, < a>, < img>

**<li>< div>**元素是块级元素,可用于组合其他HTML元素的容器,我是把它当作像C语言中的函数块一样来理解,与范围外的其他元素成分相互独立,可以单独设置属性.如css等

**<li>< span>**元素是内联元素,我认为它可以单独的改变句中某一部分内容的属性

**<li>< table>**终究只是个表格布局,不过它可以胜任一些比较正式的或者需要一定格式的一些网页布局

6.表单:用于收集不同类型的用户输入

<li>表单元素可允许用户在表单中输入内容,如: 文本域(textarea) ,下拉列表,单选框(radio-buttons) ,复选框(checkbxes)等等.

<li>表单使用表单标签 *< form>*来设置

a. 输入元素 < input>

<li>文本域通过**< input type="text">**标签来设定

HTML

<form>
姓名: <input type="text" name="姓名">
</form>

mark

<li>密码字段,此字段下的字符不会明文显示.

HTML

<form>
密码: <input type="password" name="pwd">
</form>

mark

b. 选择框

<li>单选按钮 (Radio Buttons) < input type="radio"> 标签定义了表单单选框选项

HTML

<form>
    性别:
	<input type="radio" name="sex" value="male">男
	<input type="radio" name="sex" value="female">女
</form>

mark

<li>复选框 (checkboxes) *< input type"checkbox">*定义复选框,在给出的选择中选择一个或多个选项

HTML

有喜欢的东西吗?
			  <input type="checkbox" name="fav"> 乐高 <br>
			  <input type="checkbox" name="fav"> 电脑 <br>
			  <input type="checkbox" name="fav"> 手办

mark

<li>下拉列表

HTML

<form action="">
		<select name="food">
			<option>noodle</option>
			<option>rice</option>
			<option>soup</option>
		</select>
	</form>

mark

c.按钮 button

<li> 创建按钮

HTML

<input type="button" value="此处自定义按钮名称">

<li> 提交按钮 submit

HTML

<input type="submit" value="提交">

HTML

有喜欢的东西吗? <br>
			  <input type="checkbox" name="fav"> 乐高 <br>
			  <input type="checkbox" name="fav"> 电脑 <br>
			  <input type="checkbox" name="fav"> 手办 <br>
			  <input type="submit" value="提交"><br>

mark

7.框架通过使用框架,可以在同一个浏览器窗口中显示不止一个页面 iframe

<li> iframe语法:

HTML

<iframe src="URL"></iframe>

a.设置高度与宽度使用width和height

HTML

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

b.移除边框

HTML

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

c.使用iframe显示目标链接页面

HTML

<iframe src="http://blog.fangmingxuan.com" name="blog" width="1600" height="900"></iframe>
	<p><a href="http://blog.fangmingxuan.com" target="blog"></a></p>

mark

8.颜色可使用颜色名或十六进制颜色或者RGB颜色来表示,web安全色可确保能在所有计算机上正确显示所有的颜色

9.脚本 JavaAcript是HTML页面具有更强的动态和交互性

**< script>**标签用于定义客户端脚本,比如Javascript. **< script>**元素既可包含脚本语句,也可通过 src属性 只想外部脚本文件

<li>Tips:JavaScript 最常用于图片操作、表单验证以及内容动态更新。

HTML

<script>
	document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器会使用 &lt;noscript&gt; 元素中定义的内容（文本）来替代。</p>

<li> 当浏览器**不支持Javascrip**t时会用  **noscript**  标签的内容来替换,提醒.

10.字符实体 HTML中的预留字符必须被替换为字符实体.

一些在键盘上找不到的字符也可以使用字符实体来替换.

<li> 如: HTML中不能使用小于号和大于号因为浏览器会误认为它们是标签.如果希望正确地显示预留字符,我们必须在HTML源代码中使用字符实体(character entities). 格式为 &entity_name; 或**&#entity_number;**

<li> a.不间断空格

浏览器总是会截短HTML页面中的空格.在页面显示前,浏览器只会留下一个空格,删除多余的其他空格.如果需要连续使用多个空格必须使用 & nbsp; 字符实体.

<li> b.结合音标符

就是可以在字母上面加上变音符号 à á â ã 分别是 & #768; & #769; & #770; & #771;

<li> c.字符实体

	空格	&nbsp;	&#160;
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
"	引号	&quot;	&#34;
'	撇号 	&apos; (IE不支持)	&#39;
￠	分	&cent;	&#162;
£	镑	&pound;	&#163;
¥	人民币/日元	&yen;	&#165;
€	欧元	&euro;	&#8364;
§	小节	&sect;	&#167;
©	版权	&copy;	&#169;
®	注册商标	&reg;	&#174;
™	商标	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;

<li> Tips: 虽然HTML不区分大小写,但实体字符对大小写敏感

三.总结

1.HTMl速查列表

HTML

HTML 速查列表
HTML 速查列表. 你可以打印它，以备日常使用。

HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
链接（Links）
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
图片（Images）
<img src="URL" alt="替换文本" height="42" width="42">
样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
无序列表
<ul>
    <li>项目</li>
    <li>项目</li>
</ul>
有序列表
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>
定义列表
<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>
表格（Tables）
<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>
框架（Iframe）
<iframe src="demo_iframe.htm"></iframe>
表单（Forms）
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>
实体（Entities）
&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于

前端开发学习笔记-----HTML

HTML

一.初识 认识html标签

Tips:标签推荐小写!

1.标签(一般成对出现)

切记:不要忘记结束标签!!!!!!

2.HTML属性

HTML的元素可以设置属性,属性可以在元素中添加附加信息.属性存在开始标签中,属性应该始终包括在引号内.

HTML属性参考:

二.标签详细说明

1.标题 < h1>至< h6>

总结:

2.段落< p>

切记:浏览器并不是完全按照段落内输入的内容进行输出

3.文本格式化

<li>HTML文本格式化标签

<li>通常标签< strong>替换加粗标签< b>来使用, < em>替换 < i>标签使用

实现过程:

效果:

4.HTML链接< a>来设置一个超文本链接

<li>target 属性可以定义被链接的文档在何处显示.

<li>id 属性可用于创建在一个HTML文档书签标记

5.头部< head>

三.深入

1.CSS

CSS可以通过以下方式添加到HTML中:

background-color可以定义一个元素的背景颜色,颜色可用英文代码或者16进制代码表示.

<li>可使用font-family color font-size text-align(文字对齐属性) 等属性来定义字体的样式,多个样式之间用分号分隔.

<li>内部样式表可在**< head>部分通过< style>**标签定义内部样式表

<li>外部样式表,可以改变所有应用此文件的站点的外观

**< link>**定义资源引用地址

2.图像,HTML中 图像使用 **< img>**来定义

<li>< img>是个空标签,它只包含属性,没有闭合标签.要在页面上显示图像,需要使用源属性 src .源属性的值是图像的URL地址.

<li>alt属性为图像定义一串预备的可替换的文本,即当图像在浏览器上无法显示的时候,则替换为这一串文本,这样可以很快找到出错地方在哪

<li> height 和 width 属性用于设置图像的高度和宽度.属性值默认单位为像素

3.表格**< table>定义用< tr>来定义行 ,< td>来分割行并且输入内容 ,< th>来定义表头.< caption>来给表格价格标题< cellpadding>可以改变单元格边距, < cellspacing> 可以改变单元格间距.< colgroup>**为表格设置背景色

4.列表

<li>有序列表

<li>无序列表

<li>自定义列表

5.区块-布局

6.表单:用于收集不同类型的用户输入

a. 输入元素 < input>

b. 选择框

c.按钮 button

7.框架 通过使用框架,可以在同一个浏览器窗口中显示不止一个页面 iframe

a.设置高度与宽度 使用width和height

b.移除边框

c.使用iframe显示目标链接页面

8.颜色 可使用颜色名或 十六进制颜色或者RGB颜色来表示,web安全色可确保能在所有计算机上正确显示所有的颜色

9.脚本 JavaAcript是HTML页面具有更强的动态和交互性

10.字符实体 HTML中的预留字符必须被替换为字符实体.

<li> a.不间断空格

<li> b.结合音标符

<li> c.字符实体

<li> Tips: 虽然HTML不区分大小写,但实体字符对大小写敏感

三.总结

1.HTMl速查列表

谨此记录,方便查阅.

参考学习于:菜鸟教程 ,

一.初识认识html标签

<li>内部样式表可在< head>部分通过< style>标签定义内部样式表

< link>定义资源引用地址

2.图像,HTML中图像使用 < img>来定义

3.表格< table>定义用< tr>来定义行 ,< td>来分割行并且输入内容 ,< th>来定义表头.< caption>来给表格价格标题< cellpadding>可以改变单元格边距, < cellspacing> 可以改变单元格间距.< colgroup>为表格设置背景色

7.框架通过使用框架,可以在同一个浏览器窗口中显示不止一个页面 iframe

a.设置高度与宽度使用width和height

8.颜色可使用颜色名或十六进制颜色或者RGB颜色来表示,web安全色可确保能在所有计算机上正确显示所有的颜色