前端学习记录---html认知+基础

俩小歪

已于 2023-06-13 16:38:18 修改

阅读量71

点赞数

分类专栏：网页文章标签： html5

于 2023-06-13 16:22:33 首次发布

本文链接：https://blog.csdn.net/m0_69483514/article/details/131186636

版权

网页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本概念，包括常见的五大浏览器和它们的渲染引擎，以及Web标准的组成部分。详细讲解了HTML的结构和基础标签元素，如标题、段落、媒体、链接、列表、表格和表单等，同时涵盖了表单元素如input、select和textarea的用法。此外，还提及了资源路径的使用和标签的快捷生成方式。

摘要由CSDN通过智能技术生成

一、HTML认知

1.常见五大浏览器：IE火狐、 FireFox、谷歌 Chrome、Safari、欧朋 Opera

2.渲染引擎：IE---Trident、FireFox---Gecko、Safari---Webkit、Chrome/Opera---Blink

3.Web标准：不同显示器打开同一个网页的相同效果

结构---html---页面元素、表现---CSS---页面样式、行为---JavaScript---页面交互

4.HTML骨架

<html>
  <head>
    <title>标题</title>
  </head>

  <body>主体</body>
</html>

5.开发工具：Visual Studio Code （首选）、WebStorm、Sublime Text、DreamWeaver、HBuilder

6.一些快捷键

快速生成html网页结构：! + Tab （英文状态感叹号）
打开浏览器：Alt + B
注释：Ctrl+/
同时选中下一个相同字符：Ctrl+D

7.标签结构：

双标签：<strong>内容</strong>
单标签：<br> <hr>

二、HTML基础---标签元素

1.标题标签Heading：h1--h6 依次减小/加粗/自动换行

<h1> 一级标题 </h1>

2.段落标签Paragraph：独占一行/段落间有空隙

<p></p>

3.排版标签

<br>：换行符
<hr>:水平分割线

4.文本格式化标签

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

5.媒体标签：图片/音频/视频

图片<img >

<img
  src="图片地址"
  alt="替换文本"
  title="提示文本"  #鼠标悬浮显示
  width="宽度"
  height="高度"
/>

音频<audio >

<audio
  src="音频地址"
  controls 显示播放控件
  autoplay 自动播放（部分浏览器不支持）
  loop 循环播放
</audio>

视频文件<video>

<video src="视频地址"
  controls 显示播放控件
  autoplay 自动播放（谷歌浏览器需要配合muted静音播放）
  muted 静音播放
  loop 循环播放
</video>

6.链接标签Anchor

<a href="目标地址">文字内容</a>

7.资源路径

当前路径：./ <img src="./image.png" />
下级路径：./文件夹/文件名 <img src="./img/image.png" />
上级路径：../ <img src="../image.png" />

三、HTML基础---表格类元素

1.列表

无序列表 Unorder List: <ul > <li></li></ul>
有序列表 Ordered List: <ol > <li></li></ol>
自定义列表 Description List: dt: Description Term dd: Description Details

    <dl>
        <dt>steve</dt>
        <dd>摩托</dd>
        <dd>早田</dd>
    </dl>

2.表格:

元素：table---整体 tr---行 td--单元格 /// table> tr>td（包含关系）
table属性：broder边框 width宽度 height高度 <table border="3" width="300" height="100">
结构：thead表格头部 tbody表格主体 tfoot表格底部
表格外部大标题 caption
表头单元格 th：表格第一行的属性行
合并单元格：跨行合并：rowspan 跨列合并：colspan 在具体单元格操作

    <!-- 2.4 合并单元格 跨行合并：rowspan 跨列合并：colspan-->
    <table border="1">
        <caption><h2>莎头</h2></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>比赛名称</th>
                <th>赛果</th>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td>王楚钦</td>
                <td rowspan="2">混双</td>
                <td>3-0</td>
            </tr>
            <tr>
                <td>孙颖莎</td>
                <td>3-0</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>真牛</td>
                <td colspan="2">天选</td>
            </tr>
        </tfoot>
    </table>

3.表单：一般在登录、注册、搜索界面

input系列

