HTML的语法

一. html标签

 1.1 html标题

       html标题（heading）是通过<h1>-<h6>等标签来定义的

   1    <h1>This is a heading</h1>
   2    <h2>This is a heading</h2>
   3    <h3>This is a heading</h3>

1.2 html段落

    html段落（paragraph）是通过<p></p>标签来定义的

    1    <p>This is a paragraph.</p>
    2    <p>This is another paragraph.</p>

1.3 html链接

    html链接是通过<a>标签来定义的

  1  <a href="www.csdn.net/MachineKitty" title="MachineKitty的csdn博客" target="_blank"></a>

    其中a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。href是英语hypertext reference超文本地址的缩写，title 鼠标的悬停文本，target 是否在新窗口中打开，target是“目标”的意思，blank就是“空白”的意思，就表示新建一个空白窗口。

1.4 html图像

    html 图像是通过 <img/> 标签进行定

1    <img src="welcome.jpg" width="104" height="142" alt="欢迎"/

    img是英语image“图片”的简写

    src 是英语source“资源”的简写，千万不要写成scr。

    src是img标签的属性，welcome.jpg是这个属性的值。

    alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替

二. html列表

    2.1 无序列表

    无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。

        ul就是英语unordered list，“无序列表”的意思。

    li 就是英语list item ， “列表项”的意思

1    <ul>
2	<li>北京</li>
3	<li>上海</li>
4	<li>广州</li>
6    </ul>

    会发现这是一个“组标签”就是要么不写，要么就要写一组。

    也就是说，所以li不能单独存在，必须包裹在ul里面；反之，ul的“儿子”不能是别的东西，只能有li。

    浏览器会默认的给无序列表小圆点的“先导符号”，但需要强调的是，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放

    2.2 有序列表

        ordered list  有序列表，用ol表示

1    <ol>
2         <li>北京</li>
3         <li>上海</li>
4        <li>广州</li>
5    </ol>

    浏览器会自动增加阿拉伯序号：也就是说，ol和ul就是语义不一样，怎么使用都是一样的。

    ol里面只能有li，li必须被ol包裹。li是容器级。

    2.3 定义列表

     定义列表也是一个组标签，不过比较复杂，出现了三个标签：

    dl表示definition list 定义列表

    dt表示definition title    定义标题

    dd表示definition description 定义表述词儿

    dt、dd只能在dl里面；dl里面只能有dt、dd

1    <dl>
2        <dt>北京</dt>
3            <dd>国家首都，政治文化中心</dd>
4        <dt>上海</dt>
5            <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
6        <dt>广州</dt>
7            <dd>中国南大门，有珠江、小蛮腰</dd>
8    </dl>

    表达的语义是两层：

        1) 是一个列表，列出了北京、上海、广州三个项目

        2）每一个词儿都有自己的描述项。dd是描述dt的。

三. div和span

    div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。

1    <div>
2	<h3>中国主要城市</h3>
3	    <ul>
4		<li>北京</li>
5		<li>上海</li>
6		<li>广州</li>
7            </ul>
8    </div>

    div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。

    div标签是一个容器级标签，里面什么都能放，甚至可以放div自己

    span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。

    就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

    span里面是放置小元素的，div里面放置大东西的：

1    <p>
2	简介
3        <span>
4	    <a href="">详细信息</a>
5	    <a href="">购买</a>
6        </span>
7    </p>

    div标签是最最重要的布局标签

1    <div class="header">
2	<div class="logo"></div>
3	<div class="nav"></div>
4    </div>
5    <div class="content">
6        <div class="guanggao"></div>
7        <div class="dongxi"></div>
8    </div>
9    <div class="footer"></div>

    所以，我们称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。

四. html表单

    表单就是收集用户信息的，就是让用户填写的、选择的。

 1    <div>
 2	<h3>欢迎注册本网站</h3>
 3	<form>
 4	    所有的表单内容，都要写在form标签里面
 5	</form>
 6    </div>

    form是英语表单的意思。form标签里面有action属性和method属性，action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

    4.1 文本框

  1  <input type="text" />

     input表示“输入”，指的是这是一个“输入小部件”，

    type表示“类型”，

    text表示“文本”，指的是类型是一个文本框的输入小部件。

    这是一个自封闭标签，我们所认识的自封闭标签有：

1	<meta name=”Keywords” content=””/>
2	<img src=”” alt=”” />
3	<input type=”text” />

     value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：

1	<input type="text" value="默认有的值" />

    4.2 密码框

1	<input type="password" />

    也就是说，input标签很神奇，又是文本框，又是密码框。

    到底是啥？看type属性的值是什么，来决定。

    如果type=”text”  文本框

    如果type=”password” 密码框

     4.3 单选框

     只能选一个，术语叫做“互斥”。

1    <form>
2        <input type="radio" name="sex" value="male" /> Male
3        <input type="radio" name="sex" value="female" /> Female
4    </form>

    radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。

    非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。

    单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。

  1  <input type="radio" name="sex" value="male" /> Male
  2  <input type="radio" name="sex" value="female" /> Female

     4.4 复选框

  1  <form>
  2      <input type="checkbox" name="bike" />
  3      I have a bike
  4      <input type="checkbox" name="car" />
  5      I have a car
  6  </form>

    复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

     4.5 下拉列表

    select就是“选择”，option“选项”。

    select标签和ul、ol、dl一样，都是组标签。

1	<select>
2		<option>北京</option>
3		<option>河北</option>
4		<option>河南</option>
5		<option>山东</option>
6		<option>山西</option>
7		<option>湖北</option>
8		<option>安徽</option>
9	</select>

     4.6 多行文本框

    text就是“文本”，area就是“区域”。

1	<textarea cols="30" rows="10"></textarea>

    这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字

    cols属性表示columns“列”，rows属性表示rows“行”。值就是一个数，表示多少行，多少列。

     4.7 三种按钮

       普通按钮：

1	<input type="button" value="我是一个普通按钮" />

        button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。

       提交按钮：

1	        <input type="submit" />

        submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。

        这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。

       重置按钮：

1	        <input type="reset" />

        reset就是“复位”的意思。

五. html其他

     5.1 html注释

    任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的。

    HTML注释的语法

    1	    <!--注释的内容-->

     5.2 字符的实体

    我们想在页面上输出“<h1>”这些字符，但是HTML认为这是一个标签，还没封闭所以

    &lt就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。

    lt 就是英语less than 小于的意思；

    &gt就是>的字符实体。

    gt就是greater than 大于的意思。

    &copy;就是©  版权符号。

   &nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。所以哈&nbsp;&nbsp;&nbsp;&nbsp;哈是这样显示的

 1	        <span>哈    哈</span>

空出了4个字的格，可以防止空白折叠现象。

     5.3 html废弃的标签

    HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。

    以下样式的标签，都已经被废弃。

     2004年之前的东西了：

 1   <font size="9" color="red">哈哈</font>

    这些标签都是css钩子，而不是原意：  这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。

 1   <b>加粗</b>
 2   <u>下划线</u>
 3   <i>倾斜</i>
 4   <del>删除线</del>
 5   <em>强调</em>
 6   <strong>强调</strong>

    水平线：

 1    <hr /

        换行：

 1    <br /

    不另起一个段落，进行换行。网页中需要换行的时候，是因为另起了一个段落，所以要用p，不要用<br />

1    <p>
2         哈<br />哈哈
3    </p>

      br是英语break打断的意思。