前端开发学习笔记-----HTML
{% meting "2111364820" "tencent" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:200px" "preload:auto" "autoplay" %}
菜鸟教程: HTML CSS
视频: php js
HTML
一.初识 认识html标签
Tips:标签推荐小写!
1.标签(一般成对出现)
如: < img src="/images/logo.png" width="258" height="39" /> 图像的名称和尺寸是一属性的形式提供
切记:不要忘记结束标签!!!!!!
没有内容的HTML元素被称为空元素.
空元素在开始标签中关闭.如 < br >这样的元素就是没有关闭标签的空元素 在开始菜单中加上撇斜杠也就是 / 可以关闭空元素 如< br />
2.HTML属性
HTML的元素可以设置属性,属性可以在元素中添加附加信息.属性存在开始标签中,属性应该始终包括在引号内.
如:< a href="http://blog.fangmingxuan.com">This is my blog>
HTML属性参考:
二.标签详细说明
1.标题 < h1>至< h6>
< hr >元素在HTML页面中创建水平线.
实现效果:
< !-- 注释内容 -->
总结:
2.段落< p>
切记:浏览器并不是完全按照段落内输入的内容进行输出
3.文本格式化
< b> 定义粗体文本
< em> 定义着重文字
< i> 定义斜体字
< small> 定义小号字
< strong> 定义加重语气
< sub> 定义下标字
< sup> 定义上标字
< ins> 定义插入字
< del> 定义删除字
HTML "计算机输出" 标签
< code> 定义计算机代码
< kbd> 定义键盘码
< samp> 定义计算机代码样本
< var> 定义变量
< pre> 定义预格式文本
< abbr> 定义缩写
< address> 定义地址
< bdo> 定义文字方向
< blockquote> 定义长的引用
< q> 定义短的引用语
< cite> 定义引用、引证
< dfn> 定义一个定义项目。
实现过程:
<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属性来描述链接的地址
**
先用< a id="需要标记的部分"> 标记部分< /a>
然后用< a href="#需要标记的部分">访问 标记部分< /a>
如果不在同一个页面需要加上页面地址
5.头部< head>
 
**
**
为搜索引擎定义关键词:
<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中:
如:内联样式
<p style="color:blue;margin-left:20px;">看内联样式效果</p>
效果:
background-color可以定义一个元素的背景颜色,颜色可用英文代码或者16进制代码表示.
如:将body背景色改成淡青色,主标题的背景色改成蓝色
效果:
如:
<p style="font-family:arial;color:red;font-size:20px;">段落</p>
<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>
**< link>**定义资源引用地址
2.图像,HTML中 图像使用 **< img>**来定义
3.表格**< table>定义用< tr>来定义行 ,< td>来分割行并且输入内容 ,< th>来定义表头.< caption>来给表格价格标题< cellpadding>可以改变单元格边距, < cellspacing> 可以改变单元格间距.< colgroup>**为表格设置背景色
<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>
4.列表
有序列表使用**< ol>**标签,此列项目使用数字进行比奥及
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
无序列表使用**< ul>**标签,此列项目使用粗体圆点标记.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
自定义列表不仅仅是一列项目,而是项目机器注释的组合
自定i列表一**< dl>标签开始.每个自定义列表项以< dt>开始.每个自定义列表项的定义以< dd>**开始.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
5.区块-布局
实例: < h1>, < p>, < ul>, < table>
实例: < b>, < td>, < a>, < img>
**
**
**
6.表单:用于收集不同类型的用户输入
a. 输入元素 < input>
<form>
姓名: <input type="text" name="姓名">
</form>
<form>
密码: <input type="password" name="pwd">
</form>
b. 选择框
<form>
性别:
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</form>
有喜欢的东西吗?
<input type="checkbox" name="fav"> 乐高 <br>
<input type="checkbox" name="fav"> 电脑 <br>
<input type="checkbox" name="fav"> 手办
<form action="">
<select name="food">
<option>noodle</option>
<option>rice</option>
<option>soup</option>
</select>
</form>
c.按钮 button
<input type="button" value="此处自定义按钮名称">
<input type="submit" value="提交">
有喜欢的东西吗? <br>
<input type="checkbox" name="fav"> 乐高 <br>
<input type="checkbox" name="fav"> 电脑 <br>
<input type="checkbox" name="fav"> 手办 <br>
<input type="submit" value="提交"><br>
7.框架 通过使用框架,可以在同一个浏览器窗口中显示不止一个页面 iframe
<iframe src="URL"></iframe>
a.设置高度与宽度 使用width和height
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
b.移除边框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
c.使用iframe显示目标链接页面
<iframe src="http://blog.fangmingxuan.com" name="blog" width="1600" height="900"></iframe>
<p><a href="http://blog.fangmingxuan.com" target="blog"></a></p>
8.颜色 可使用颜色名或 十六进制颜色或者RGB颜色来表示,web安全色可确保能在所有计算机上正确显示所有的颜色
9.脚本 JavaAcript是HTML页面具有更强的动态和交互性
**< script>**标签用于定义客户端脚本,比如Javascript. **< script>**元素既可包含脚本语句,也可通过 src属性 只想外部脚本文件
<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容(文本)来替代。</p>
<li> 当浏览器**不支持Javascrip**t时会用 **noscript** 标签的内容来替换,提醒.
10.字符实体 HTML中的预留字符必须被替换为字符实体.
一些在键盘上找不到的字符也可以使用字符实体来替换.
浏览器总是会截短HTML页面中的空格.在页面显示前,浏览器只会留下一个空格,删除多余的其他空格.如果需要连续使用多个空格 必须使用 & nbsp; 字符实体.
就是可以在字母上面加上变音符号 à á â ã 分别是 & #768; & #769; & #770; & #771;
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
¢ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
三.总结
1.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)
< 等同于 <
> 等同于 >
© 等同于
谨此记录,方便查阅.
参考学习于:菜鸟教程 ,
Q.E.D.