<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我的网页</title>
</head>
<body>
<h1>Bakmun的第一个网页</h1>
</body>
</html>
由上可以看出,每个部分都由如下
<html>
</html>
成对出现
- HTML / CSS / JavaScript 的关系
HTML是网页内容的载体:包含 文字 图片 视频 等
CSS是表现样式:比如标题字体,颜色变化,插入背景图片,边框等
JavaScript是网页上的特效效果:网页上的动画与交互。
- 认识html标签
在如下的代码中
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我的网页</title>
</head>
<body>
<h1>勇气</h1>
<p>春秋时曹刿曰:“夫战,勇气也。”古希腊一哲学家说:“勇气减轻了命运的打击。”刘邓大国挺进大别山时喊:“狭路相逢勇者胜!”</p>
<p>我们欣赏勇气,因为它是智慧与力量的化身。斯巴达克能领导角斗士和奴隶起义靠的是勇气;司马迁劳动局凭的是勇气;成吉思汗征服天下用的是勇气勇气既是一
村无坚不摧的矛,又是一块无尖不挡的盾。有了勇气,就有力量去冲破一切艰难险阻;有了勇气,就可以无畏地同厄运去抗争;有了勇气,就能汇荡涤污垢的洪流奔腾
入海。
</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529744840598&di=8a8da8ac04a9e88322bc38871cfcf5
0b&imgtype=0&src=http%3A%2F%2Fuploads.oh100.com%2Fallimg%2F1706%2F21-1F622140F4.jpg">
</body>
</html>
“我的网页”是网站的标题, <title>我的网页</title> 就是网页标题标签
“勇气”是文字标题, <h1>勇气</h1> 就是文章标题标签
<p></p> 就是是段落标签,已知每个段落结束都会自动换行
图片由<img src="****.jpg">代码完成 内填图片url
效果如图
- 标签的语法
1.html中的标签一般都是成对出现,分开始标签和结束标签,如
<p> </p>
<title> </title>
2.标签直接可以嵌套,但前后顺序必须保持一致,如
<div><p>.......................................</p></div>
3.标签不区分大小写
- html文件基本结构
一个html文件是有自己固定的结构的。
<html>
<head>......</head>
<body>......</body>
</html>
代码注释语法: <!-- 注释文字 --> (本行有效)
---------------------------------------------------------------------------------------------
- 标签
<html></html>是根标签,所有的网页标签都在<html></html>之间
---------------------------------------------------------------------------------------------
<head>标签用于定义文档头部,它是所有头部元素的容器。
头部元素有<title> <script> <style> <link> <meta>等头部标签:
<title>...</title>标签的内容会在浏览器的标题栏显示出来
---------------------------------------------------------------------------------------------
<body></body>标签之间是网页的主要内容
如<h1> <p> <a> <img>等网页内容标签:
标题标签: <h*>......</h*>
一共有 6 个:h1 h2 h3 h4 h5 h6 ,分别为一级标题到六级标题,依据重要程度递减。<h1>是最高的等级
语法:<h*>标题文本</h*> (*为1-6)
因为 h1 标签在网页中比较重要,所以一般h1标签被用在网站名称上。
h1-h6 的显示样式如下:
强调标签:<em> </em> 及 <strong> </strong>
语法:
<em>需要强调的文本</em> (斜体)
<strong>需要强调的文本</strong> (加粗)
为文字设置单独样式 :<span>
语法:<span>文本</span>
span元素使用前需要在<head>标签中定义,如
<head>
<style>
span{
color:blue;
}
</style>
</head>
引用标签:<q> <blockquote>
语法:
<q>引用文本</q> 引用简短文本 (添加双引号)
<blockquote>引用文本</blockquote> 引用长文本 (缩进)
在Html中直接输入空格、回车都是无效的,若想使文本实现,则需要相应的标签
换行标签:<br /> 空格标签: (注意输入分号)
语法:在需要修改的语句后输入相应的标签
添加水平横线标签:<hr />
语法:在段落标签后加上<hr />
若想控制线的颜色和粗细,可用<hr size="**px" color="**" />
地址标签:<address>联系地址信息</address> (斜体显示) 块状元素,独占一行
加入代码标签:<code> <pre>
语法:
<code>代码语言</code> 单行代码
<pre>代码语言</pre> 多行代码,保留空格及换行
<pre>标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它。
无顺序信息列表标签:<ul>
语法:
<ul>
<li>信息01</li>
<li>信息02</li>
<li>信息03</li>
.....
</ul>
效果如图
有顺序信息列表标签:<ol>
语法:
<ol>
<li>文本01</li>
<li>文本02</li>
<li>文本03</li>
....
</ol>
效果如图
<div>标签:给网页划分独立板块
语法:
<div>
<h2>无顺序信息列表</h2>
<ul>
<li>信息01</li>
<li>信息02</li>
<li>信息03</li>
</ul>
</div>
<div>
<h2>有顺序信息列表</h2>h2>
<ol>
<li>文本01</li>
<li>文本02</li>
<li>文本03</li>
....
</ol>
</div>
div元素可以被命名,逻辑更加清晰 语法:<div id= "板块名称"> </div>
table标签,创建表格
五个必要元素:table tbody tr th ed
<table> </table>:表格以<table>开始,以</table>结束
<tbody> </tbody>:使表格分为结构,并在加载时一块块显示,不用等整个表格加载完后显示
<tr> </tr>:表格的一行。有几对<tr>就分几行
<td> </td>:表格的一个单元格,一行中包含几对<td>,表示一行中有几列
<th> </th>:表格表头的一个单元格(默认粗体居中)
语法:
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
表格列的个数取决于该行单元格的个数
标题及摘要标签
<table summary="表格简介摘要"> 摘要 不在浏览器中显示,使搜索引擎能读懂表格
<caption>标题文本</caption> 标题 显示在表格上方
<a>标签,链接到另一个页面
语法:<a href="目标网址" title="鼠标滑过显示的文本"> 链接显示的文本</a>
例如
<a href="http://www.baidu.com" title="点击进入百度"> 百度一下</a>
显示效果如图
注意目标地址前要加上 https://
title可省略
在新建窗口打开链接
<a href = "目标网址" target="_blank">链接显示的文本</a>
使用mailto在网页中链接Email地址
语法:
<a href= "mailto:收件人邮箱 ? cc=抄送地址 & 密件抄送地址 & subject=主题 & body=邮件内容"> 发送邮件</a>
例如:
<a href= "mailto:yy@qq.com;someone@qq.com ? cc=shuaigeg@qq.com & bcc=xiaohong@qq.com & subject=主题 & body=邮件内容">发送邮件</a>
需要注意的是:
如果mailto后有多个参数的话,第一个参数必须以 ? 开头,后面的参数都以 & 分割
如果有多个收件人,以 ; 分隔
<img>标签,为网页插入图片
语法
<img src="图片地址" alt="下载失败时的替换文本" title="提示文本">
如
<img src= "myimage.gif" alt = " My Image" title = "My Image">
图片可以是 GIF ,PNG , JPEG 格式的图像文件
与用户交互
语法:
<form method="传送方式" action="服务器文件">
</from>
<form> 标签成对出现,以</form>结束
action:浏览者输入的数据被传送到的地方,比如一个PHP网页(save.php)
method:数据传送的方式(get/post)
如
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass">
</form>
所有表单控件(文本框,文本域,按钮,单选框,复选框等)都
必须放在<form></form>标签之间
优先用 post 方式
文本输入框、密码输入框
语法:
<form action="save.php" method="post">
<input type="text/password" name="名称" value="文本提示" />
</form>
type="text"时,输入框为 文本输出框
type="password"时,输入框为 密码输入框
name:为文本框命名,以备后台程序使用
value:为文本输入框设置默认值,起到提示作用
文本域:多行文本输入
语法:
<textarea rows="行数" cols="列数">文本域默认值</textarea>
单选框与复选框
语法:
<form action="save.php" method="post">
<input type="radio/checkbox" value="值" name="命名" checked="checked" />
<form/>
type="radio" 单选框type="checkbox" 复选框
value:提交数据到服务器的值(后台程序PHP使用)
name:为控件命名,以备后台程序ASP/PHP使用
checked:当设置checked="checked"时,该选项默认选中
同一组的单选按钮,name取值一定要一致,才能起到单选的作用
下拉列表框
语法:
<option value="向服务器提交值">显示的选项</option>
如
<form action="save.php" method="post">
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游 selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
当selected="selected"时,该选项默认选中
下拉列表框多选
语法:
<select multiple="multiple">
.....
<select>
按住ctrl同时单击选项
提交按钮,提交数据
语法:
<input type="submit" value="提交">
提交后,进入action设置网址
重置按钮,重置表单信息
语法:
<input type="reset" value="重置">
重置form内的信息
label标签
语法:
<label for="控件id名称"> 控件名称 </label>
与<input type="***" id= "控件id名称">对应,id属性值一定要相同
如
<form action="save.php" method="post">
<label for="email">输入你的邮箱地址</label>
<input type="text" id="email" name="email">
<form>