<1>入门程序

<2>标签

2.1标题标签

语法

<h> 标题名 </h>

h1,h2......这里的数字表示大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

</body>
</html>

2.2段落标签

语法格式

<p> 文本内容 </p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>Hello world!</p>

</body>
</html>

结果

Hello world！

2.3换行标签

语法格式

<br/>

换行标签比较特殊，它不像其他的标签有开始有结束，它就只有一个，这种我们称为自闭合标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>Hello <br/>world!</p>

</body>
</html>

结果：

Hello

world！

2.4列表标签

语法格式：

无序列表：

<ul>

<li>        列表内容        </li>

<li>        列表内容        </li>

<li>        列表内容        </li>

</ul>

有序列表：

<ol>

<li>        列表内容        </li>

<li>        列表内容        </li>

<li>        列表内容        </li>

</ol>

自定义列表：

<dl>
<dt>         列表内容        </dt>
<dd>        列表内容        </dd>
<dt>         列表内容        </dt>
<dd>        列表内容        </dd>
</dl>

接下来我们将详细讲解列表标签；

无（有）序列表样式设计：

<!DOCTYPE html>
<html>
<body>

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">//这里的start效果是列表从50开始计数
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 
</body>
</html>

语法格式
list-style-type: 类型;

因为对于列表来说，前面的点比较难看，所以经常会把点给消去。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul{list-style-type:none;}
    </style>
</head>
<body>
    <h3>无序列表</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<html>

<body>

<h2>一个定义列表：</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>
</html>

2.5超链接标签

超链接使用a标签，语法如下

<a href="跳转的链接地址" target="目标窗口的打开方式">

掌握前两个就好，其他的用不上。

用图片作为链接

2.6图片标签

语法格式：

<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">

2.7块标签

语法格式：

<div> </div>

这里只是给出简略的标签是因为，这个部分其实是方便CSS进行对页面的装饰的，所以CSS那里会详细讲到

2.8HTML实体

在HTML文件中，<、>等等这样的符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果我们想使用符号本身怎么办呢？那就是使用HTML实体来转义。

<3>路径

路径知识较为简单，这里不再描述。如果有实在不懂的，可以点击链接了解一下

绝对路径和相对路径

<4>表格

语法格式：

<table>

    <tr>

        <td>单元格1</td>

        <td>单元格2</td>

    </tr>

    <tr>

        <td>单元格1</td>

        <td>单元格2</td>

    </tr>

</table>

4.1横向合并单元格(列合并)

语法格式：

<td colspan="跨度的列数">

<tr>
    <td>宇智波佐助</td>
    <td>雷&火</td>
    <td colspan="2">下忍</td>
</tr>

4.2纵向合并单元格(行合并)

语法格式：

<td rowspan="跨度的行数">

<tr>
    <td>宇智波佐助</td>
    <td rowspan="2">雷&火</td>
    <td colspan="2">下忍</td>
</tr>
<tr>
    <td>我爱罗</td>
    <td>影</td>
    <td>砂隐村</td>
</tr>

4.3完整表格格式

<table>

    <caption>表格标题</caption>

    <!--表头-->

    <thead>

        <tr>

            <th>表头单元格1</th>

    <th>表头单元格2</th>

        </tr>

    </thead>

    <!--表身-->

    <tbody>
<tr>

            <td>标准单元格1</td>

            <td>标准单元格2</td>

        </tr>

        <tr>

            <td>标准单元格1</td>

            <td>标准单元格2</td>

        </tr>

    </tbody>

    <!--表脚-->

    <tfoot>

        <tr>

            <td>标准单元格1</td>

            <td>标准单元格2</td>

        </tr>

    </tfoot>

</table>

<5>表单

语法格式：

<input type="表单类型"/>

5.1单行文本框text

语法格式：

<input type="text" name="signal"/><br/>

个性签名：<input type="text" name="signal"/><br/>

5.2密码框password

语法格式

<input type="password" name="secret"/><br/>

密码：<input type="password" name="secret"/><br/>

5.3单选框

你最喜欢的季节是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天

<br/><br/>

你最喜欢的动物是：
<input type="radio" name="animal" value="tiger" />路虎
<input type="radio" name="animal" value="horse" checked="checked" />宝马
<input type="radio" name="animal" value="cheetah" />捷豹

5.4多选框

你最喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利

5.5下拉框

语法格式：

<select multiple="mutiple" size="可见列表项的数目">

    <option value="选项值" selected="selected">选项显示的内容</option>

    ……

    <option value="选项值">选项显示的内容</option>

</select>

你喜欢的运动是：
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>

5.6按钮

<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>

5.7多行文本框

语法格式：

<textarea rows="行数" cols="列数">多行文本框内容</textarea>

HTML 学习笔记