HTML笔记

1.Web标准构成

1）结构（HTML）对网页元素进行整理和分类

2）表现（css）设置网页的版颜色大小等外观样式

3）行为(JS）网页模型的定义及交互的编写

HTML标签

1.开发工具

2.标题标签<h1></h1>(六级标签）

段落标签<p></p>(根据浏览器大小自动换行）

换行标签<br />

文本格式化标签

{加粗<strong></strong>或<b></b>

倾斜<em></em>,<i></i>

删除线<del></del>,<s></s>

下划线<ins></ins>,<u></u>}

<div></div>(独占一行的盒子)

<span></span>(一行可以放多个span小盒子)

图像标签<img src="文件名或图片路径" alt="图片加载不出来的替换文本" title="提示文本" width="图像宽度" height="图像高度" border="图像边框粗细"/ >（src为必须属性）

3.路径

相对路径（图片相对html页面）

同一级      <img src="baidu.gif"/>
下一级    / <img src="images/baidu.gif"/>
上一级  ../ <img src="../baidu.gif"/>

绝对路径(图片在电脑中的位置)

4.超链接标签

内部链接 外部链接 空链接（链接是#） 下载链接(链接是文件.exe或zip等压缩包的形式) 

网页元素链接  锚点链接（点击链接可以快速定位到某个位置）

<a href="http://ww.qq.com" target="_black"> 腾讯</a>
target 打开窗口的方式 默认的值是_self当前窗口打开，_black新窗口打开

锚点标签
<a href="#live">生活</a>
<h3 id="livde">生活</h3>

5.特殊字符

6.表格标签

作用：显示数据

语法

<table>
    <thead>
      <tr>//行
          <th>表头单元格</th>
      </tr>
    </thead>
    <tbody>
        <tr>//行
          <td>单元格</td>
        </tr>
    </body>
</table>

表格属性（写到table里面）

<table align="centre" border="1" cellpadding="20" cellspacing="0" width="500" height="250"></table>

表格结构标签<thead>,<tbody>

合并单元格

1)跨行还是列 2）找目标单元格写合并单元格的数量 3）删除多余单元格

<table>//三行三列表格合并第一行前两个单元格
    <thead>
      <tr>//行
          <th colspan="2">表头单元格</th>
            //删除<th>表头单元格</th>
            <th>表头单元格</th>
      </tr>
    </thead>
    <tbody>//合并第一列的最后两个单元格
        <tr>//行
          <td rowspan="2">单元格</td>
          <td>单元格</td>
          <td>单元格</td>
        </tr>
        <tr>//行
          //删除<td>单元格</td>
          <td>单元格</td>
          <td>单元格</td>
        </tr>
    </body>
</table>

7.列表

作用：用来布局的

无序列表

<ul></ul>只能嵌套<li></li>,<li></li>可以容纳所有元素，无序列表中的列表项没有顺序

有序列表<ol></ol>

<ol></ol>只能嵌套<li></li>,<li></li>可以容纳所有元素

自定义列表

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

8.表单标签

组成：表单域（包含表单元素的区域） 表单控件 提示信息

<form action="ul地址" method="提交方式get或post" name="表单域名称">
//<label>标签的for属性与相关元素id属性相同
    <label for="text">用户名:</label><input type="text" id="text"><br>//text为文本框
    密码<input type="password"><br>//name是表单元素名字这里单选按钮必须有相同的name才可以多选一
    //checked规定input元素初加载时被选中
    性别：男<input type="radio" name="sex" checked="checked">女<input type="radio" name="sex"><br>//radio为单选按钮,可以实现多选，checkbox为多选框
    
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
</form>

下拉表单

<select>//selected与checked一样
    <option selected="selected">选项1</option>
    <option>选项2<option>
    <option>选项3<option>
</select>

文本域（大量文字）

<form>//cols每行中的字符数，rows行数
    <textarea cols="50" rows="3">
    </tectarea>
</form>