input的type类型：
type 属性输入框类型
text 文本框
password 密码框
radio 单选框
checkbox 多选框
file 文件选择
submit 提交按钮
reset 重置按钮
button 普通按钮

type 属性	输入框类型
text	文本框
password	密码框
radio	单选框
checkbox	多选框
file	文件选择
submit	提交按钮
reset	重置按钮
button	普通按钮

text文本：placeholder占位符阴影提示符

    <!-- 属性：占位符 placeholder -->
    姓名：<input type="text" placeholder="请输入姓名">

password 密码框

 密码：<input type="password" placeholder="请输入密码">

radio 单选框：name--属性分组（组内只有一个元素能被选中）、checked（默认选中）

    <!-- 单选框 name分组 只能选一个-->
    <br>
    性别<input type="radio" name="sex"> 男 <input type="radio" name="sex">女
    <br>
    <!-- 默认选中 checked -->
    <br>
    性别<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女

checkbox多选框：checked（默认选中）

<input type="checkbox" checked>我同意该协议

file文件：上传多个文件 multiple属性（按住ctrl可以多选）

    <!-- input：file 上传多个文件 multiple -->
    上传文件：<input type="file" multiple>

button按钮：

    <!-- input：file 上传多个文件 multiple -->
    上传文件：<input type="file" multiple>

1.submit 提交：默认value="提交"

2.reset 重置：没有默认value

3.button 普通按钮

    <!-- input：按钮 submit：提交 reset：重置 button：普通按钮-->
    <!-- 按钮起作用要添加表单预标签 form 按钮提示显示 value-->
    <form action="">
        <input type="text" placeholder="输入姓名">
        <br>
        <input type="password" placeholder="输入密码">
        <br>
        <br>
        <input type="submit" >
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>
    <br>

button系列双标签 <button type="submit/reset/button"></button>

    <!-- botton 的type 属性值：submit/reset/button -->
    <button>
        我是按钮
    </button>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">随便功能-所有功能</button>

select系列： select：整体 option：下拉菜单的每一项嵌套

    <!-- select：整体 option：下拉菜单的每一项 嵌套 -->
    <!-- selected：默认选择某个option -->
    <select name="" id="">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳" selected>深圳</option>
    </select>

4.文本域 textarea

    <!-- 3.4文本域 textarea -->
    请输入你的个人介绍：
    <br>
    <textarea name="" id="" cols="30" rows="10">
    </textarea>

5.label标签：补充选择域扩大作用范围

    <!--  label标签  -->
    <!-- 方法1： 利用id识别 label中属性for指向id -->
    性别：
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <!-- 方法2： 使用label吧标签内容包裹起来 -->
    <label ><input type="radio" name="sex" >女</label>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
</head>
<body>
    <h1>青春不常在，莎头谈恋爱</h1>
    <hr>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称">
    <br>
    <br>
    性别：
    <label><input type="radio" name="sex">男</label> 
    <label><input type="radio" name="sex" >女</label>
    <br>
    <br>
    所在城市：
    <select name="" id="">
        <option value="">北京</option>
        <option value="" selected>上海</option>
        <option value="">深圳</option>
        <option value="">广州</option>
    </select>
    <br>
    <br>
    婚姻状况：
    <label ><input type="radio" name="martial" id="">未婚</label>
    <label ><input type="radio" name="martial" id="">已婚</label>
    <label ><input type="radio" name="martial" id="">保密</label>
    <br>
    <br>
    喜欢的类型：
    <label ><input type="checkbox" >小豆包</label>
    <label ><input type="checkbox" >莎莎</label>
    <label ><input type="checkbox" >小魔王</label>
    <label ><input type="checkbox" >小猫猫</label>
    <br>
    <br>
    个人介绍：
    <br>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <br>
    <br>
    <h3>我承诺</h3>
    <ul>
        <li>只爱小豆包</li>
        <li>只逗小猫</li>
        <li>一起坚定自信</li>
        <li>fighting</li>
    </ul>
    <br>
    <input type="checkbox" checked>我同意所有条款
    <br>
    <br>
    <input type="submit" value="免费注册">
    <!-- <input type="reset" value="重置"> -->
    <button type="reset">重置</button>


    </form>

</body>
</html>