HTML学习笔记02
背景:
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
2.CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3.JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
内容:
标签的语法:
1. 标签由英文尖括号<和>括起来,如<html>就是一个标签。
2. html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。
3. 标签与标签之间是可以嵌套的,但先后顺序必须保持一致。
4. HTML标签不区分大小写。(默认小写)
html文件基本结构:
<html>
<head>...</head>
<body>...</body>
</html>
1. <html></html>称为根标签,所有的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签,头部标签在下一小节中会有详细介绍。
3. 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
head标签:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。
HTML的代码注释: <!--注释文字-->
添加段落: <p>段落文本</p>
添加标题: 标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
强调语气: <em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em>默认用斜体表示,<strong>用粗体表示。
添加空格:
<span>标签: <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
span{
color:blue;
} -->设置字体颜色为蓝色
<q>标签: <q>引用文本</q>
Ps:1、要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。
2、引用的为简短文本。
<blockquote>标签: <blockquote>引用文本</blockquote>
<br />标签: 相当于word文档中的回车。
ps:在 html中是忽略回车和空格( )的。
<hr />标签: 添加水平横线
<address>标签: <address>联系地址信息</address> 为网页加入地址信息
<code>标签: <code>代码语言</code> 插入一行代码
<pre>标签: <pre>语言代码段</pre>
ps:1、插入大段代码
2、预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
<div>标签: <div>…</div> 相当于一个容器。
给div命名,使逻辑更加清晰:<div id="版块名称">…</div>
添加信息列表:
ul-li:
ps:1、ul-li在网页中显示的默认样式为:每项li前都自带一个圆点
2、无前后顺序的信息列表
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
Ol-li:
ps:1、ol-li在网页中显示的默认样式为:每项<li>前都自带一个序号,序号默认从1开始
2、有前后顺序的信息列表
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
创建网页上的表格:
创建表格的四个元素: table、tbody、tr、th、td
1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。
3、<tr>…</tr>:表格的一行,所以有几对tr表格就有几行。
4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
5、<th>…</th>:表格的头部的一个单元格,表格表头。
6、表格中列的个数,取决于一行中数据单元格的个数。
总结:
1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
Ps:利用css添加边框
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
2、表头,也就是th标签中的文本默认为粗体并且居中显示
为表格添加标题和摘要:
<table summary=”摘要内容”>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
</table>
使用<a>实现超链接:
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
Ps:1、title属性的作用:鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)
2、<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开,如下
<a href="目标网址" target="_blank">click here!</a>
使用mailto在网页中链接Email地址:
<a href="mailto:[email protected][email protected]&[email protected]&subject=观了不起的盖茨比有感&body=你好,对此评论有些想法">发送</a>
Ps:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
使用<img>标签为网页插入图片:
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
讲解:
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。
使用表单标签,与用户交互:
<form method="传送方式" action="服务器文件">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
ps:
1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method : 数据传送的方式(get/post)。
文本输入框、密码输入框:
<form>
账号/密码:
<input type="text/password" name="名称" value="文本" />
</form>
Ps:
1、type:
当type="text"时,输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name:为文本框命名,以备后台程序ASP 、PHP使用。
3、value:为文本输入框设置默认值。(一般起到提示作用)
文本域,支持多行文本输入:
<textarea rows="行数" cols="列数">文本</textarea>
ps:
1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
2、cols :多行输入域的列数。
3、rows :多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。
5、这两个属性可用css样式的width和height来代替:col用width、row用height来代替。
使用单选框、复选框:
区别:单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
ps:
1、type:
当type="radio" 时,控件为单选框
当type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
5、同一组的单选按钮,name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。
使用下拉列表框:
<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>
ps;1、<option value="向服务器提交的值">显示的值</option>
2、设置selected="selected"属性,则该选项就被默认选中。
使用下拉列表框进行多选:
在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项. <select multiple="multiple">...</select>
使用提交按钮,提交数据:
<input type="submit" value="提交">
type:只有当type值设置为submit时,按钮才有提交作用
value:按钮上显示的文字
使用重置按钮,重置表单信息:
<input type="reset" value="重置">
type:只有当type值设置为reset时,按钮才有重置作用
value:按钮上显示的文字
form表单中的label标签: <label for="控件id名称">
ps:1、标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
2、label的作用就是获得焦点,把鼠标移动到文字上(男、女),同样可以**控件进行选择,输入。但是如果不加label的话,鼠标就必须移动到控件上面