【前端HTML-基础】

目录

一、常用标签

（1）排版标签    

（2）文本格式化标签

（3）图像标签

（4）链接标签

二、路径学习

三、锚点定位

四、特殊字符

五、表格（单元格）

（1）标签含义

（2）表格属性

（3）合并单元格

六、列表

（1）无序列表（ul）

（2）有序列表（ol）

（3）自定义列表（dl）

七、表单标签

（1）input控件

   (2)textarea控件（文本域）

（3）select控件（下拉菜单）

（4）form标签（表单域）

总结

---

一、常用标签

（1）排版标签    

<h1>1级标题</h1><h2>2级标签</h2>
<p>段落标签</p>
<hr/>水平线
<br>换行
<div>内容</div>一行只有一个
<span>内容</span>一行可以有多个

（2）文本格式化标签

<b>加粗</b>      <strong>加粗</strong> 
<i>倾斜</i>      <em>倾斜</em>
<s>删除线</s>    <del>删除线</del>
<u>下划线</u>    <ins>下划线</ins>

后面的语义更加强烈，推荐写后面的！

（3）图像标签

<img src="图像路径" alt="图像不能显示时提示文本" title="鼠标悬停时提示文本">

图像标签可以设置width（宽）与hight（高）但一般为使图片不失真只改其中一个！

（4）链接标签

<a href="跳转目标地址" target="目标弹出方式">文本或者图像</a>

href 的特殊值：

        1.#  ：代表空链接      

        2.javascript：； ：代表禁止跳转

target 值：

        1.self 在本网页打开（默认值）

        2._blank 在新网页中打开

二、路径学习

1.同级路径：直接写文件名称

2.下级路径：下一级文件夹名/文件名称

3.上级路径：../下一级文件夹名/文件名称

4.绝对路径：文件路径\文件名称        不推荐使用！，因为在不同电脑文件路径可能不同！

5.绝对网络路径：写网络 ip地址        如img图像标签

三、锚点定位

<h1 id="app">跳转的目标区域</h1>
<div style="height: 1800px;">隔断</div>
<a href="#app">跳转</a>

锚点定位：通过a标签的href属性绑定对应标签的id值来实现跳转功能

四、特殊字符

 （空格） <（小于号） >（大于号） ©（版权符号） 
®（注册商标） ²（平方标）

每一个特殊字符后面要跟分号（ ；）！

五、表格（单元格）

<table>
        <thead>
            <th>
                <td>头部1</td>
                <td>头部2</td>
            </th>
        </thead>
        <tbody>
            <tr>
                <td>第一行1</td>
                <td>第一行1</td>
            </tr>
            <tr>
                <td>第二行2</td>
                <td>第二行2</td>
            </tr>
        </tbody>
</table>

（1）标签含义

table：创建一个表格

thead：表格的表头部分

        th：表头行（居中且加粗）

tbody：表格的主体部分

        tr：一行，里面包裹多个td

        td：单元格

（2）表格属性

border：边框        cellspacing：单元格与边框的间距

cellpadding：单元格与单元格内容的间距        

width：宽        height：高

align：表格对齐方式

        left：左对齐（默认）

        center：居中

        right：右对齐

（3）合并单元格

原则：先上后下，先左后右！

1）行合并：rowspan

        <td rowspan='个数'>

        删除多余的单元格

2）列合并：colspan

        <td colspan='个数'>

        删除多余的单元格

注：HTML大多时只用于部署表格与制作表格，美化部分由后续学习CSS后进行！

六、列表

（1）无序列表（ul）

<ul>
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
</ul>

ul中只能包含li，但li可以包含文本、链接、图片等！

无序列表在之后的布局中经常运用，需重点学习

（2）有序列表（ol）

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li> 
</ol>

与ul类似，但不常用，因为每个列表项前有固定数字

（3）自定义列表（dl）

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

自定义列表多用于对名词解析时使用

七、表单标签

（1）input控件

<input type="属性值" value="提示词" name="名字" checked="刷新后是否为选中状态">

type：

        text：单行文本        password：密码框     

        button：普通按钮        submit：提交按钮        image：图片按钮（后面跟src=’路径‘）

        reset：重置按钮

        radio：单选        checkbox：复选        这两个属性值需要input设置名字

name：名字属性

value：提示词

placeholder：提示词（输入文字后消失）

checked：

        ’ ‘：刷新后默认不选择（不写，默认此选项）

        checked：刷新后默认选中

上传头像：文件域或者文件

<input type="file">

   (2)textarea控件（文本域）

<textarea cols="30" rows="10">
    文本内容
</textarea>

cols：每行中的字符数

rows：显示行数

注：此属性一般开发中通过后续学习的CSS制作

（3）select控件（下拉菜单）

<select>
    <option >默认显示</option>
    <option >选项1</option>
    <option >选项2</option>
    <option >选项3</option>
</select>

注：一般不用，因为不够美观，后续通过CSS、JS来做

（4）form标签（表单域）

<form action="url地址" method="提交方式" name="名称">
    <input type="text">
    <select ></select>
    <textarea></textarea>
</form>

action：把表单数据提交到哪里

method：

        get：请求方式，在网址中显示

        post：请求方式，在网址中不显示

        注：两种方式会在后续学习路由服务器时详细学习

---