学习笔记之HTML5入门教程

最新推荐文章于 2024-07-16 11:45:00 发布

Neptune丶

最新推荐文章于 2024-07-16 11:45:00 发布

阅读量289

点赞数

分类专栏：学习笔记文章标签： html5 html

本文链接：https://blog.csdn.net/qq_32445769/article/details/54600070

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5入门教程授课老师:翁恺

课程地址：http://study.163.com/course/courseMain.htm?courseId=171001
笔记日期：2017.1.17
作者：Neptune

1.第一课 html介绍

HTML(HyperText Makeup Language)
HTML由各浏览器公司共同维护
Firefox开源
最新标准为HTML5

2.第二,三课学习软件以及html文件框架

软件：1.文本编辑器（Windows：PSPad等） 2.一个浏览器 
.htm与.html没有区别，.htm存在于早期OS中，早期OS不支持大于3的后缀

国标码 <meta charset=utf-8> Unicode
<!DOCTYPE html>说明此html为html5

3.第四课段落

<br>
<p></p>
<h1>......<h6> </h1>......</h6>
<wbr></wbr>：告诉浏览器可以将此单词分开   英文的换行会比中文麻烦，中文是方块型，而英文单词长度大小不一，会出现参差不齐的情况。
<hgroup></hgroup> 决定正文有一个什么样的树状结构

4.第五课字体样式

<b></b>加粗 并不是很粗，原因是中文字体本身没有加粗的属性
<i></i>斜体
<tt></tt>等宽西文字体
<small></small>变小字体
HTML5中都可以用CSS来实现样式
<del></del>删除线 删除
<ins></ins>下划线 增加
<s></s>删除线 “过时的”
不能因为其显示什么形式而乱用标记，每个标记都是有意义的
<sup></sup>上标
<sub></sub>下标  例：a^2 + b0
但html不能表示复杂公式，对于复杂公式用图片jpg
<mark></mark>高亮显示

5.第六课短句样式

<em>emphasis强调</em>
<strong>strong着重</strong>
<def>definition定义 </def>
<code>code代码</code>   区分代码与正文
<samp>sample例子代码</samp>
<kbd>keyboard用户输入-键盘</kbd>
<var>variable变量</var>
<cite>cite引用</cite>

6.第七课特殊格式

<address></address>地址
<blockquote>大缩进
<q></q> quote引用“xxxx”
<pre></pre>  原原本本按程序员键入格式显示

7.第八课属性

<hr>华丽的分割线
<hr width=50%>相对于窗口的一半
<hr width=50>宽度50像素点
<hr width=50% align=left>.....向左对齐
<hr width=50% size=10>10个像素点宽的线
这些东西都用css做！

<abbr title="中华人民共和国">PRC</abbr>
<p title="中华人民共和国">PRC</p>
<h1 title="中华人民共和国">PRC</h1>
title：相当于提示

<bdo dir=rtl>xxxxxxx</bdo> dir:direction rtl:right to left  从右向左排！
<bdi></bdo>摆脱反排
显示"a<2"时有些浏览器会误解为<>标签号
解决：&lt; :less than    &gt; :>
若要表达&时用&amp;
&nbsp; ：none breakable space 不可打断的空格
要加;号
吕字拼音 ：L&uuml;小写u   L&Uuml;大写u

8.第九课列表

<ul>
    <li>xx</li>
    <li>xx</li>
    <li>xx</li>
</ul>
无序列表
ul:un ordered list
li:list item

<ol>
    <li>xx</li>
    <li>xx</li>
    <li>xx</li>
</ol>
有序列表：把圆圈换位数字   <ol start=0>....

<dl>
    <dt>xx</dt>
    <dd>xxxxxxx</dd>
</dl>
dl：defination list 解释列表

9.第十课图片

<img src="xxx.jpg"/>
从字符角度理解图片，与前后字符可以连起来
<img src="xxx.jpg" width="200" height="200"/>
<img src="xxx.jpg"alt="xxxxxxx"/>   alt:图片显示不出来时预先显示的字符
一般要指定width和height，主要目的是为了网页预留图片的空间位置
<img src=...>中的地址也可以是其他网站图片的url
src中可用png gif jpg三种通用

<iframe src="xxxxx" height="400"></iframe> 当前页面显示一个实时窗口

10.第十一课链接

最重要的东西
<a href="http://......">xxx</a>
href: Hypertext Reference超文本引用
链接要不要加下划线，显示什么颜色字体等这些是css决定的，如果没有css，那么由浏览器决定
如果url中没有http或ftp等协议名，浏览器默认为当前html所在目录另外有一个文件或目录

<a href="#here">在当前页面里面的链接
需设置<p id="here">
<a href="you.html#here">you.html中的here处

<a> 标签的 target 属性规定在何处打开链接文档
<a href="you.html#here" target=_blank>浏览器总在一个新打开、未命名的窗口中载入目标文档

<a href="/example/map">
<img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
    <area coords="0,0,49,49" href="link1.html">
    <area coords="50,0,99,49" href="link2.html">
    <area coords="0,50,49,99" href="link3.html">
    <area coords="50,50,99,99" href="link4.html">
</map>
usemap 属性将图像定义为客户端图像映射。图像映射指的是带有可点击区域的图像。
usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img> 与 <map> 之间的关系。
多用于地图中

11.第十二课表格

比较复杂
<table border="1">
    <caption>表格</caption>
    <tr>
        <th>xxxx</th>
        <th>xxxx</th>
        <th>xxxx</th>
    </tr>
    <tr>
        <td>第一个格子</td>
        <td>第二个格子</td>
        <td>第三个格子</td>
    </tr>
</table>
tr: table row 表格行
border="1"表示有格子线，缺省为没有格子线，即border="0"
th: table head 表头 加粗显示
caption:整个表格的表头

其实整个表格也是个字符！
自动调节宽高

<td colspan="3">  合并单元格，跨度为3
更多效果用css
<thead></thead> html5功能，当表格过长且当用户翻卷表格时，表头会一直保留在最上方
对应的应有:
<tbody></tbody>表体  
<tfoot></tfoot>表注
这些都是表格比较大时有的结构

Neptune丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记之HTML5入门教程

HTML5入门教程授课老师:翁恺课程地址：http://study.163.com/course/courseMain.htm?courseId=171001 笔记日期：2017.1.17 作者：Neptune
复制链接

扫一扫