Html基础（笔记）

1. 标题标签

1. h1~h6

1. P br 标签

1. <p>：段落标签
2. <br/>：换行标签

1. 文本格式化标签

1. <p><strong>XXXXXXXX</strong></p>：加粗字体
2. <p><em>XXXXXXXX</em></p>：斜体字体
3. <p><del>XXXXXXXX</del></p>：删除字体
4. <p><ins>XXXXXXXX</ins></p>：下划线字体

1. div span标签

1. div:分区 盒子 独占一行
2. span:小盒子 不独占一行

1. 图像标签和路径

1. <img src=”XXXXXX” alt:”xxxxx” title=”xxxx” width=”xx” height=”xx” border=”15”/> alt:提示内容
2. 路径：

目录和根目录

        html文件同级目录：XX.jpg

        html文件下级目录：文件夹/xx.jpg

        html文件上级目录：../文件夹/上一级目录下的文件

1. 超链接标签

  a=anchor 锚

        <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

        href:url地址  target：_sell为默认值，_blank在新窗口中打开

 <h1>1. 外部链接</h1>

    <a href="https://www.baidu.com" target="_self">baidu</a>

    <h1>2. 内部链接</h1>

    <a href="H:\WebCode\Code\09-图像标签和路径.html" target="_blank">我媳妇儿</a>

    <h1>3. 空链接</h1>

    <a href="#" target="_sell">公司地址</a>

    <h1>4. 下载链接：exe rar zip等压缩包形式</h1>

    <a href="img.rar" target="_sell">文件下载</a>

    <h1>5. 网页元素链接</h1>

    <a href="img.rar" target="_sell"><img src="img/11.jpg" alt="超时啦" /></a>

    <h1>6. 锚点链接</h1>

    <a href="#basic infromation">

        <p>基本信息</p>

</a>

注释：锚点链接就是给段落或锚点内容添加ID，然后在a标签内 href=ID名即可 

1. 注释标签

1. 快捷键：ctrl+/
2. 空格标签： 

1. 表格标签

 <table></table>用于定义表格的标签

        <tr></tr>用于定义表格中的行，嵌套在<table>中

        <td></td>用于定义表格中的单元格，必须嵌套在<tr>中

            td：指表格数据（table data）

        <th></th>表示表头标签:加粗+居中

表格属性

        属性名         属性值               含义

        align          left\right\center   元素对齐方式

        border         1或“”               规定表格单元是否拥有边框，默认为“”，表示没有边框

        cellpadding    像素值               规定单元边沿与其他内容之间的空白，默认1像素

        cellspacing    像素值               规定单元格之间的空白，默认2像素

        width          像素值或百分比        规定表格的宽度

1. 表格结构标签

<thead>:头部区域

    <tbody>：表格区域

这两个标签可以在CSS样式中进行更改样式

1. 合并单元格

 一、合并单元格方式：

          1.跨行合并：rowspan = “合并单元格的个数”，跨行：最上侧单元格为目标单元格，写合并代码

          2.跨列合并：colspan = “合并单元格的个数”，跨列：最左侧单元格为目标单元格，写合并代码

        二、合并单元格三步曲：

          1.先确定跨行还是跨列合并

          2.找到目标单元格，写上合并方式=合并的单元格数量，比如：<td colspan="2"></td>

          3.删除多余单元格

1. 列表标签

1. 无序列表：<ul><li>xxxx or num</li></ul>
2. 有序列表：<ol><li>xxxx or num</li></ol>
3. 有序无序是指的有没有序号

1. 表单标签

表单：由表单域、表单控件（表单元素）和提示信息三个部分组成

        表单域：<form action = "url地址" method="提交方式" name="表单域名称">

        表单控件：input：输入；select：下拉表单；textarea：文本域

 <input type>:type:button;checkbox;file:定义输入字段和浏览按钮，供文件上传;

            hidden:定义隐藏的输入字段;image：图像形式的提交按钮；password：定义密码字段；radio：单选按钮

            reset：重置按钮，重置会清楚表单中的所有数据；submit：提交按钮；text：默认宽度20个字符。

            单选和复选框设置checked可以显示为默认选中

            maxlength设置最大字符，整数

<form action="demo.php" method="get" name="name1">

 UserName：<input type="text" name="username">    <br>

        PassWord：<input type="password" name="password">    <br>

        <!-- 单选按钮  name需要取相同名字才能实现单选-->

        婚姻状况：

        未婚<input type="radio" name="marry" value="0" checked="checked">

        已婚<input type="radio" name="marry" value="1">

        离异<input type="radio" name="marry" value="2"><br>

        <!-- 复选框 -->

        爱好：

        吃饭<input type="checkbox">  

        睡觉 <input type="checkbox"> 

        打豆豆<input type="checkbox"><br>

        常住地：<select name="下拉列表" >

            <option value="0">选择地址</option>

            <option value="1">北京</option>

            <option value="2">天津</option>

            <option value="3">上海</option>

        </select>

        <br>

        <input type="submit" value="免费注册" name="" id="">

        <br>9

        <input type="file">

        <br>

        <input type="image" name="" id="" src="img/11.jpg">

     </form>

 <!-- label标签

        用于绑定一个表单元素，当点击label标签的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

        <label for="ID">XX</label>

        <input type="" name="" id="ID">

        for= input 中的id

    -->

     <form action="XX.php" method="get" name="name2">

        <label for="sex">男</label>

        <input type="radio" name="sex" id="sex">

        <br>

        今日反馈：<textarea name="" id="" cols="30" rows="20">请填写今日反馈</textarea>

     </form>