前端开发基础学习笔记html标签

标签：<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.文本域：

<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>

------------后续会补充