HTML基础

weixin_58732695

已于 2022-04-22 17:45:00 修改

阅读量633

点赞数

文章标签： html5

于 2022-04-14 22:42:46 首次发布

本文链接：https://blog.csdn.net/weixin_58732695/article/details/124181357

版权

html

一、基本结构

<!DOCTYPE html>
<!-- 文档类型是html文件 -->
<html lang="en">
    <!-- 表示当前使用的语言是english标记了语言 -->
<head>
    <!-- head标签里的内容主要是页面的一些属性 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <!-- 浏览器标签页的标题 -->
    </title>
</head>
<body>
    <!-- 页面展示的内容 -->
</body>
</html>

二、常见标签

html注释：ctrl+/；是对代码的解释；在浏览器中不显示

html标签：由<> / 字母构成；分为单表签和双标签；标签之间的关系分为父子关系和并列（兄弟）关系

排版标签

1.标题标签<h1><h2><h3><h4><h5>

2.段落标签<p>

3.换行标签<br>

4.水平线标签<hr>

文本格式化标签

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

媒体标签

1.图片标签

属性名：width height 属性值：数字（给出一个值，另一个自动缩放，图片不变形）

2.路径

3.音频标签

<audio src="' controls></audio>属性名scr 功能：音频路径 controls 显示播放控件 autoplay 自动播放 loop 循环播放

4.视频标签

<video scr="">属性名功能同上

链接标签

空链接：是属于开发阶段，有的链接具体不知道，可以用#占个位置

综合案例

招聘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1> .....</h1>
<hr>
<p>    ..<strong></strong>..</p>
<p>...</p>
<h2>   ...</h2>
<p>   .....</p>
<p>...</p>
<h2>  .... </h2>
<p>   ...</p>
<img src="">

    
</body>
</html>

综合案例：跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>...</h1>
    <hr>
    <h2>...</h2>
    <p>...    ....<a href="#"></a></p>
    <h2>...</h2>
    <p>...         ....<a href="#"></a></P>
     
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>...</h2>
    <hr>
    <audio scr="" control></audio>
</body>
</html>

列表标签：内容规整的区域

使用场景：在网页中按照行展示关联性的内容，如新闻列表账单排行榜等；

特点：按照行的方式，整齐展示内容

1.无序列表组成：<ul><li>

2.有序列表组成：<ol><li>

3.自定义列表 <dl><dt>定义自定义列表的主题<dd>表示自定义列表的主体的每一项内容

表格标签

场景：在网页中以行加列的单元格的方式整齐展示和数据

table表格整体 tr表格每行td表格单元格

相关属性 border边框线 width宽度 height高度（数字）

表头单元格标签

场景：展示大标签和小标签

<caption> 表格大标题，书写在table标签内部，默认居中显示 <th>表头单元格，通常用于表格第一行，写在tr标签内，替换td标签

合并单元格

将水平（跨列合并）或垂直（跨行合并）的多个单元格合并成一个

步骤：明确合并那几个单元格，通过左上原则，删掉保留，给保留的单元格设置rowspan跨行合并 colspan跨列合并属性

表单标签

场景：搜索登录注册

表单域：包含表单元素的区域，重点是form标签

借助form可以允许用户输入一些信息，提交到服务器上，form中可以放一些和用户交互的组件

表单控件：输入框、提交按钮，重点是input标签

1.input系列

场景：登陆注册

标签名：input 通过type属性值不同，展示不同效果

text文本框，输入单行文本password密码框radio多选一checkbook多选多file上传文件submit提交按钮reset重置按钮buttton普通按钮

属性名 placeholder（适用于文本框）占位符，提示用户输入内容的文本

radio/checkbox：属性名name分组，有相同name属性值的单选框分为一组，checked默认选中

file：multiple多文件选择

提交按钮：需要配合form标签一起使用，用form标签把表单标签包裹即可

2.button按钮标签

属性名type 属性值：submit reset button

3.select下拉菜单栏标签

场景：在网页中提供多个选择项的下拉菜单表单控件

组成：select标签，对下拉菜单栏的整体 option标签，对下拉菜单的每一项

属性：selected下拉菜单的默认选中

4.textarea文本域标签·

场景：在网页中提供可输入多行文本的表单控件

标签名属性：cols规定宽度 rows规定高度（一般使用css设置宽高）

右下角可拖拽改变大小

5.label标签

场景：用于绑定内容和表单标签的关系

标签名：label

使用方法：1.使用label标签把内容表单标签包裹起来，在表单标签上添加id属性，在label标签的for属性中设置相应的id属性值 2.直接使用label标签把内容和表单标签包裹起来，把label标签中的for属性删处。

语义化标签

布局标签（没有语义）

有语义的布局标签：

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

字符实体

 空格

综合案例:表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
       昵称：<input type="text" placeholder="请输入昵称">
       <br>
       性别：<label><input type="radio" name="男" checked>男</label>
             <label ><input type="radio" name="女">女</label>
       <br>
       所在城市：<select>
           <option>北京</option>
            <option selected>上海</option>
            <option>南京</option>
       </select>
       <br><br>
       婚姻状况：<label ><input type="radio" name="hunyin">已婚</label>
                <label ><input type="radio" name="hunyin"checked>未婚</label>
                <label ><input type="radio" name="hunyin">保密</label>
                <br><br>
       喜欢的类型：
                <label ><input type="checkbox"checked>可爱</label>
                <label ><input type="checkbox"checked>御姐</label>
                <label ><input type="checkbox">性感</label>
                <label ><input type="checkbox">萝莉</label>
                <label ><input type="checkbox">小鲜肉</label>
        <br>
        <br>
        个人介绍：<textarea  cols="30" rows="10"></textarea>
        <br>
        <h2>我承诺</h2>
        <ol>
            <li>年满十八岁 单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ol>
        <label ><input type="checkbox">我同意所有条款</label>
        <br><br>
        <input type="submit" value="免费注册"> 
        <button type="reset">重置</button>

    </form>
</body>
</html>

综合案例：表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="500" height="400">
         <caption><h2>学生信息表</h2></caption>
         <tr>
             <th>年纪</th>
             <th>姓名</th>
             <th>学号</th>
             <th>班级</th>
         </tr>
           <tr>
               <td rowspan="2">高三</td>
               <td>张三</td>
               <td>110</td>
               <td>三年二班</td>
           </tr>
           <tr>
            
            <td>赵四</td>
            <td>120</td>
            <td>三年三班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">很棒</td>
            
        </tr>

    </table>

</body>
</html>