HTML学习

HTML学习

HTML说明:负责页面元素和内容

基础认知

概念: HTML中文译为:超文本标记语言

HTML骨架结构组成:

html标签:网页的整体
head标签:网页的头部
body标签:网页的身体
title标签:网页的标题

语法规范

1.HTML的注释

注释的作用:

为代码添加的具有解释性,描述性的信息,主要用来帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释

注释的快捷键

ctr+/

2.HTML标签的构成

标签学习

1 排版标签

1.1 标题标签

代码h系列标签

<!-- 标题标签 -->
<h1></h1>
<h2></h2>
...

1.2 段落标签

<!-- 段落标签 -->
<p></p>

1.3 换行标签

<br>

1.4 水平线标签

<hr>

2 文本格式化标签

文本格式化标签有两套,一套是单个字母,一套是英文单词,英文单词那套标签有突出强调重要意义的作用

简单标签:

标签	含义
b	字体加粗
u	下划线
i	字体倾斜
s	删除线

突出强调标签:

标签	含义
strong	字体加粗
ins	下划线
em	字体倾斜
del	删除线

在实际项目开发过程中选择标签的规则:标签语义化

• 根据语义选择对应正确的标签

建议: 使用英文标签(强调语义)

3 媒体标签

3.1 图片标签

<imag src="" alt=""> //单标签
<!-- alt属性解释: 替换文本 当图片加载失败 展示alt内容 -->
<!-- title属性解释: 显示文本 当鼠标悬停在图片时,显示-->
<!-- width height :设置图片的高度和宽度 这两个属性只出现一个的时候 图片会进行等比例缩放 如果两个都写要注意 不然会影响图片正常-->

路径:

1.绝对路径:文件的完整路径

2.相对路径: 从当前文件开始出发 去找目标文件

3.2音频标签

<audio src="" controls></audio> //双标签
<!-- controls 显示播放的控件 -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->

支持格式:MP3,Wav,Ogg

3.3 视频标签

<video src=""></video>
<!-- controls 显示播放的控件 -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->

支持格式: MP4,Wav,Ogg

4 链接标签

<a href="跳转地址/路径">超链接</a>
####
target属性:
默认值: _self 在当前页面打开
-blank 新打开一个窗口

HTM基础

1.列表标签

1.1 无序列表标签

标签组成

 <!-- ul 表示这个一个无序列表 里面包含 li标签 -->
    <ul>
        <li>西瓜</li>
        <li>榴莲</li>
        <li>香蕉</li>
    </ul>

1.2 有序列表标签

标签组成

    <!-- ol 表示这是一个有序列表 里面包含li标签-->
    <ol>
        <li>张三:100</li>
        <li>李四:95</li>
        <li>王五:90</li>
    </ol>

1.3 自定义列表标签

标签组成

<!-- dl 表示自定义列表的整体 用于包裹dt/dd标签 -->
    <!-- dt 表示自定义列表的主题 -->
    <!-- dd 表示自定义列表主题的每一项内容 -->
    <dl>
        <dt title="帮助中心">帮助中心</dt>
        <dd>内容</dd>
        <dt>服务支持</dt>
        <dd>测试</dd>
        <dt></dt>
    </dl>

2. 表格标签

标签组成

 <!-- table 表格整体,可用于包裹多个tr -->
    <!-- tr 表格每行,可用于包裹td -->
    <!-- td 表格单元格,可用于包裹内容 -->
    <table>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>80</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>90</td>
        </tr>
    </table>

表格相关属性

表格相关属性是设置表格的基本展示效果

常见的相关属性有:

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

表格标题和表头单元格标签

在表格中表示整体大标签和一列小标题

标签:

标签名	名称	说明
caption	表格大标题	表示表格整体大标题,默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

  <table border="1" width="125" height="125">
        <!-- caption放在table标签和tr标签之间 -->
       <caption><strong>测试</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>李四</td>
            <td>80</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>90</td>
        </tr>
    </table>

表格的结构标签

让表格的内容结构分组,突出表格的不同部分(头部,主体,底部),使语义更加清晰

结构标签:

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

表格结构标签内部用于包裹tr标签

表格的结构标签可以省略

合并单元格

td标签内部属性

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并
colspan	合并单元格的格式	跨列合并

只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead,tbody,tfoot)

3. 表单标签

3.1 input标签

input标签可以通过type属性值的不同,展示不同效果

type属性值:

属性值	说明
text	文本框,用于输入单行文字
password	密码框
radio	单选框
checkbox	多选框,复选框
file	文件选择 用于文件上传
submit	提交按钮 用于提交
reset	重置按钮 用于重置
button	普通按钮,默认无功能,可以搭配js一起使用

    <!-- form标签存在 才能使按钮功能实现 -->
    <form action="">
        <!-- placeholder 属性 占位符 提示用户输入内容 -->
        文本框:<input type="text" placeholder="请输入用户名">
        <br>
        密码框: <input type="password" placeholder="请输入密码">
        <br>
        <!-- name属性 对于单选框有分组功能 -->
        <!-- 有相同name属性值的单选框为一组 -->
        <!-- checked 默认选中 -->
        单选框<input type="radio" name="单选框" checked>男
        <input type="radio" name="单选框">女
        <br>
        多选框:<input type="checkbox" name="兴趣">篮球
        <input type="checkbox" name="兴趣">足球
        <input type="checkbox" name="兴趣">乒乓球
        <br>
        <!-- multiple多文件上传属性 -->
        文件上传:<input type="file" multiple>
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="注册">
    </form>

3.2 下拉菜单标签

select标签:下拉菜单的整体

option标签:calamity菜单的每一项

常见属性:

selected:下拉菜单的默认选中

<select>
        <option>北京</option>
        <option selected>上海</option>
        <option>深圳</option>
</select>

3.3 textarea文本域标签

<!-- cols 可见宽度 -->
<!-- rows 可见行数 -->
### 真正控制 建议使用css
<textarea cols="30" rows="10"></textarea>

3.4 label标签

   <!-- 方式一 -->
    单选框<input type="radio" name="单选框" id="1"><label for="1">男</label>
    <input type="radio" name="单选框" id="2"><label for="2">女</label>

    <!-- 方式二 -->
    单选框<label><input type="radio" name="单选框1">男</label>
    <label><input type="radio" name="单选框1">女</label>

4. 语义化标签

4.1 没有语义的布局标签

div

div标签:一行只显示一个(独占一行)

span

span标签:一行可以显示多个

4.2 有语义的布局标签(了解即可)

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

这些标签基本使用于手机端

5. 字符实体

目标:能通过字符实体再网页中显示特殊符号

<!-- 网页不认识多个空格 只认识一个 -->
    <!-- 空格 字符实体 &nbsp; -->
    <!-- 小于号 字符实体 &lt; -->
    <!-- 大于号 字符实体 &gt; -->
    <!--  & 和号 字符实体 &amp; -->
    <!-- © 版权 &copy; -->