前端开发基础学习笔记html标签
2017-02-16 10:56
776 查看
标签:<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
1.
<em>和
<strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。
2.
<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
3.联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。
<address>联系地址信息</address>
4.,当代码为一行代码时,你就可以使用<code>标签了,如下面例子:
<code>var i=i+300;</code>
注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。
语法:
<code>代码语言</code>
注:如果是多行代码,可以使用<pre>标签。
5
<pre>语言代码段</pre>
<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
如下代码:
<pre> var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); } </pre>
6.
<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。
<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好,对此评论有些想法">对此影评有何感想,发送邮件给我</a>
7.
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
在新建浏览器窗口中打开链接
<a href="目标网址" target="_blank">click here!</a>
8.<img>标签,为网页插入图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。
9.
语法:
<form method="传送方式" action="服务器文件">
讲解:
1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.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> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。
10.
<input type="text" name="myName" /><input type="password" name="pass" /><input type="submit" value="确定" name="submit" /> <input type="reset" value="重置" name="reset" />
11.文本域:
[code]<textarea
rows="
行数"
cols="
列数"
>
文本</textarea>
12。
单选框、复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用。同一组的单选按钮,name 取值一定要一致
4、checked:当设置 checked="checked" 时,该选项被默认选中。
13.下拉列表 multiple="multiple"没有这句code为单选下拉列表,有这句则为多选,进行多选时按下
Ctrl键同时进行
单击(在 Mac下使用
Command +单击)
<form action="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option> //默认选中
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
14.
form表单中的label标签
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。语法:
<label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <label for="email">输入你的邮箱地址</label> <input type="email" id="email" placeholder="Enter email"> </form>
------------后续会补充
相关文章推荐
- 前端开发学习笔记02----HTML基础
- 〖前端开发〗HTML/CSS基础知识学习笔记
- HTML&CSS基础学习笔记6-文本操作标签
- 前端开发学习笔记(三)HeadFirst HTML 与 CSS (第二版)
- HTML&CSS基础学习笔记1.24-input标签的单选与多选
- ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法
- ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法
- HTML+CSS基础课程学习笔记-第二章 HTML标签
- HTML&CSS基础学习笔记1.20-语义化标签
- HTML&CSS基础学习笔记1.19-DIV标签2
- 前端开发学习笔记05---HTML高级教程
- HTML&CSS基础学习笔记1.20-DIV标签2
- 前端学习之HTML基础标签(1)
- HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素
- HTML网页开发学习笔记(燕十八)-40 a标签伪类
- HTML&CSS基础学习笔记1-简单网页中有哪些标签?
- 从零学习前端开发之 ― HTML5基础和HTML语义化(2) 小月博客
- iOS开发基础学习笔记——标签栏(UITabBar)
- ASP.Net MVC开发基础学习笔记(2):HtmlHelper与扩展方法
- HTML&CSS基础学习笔记5-添加常用的标签