HTML基础知识部分
引语:
大家一定要动手敲敲程序,代码不能我写的是什么,你一看,会了,过~下一个知识点。这样子是不可以的哦。你在自己的环境上运行以下,反思以下为什么是这个结果 。自己设计代码来验证这个知识点。最后的小作业,看过这些知识点的小伙伴,哪怕零基础,在学习过程中各个知识点都练习到了,自然水到渠成!
运行环境 :记事本 (刚开始用记事本就可以,没必要过度依赖那些软件)
HBuilderX(知识点练习的差不多了,可以使用软件,完善优化界面).
<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
<!DOCTYPE HTML>
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
meta 百度查找时的关键字
meta name ="keywords" content=""
<meta charset="utf-8">
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<p>两只老虎,两只老虎跑得快</p>
<p>一只没有耳朵,一只没有眼睛真奇怪,真奇怪</p>
换行标签
小螺号
嘀嘀嘀吹
<br />
海鸥听了展翅飞
水平线标签
<hr />
字体样式标签
<strong>字体样式:粗体</strong>
<em>字体样式:斜体</em>
注释和特殊符号
<!--注释-->
空 格
空 格
<;小于号
> 大于号
© 版权符
图像标签
常见图片格式
JPG 、GIF 、PNG 、BMP
<img src ="path" alt="text" title="text" width="x" height="y" />
src---图片地址
alt---图片的替代文字 ,加载不出来时,文字替代
title---鼠标悬停提示文字
<img src="D:\\素材\\art.jpg" alt="beautiful girl" title="beautiful girl"width="400px" height="800px" />
链接标签
<a href ="path" target="目标窗口位置" >链接文本或图像</a>
href---链接路径
target---链接在哪个窗口打开 常用值 _self (当前页面)、_blank(新页面)
文本超链接
图像超链接
锚链接(可以实现页面间跳转)
使用name作为标记
<a name ="top">顶部</a>
<a href ="#top" >回到顶部</a>
功能性链接
邮件链接:mailto:
<a href ="mailto:449081515@qq.com">点击联系我</a>
qq链接:(进入qq推广官网)
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="领取资料" title="领取资料"/></a>
行内元素和块元素
块元素
无论内容多少,该元素独占一行
(p 、h1-h6..)
行内元素
内容撑开宽度,左右都是行内元素的可以排在一行
(a、strong 、em...)
媒体元素
src 资源路径
controls 控制条
autoplay 自动播放
音频和视频
<video src="path" controls autoplay></video>
<audio src="path" controls autoplay></audio>
列表
无序列表(...)
<ul>
<li>java</li>
<li>C++</li>
<li>python</li>
</ul>
应用范围:导航、侧边栏...
有序列表(1,2,3)
<ol>
<li>java</li>
<li>C++</li>
<li>python</li>
</ol>
自定义列表
dl:标签
dt:列表名称
dd:列表内容
<dl>
<dt>中国</dt>
<dd>辽宁</dd>
<dd>北京</dd>
</dl>
应用范围:公司网站底部
表格table
行:tr
列:td
边框: border
合并单元格:跨行、列:rowspan(向下) 、colspan(向右)
属性:
align --- 位置
border --- 宽度
<table border="1px" >
<tr>
<td colspan="2"> 1</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
表单form
action : 表单中的数据提交的位置
method :表单提交的方式
<form aciton="path" method="get/post">
文本框
<input type="text" />
单选按钮
<input type="radio" />
复选框
<input type="checkbox" />
下拉列表
<select name="" style="width:auto" size="1">
<opiton value="">值</option>
</select>
</form>
iframe内联框架
<iframe src="path" iframeborder="0">
</iframe>
课后作业:小伙伴完成作业的可以给我点个赞,评个论,收个藏,证明
就是用HTML代码,在浏览器上实现出和图片一样的内容。大家加油!!!一定要勤于动手,不能眼睛一看就会,一做就废~~~
作业1:
作业2:
作业3