html

习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，     有交互的一般都是用JavaScript来实现的。

一、html标签：

标签的语法：1. 标签由英文尖括号   "<" 和   ">" 括起来，如<html>就是一个标签。

　　　　　　2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

　　　　　　3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。

　　　　　　4. HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。

html注释的语法：<!--注释文字 -->

学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。

语义化的优点：1. 更容易被搜索引擎收录。2. 更容易让屏幕阅读器读出网页内容。

空标签有<br />、<hr />和<img />。

一个HTML文件有自己固定的结构

<html>　　　　　　　　　　//<html></html>称为根标签，所有的网页标签都在<html></html>中。
    <head>...</head>   //<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。
    <body>...</body>   //在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
</html>
　　<head>
  　　  <title>...</title>
  　　  <meta>
  　　  <link>
  　　  <style>...</style>
  　　  <script>...</script>
　　</head>
　　　　　<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。
 <body>
　　　　<hx>...</hx>   　　　　   　  //标题标签 x为1~6 重要性递减 h1为最高等级；标题标签字体都加粗，字号递减；
　　　　<p>...</p>   　　　　 　　  //段落标签
　　　　<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 
　　　　　　　　　　　　　　　　//src：标识图像的位置； //title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
　　　　　　　　　　　　　　　 //alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；图像可以是GIF，PNG，JPEG格式的图像文件;
　　　　<i> 　　　　　　　　　//标签显示斜体文本效果;与<em>的区别：<em>表示强调；
　　　　<em>...</em>                //表示强调；用斜体表示；
　　　　<strong>...</strong>        //表示更强烈的强调；用粗体表示；常用
　　　　<span>...</span>            //没有语义，它的作用就是为了设置单独的样式用的,不是强调；  span{字体样式}
　　　　<q>...<q>                   //简短文本的引用；要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。
                                  //用<q>标签的真正关键点不是它的默认样式双引号而是它的语义：引用别人的话。
　　　　<blockquote>...</blockquote> //长文本的引用；浏览器对<blockquote>标签的解析是缩进样式。
　　　　<br/>                       //换行；需要加回车换行的地方加入<br />；空标签(没有HTML内容的标签);html 中是忽略回车和空格的；段落最后一行不用换行
　　　　&nbsp；                     //空格
　　　　<hr/>                       //添加水平横线；默认样式线条比较粗，颜色为灰色；
　　　　<address>...</address>      //地址信息，签名或者文档的作者身份；默认斜体
　　　　<code>...</code>            //代码语言（不能是多行）；
　　　　<pre>...</pre>              //多行代码;保留预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
　　　　<ul>
          <li>...</li>
　　　　　　<li>...</li>
       </ul>       　　　　　　　　　 //无序的列表信息；显示时每项li前都自带一个圆点
　　　　<ol><li>...</li></ol>　　　　//有序的列表信息；默认为每项li前面都有序号且从1开始；
　　　　<div id="版块名称">...</div> //相当于一个容器把独立的逻辑部分放在里面；为网页划分独立的版块　　　　

　　　　　<dl>...</dl> 　　　　　　　　　　// 定义列表（definition list）。

　　　　 <table>…</table> //表格信息；table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

　　　　　<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> //title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。当前浏览器打开；

　　　　　<a href="目标网址" title="鼠标滑过显示的文本" target="_blank" >链接显示的文本/a> //在新标签内打开

　　　　　</body>

1.<table>
　　<tbody>
　　<table summary="表格简介文本">  //摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化).
　　<caption>...</caption>         //标题文本;标题的显示位置：表格上方。
　　　　<tr>           //表格的一行;有几对tr就有几行；row行
　　　　　　　<th>　　　//表格的头部的一个单元格，表格表头。一行中包含几个<th>...</th>就包含几列；粗体且居中；
　　　　</tr>
　　　　<tr>
　　　　　　　<td>　　　//表格的一个单元格；一行中包含几个<td>...</td>就包含几列
　　　　</tr>　　
　　</tbody>　　　
 </table>　　　　
<thead><tbody><tfooter>可以使table 可以按结构一块块的显示，不在等整个表格加载完后显示。
2.<dl>
　<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
例：
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
3.<a>标签可以链接e-mail地址
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
例:<a href="mailto:yy@qq.com?subject=邮件主题&body=邮件内容">链接显示的文本</a>


二、与浏览者的交互：

 网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

  •   表单

     　　 语法：<form method="传送方式" action="服务器文件">

　　　　　　1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

　　　　　　2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

　　　　　　3.method ： 如何发送表单数据（get/post）。表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。

     　　  POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。

　　//get是用来从服务器上获得数据，而post是用来向服务器上传递数据。get提交的时候，它的变量和值都会在地址栏里显示出来，它的安全性有一定的影响。从一个页面到另一个页面传参的时候，可以使用get方法，速度更快些。

  • 文本输入框：

　　　　语法：<form>
　　　　　　   <input type="text/password" name="名称" value="文本" />
　　　　　  　 </form>

　　　　　　1、type：

　　　　　　   当type="text"时，输入框为文本输入框;

　　　　　　　　 当type="password"时, 输入框为密码输入框。

　　　　　　2、name：为文本框命名，以备后台程序ASP 、PHP使用。

　　　　　　3、value：为文本输入框设置默认值。(一般起到提示作用)

  • 文本域支持多行文本输入：

　　　　语法：<textarea rows="行数" cols="列数">文本
　　　　　　　</textarea>
　　　       　1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

　　　　　　2、在<textarea></textarea>标签之间可以输入默认值。

  　　  　　   3、可用css样式的width和height来代替。col用width、row用height来代替。

  • html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。

　　　　语法：<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

　　　　　　 1、type:

   　　　　　　当 type="radio" 时，控件为单选框

　　 　　　　  当 type="checkbox" 时，控件为复选框

　　　　　　2、value：提交数据到服务器的值（后台程序PHP使用）

　　　　　　3、name：为控件命名，以备后台程序 ASP、PHP 使用

　　　　　　4、checked：当设置 checked="checked" 时，该选项被默认选中

　　　　　　　注意：同一组的单选按钮，name 取值一定要一致

  • 下拉列表框

　　　　　　单选语法：<select>
　　　　　　　　　　　<option value="向服务器提交的值" selected="selected" >选项(显示的值）</option>
　　　　　　　　 　　  </select>
　　　　　　　　　　　　// selected="selected"选项被默认选中

　　　　　　多选语法：<select multiple="multiple">

　　　　　　　　　　　//在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击

  • 按钮

　　　　　提交按钮语法：

　　　　　　          <input type="submit" value="提交" name="返回服务器的名称 "/>

　　　　　　　　　type：只有当type值设置为submit时，按钮才有提交作用
　　　　　　　　　value：按钮上显示的文字
　　　　　　　　   name可省略

　　　　　重置按钮语法：
　　　　　　　　<input type="reset" value="重置" name="返回服务器的名称 "/>
　　　　　　　　type：只有当type值设置为reset时，按钮才有重置作用
　　　　　　　　value：按钮上显示的文字

  • lable标签

　　　　语法：
　　　　　　<label for="控件id名称">显示的名称</lable>

 　　　　　　<input type="radio" name="gender" id="male" />
　　　　　　注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

  • 另

　　　　　　<label for="email">输入你的邮箱地址</label>

　　　　　　<input type="email" id="email" placeholder="Enter email">

　　　　　　效果：

　　　　　　　　　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Lune-Qiu/p/7275885.html