菜单 搜索
首页 前端知识 html T

html T

2024-06-26 23:06:40 前端知识 前端哥 718 307 我要收藏

html

一.day01

1.快捷键

（1） Ctrl+x
  <title>快捷键</title>
</head>
<body>
    <div></div> 
    Ctrl+x 
    Ctrl+s 保存
    快速复制一整行：Ctrl+c
    快速粘贴一整行：Ctrl+v
    <div></div>
        <!--注释：  -->
（2）文本格式
<title>文本格式</title>
</head>
<body>
    <p>
        格式化文本<br>
        <b>加粗</b><strong>强壮</strong><br>
        <u>下划线</u><ins>插入线</ins><br>
        <i>倾斜</i><em>倾斜</em><br>
        <s>删除线</s><del>贯穿线</del>
        下标<sub>①</sub><br>
        6 <sup>2</sup>上标<br>


    </p>
（3）html怎么生成
<!-- 注释：解释代码，不会运行 -->
<!-- 
    ！doctype html  作用：声明，告诉浏览器当前文件是html页面
 -->
<!DOCTYPE html>
<!-- html：跟标签 -->
<html lang="en">
    <!-- head：头部
        用来设置整个页面的信息：编码方式，搜索项，引入的文件...
     -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- title：标题 -->
    <title>第一个页面</title>
</head>
<!-- body：主题，所有要在页面中显示的内容都要写在body中 -->
<body>
    hello word!
（4）标题标签
<title>标题标签</title>
</head>
<body>
    <h1>一级标签</h1> 
    <h2>二级标签</h2> 
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>  
    <h6>六级标签</h6>
    标题特效：加粗，字体大小发生了改变，会自动换行
    普通文字不会自动换行
（5）图片
<title>照片</title>
</head>
<body>
    <!-- 绝对路径 -->
     
    <!-- 相对路径  -->
    <!-- 1.同级 文件名-->
    <img src="img/微信图片_20230808143009.jpg" alt="">
    <!--  -->
    <img src="img/微信图片_20230808143009.jpg" alt="">
（6）换行
<title>换行</title>
</head>
<body>
    静夜思 李白<br>
    床前明月光<br>
    疑是地上霜<br>
    举头望明月<br>
    低头思故乡<br>
（7）音频
<title>Document</title>
</head>
<body>
    <!-- controls:播放控件
    autoplay:自动播放
    loop：循环播放
    muted：静音
    -->
    <audio src="img/1.mp3" controls autoplay loop></audio>
    <video src="img/2.mp4"controls autoplay loop></video>

二.day02

（1）表单
<title>表单</title>
</head>
<body>
    <!-- 
        form表单：1.所有要提交的数据都必须写在表单中
        action:把数据提交给服务器
        method:数据的提交方式
        get：数据在地址栏可见，数据不安全，有大小限制
        post：不可见            安全        没有限制
     -->
    <form action="http://www.baidu.com" method="post" enctype="multpart/form-tada">
        <!-- 
            type:类型
            name：提交数据给服务器，用来分辨数据，必须要有
            value：默认值
            placeholder:输入提示
         -->56
        文本框：<input type="text" name="user" value="默认值"><br>
        密码框：<input type="password" name="pwd" placeholder="请输入密码"><br>
        <!-- 单选，多选 
            name值必须一致
            value值必须要有
            checked 默认选中
         -->
        单选：
        男<input type="radio" name="sex" value="男" checked>
        女<input type="radio" name="sex" value="女"><br>
        多选：
        唱<input type="checkbox" name="hobby" value="唱">
        跳<input type="checkbox" name="hobby" value="跳" checked>
        RAP<input type="checkbox" name="hobby" value="RAP">
        篮球<input type="checkbox" name="hobby" value="篮球"><br>
        <!-- file必须使用post提交
        在form标签中加入：enctype="multipart/form-data" 告诉浏览器传输的是文件
        multipart：允许提交多个文件
        -->
        文件：<input type="file" name="file" multiple><br>
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
        <input type="image" src="img/张爽.jpg" height="30px" width="30px">
    </form>
    <form action="http：//www.baidu.com" method="get">
        <!-- 文本框，用于输入信息（账号、住址、身份证豪门、电话...之类） -->
        用户名：<input type="text" name="user">
        <br />
        密码：<input type="password" name="pass"/>
        <br />
        性别：<input type="radio" value="男" name="sex"/>男
        <input type="radio" value="女" name="sex"/>女
        <br />
        <!-- 下拉列表 -->
        学历：
        <select>
            <option value="小学">小学</option>
            <option value="中学">中学</option>
            <option value="大学">大学</option>
            <option value="研究生">研究生</option>
        </select>
        <br />
        评价：
        <br />
        <!-- 文本区域：文本内容比较多的时候实用 -->
        <textarea rows="10" cols="30" placeholder="请输入评价"></textarea>
        <br />
        <!-- 复选框 -->
        爱好：
        <input type="checkbox" value="体育" />体育
        <input type="checkbox" value="音乐" />音乐
        <input type="checkbox" value="美术" />美术
        <br>
        <input type="submit" value="提交表单" />
    </form>
（2）其他表单
<title>其他的表单</title>
</head>
<body>
    <form action="#" method="post">
        <!-- 可以省略value
            默认选中 selected
         -->
        下拉列表：
        <select name="address" >
            <option value="北京">北京</option>
            <option selected>上海</option>
            <option>石家庄</option>
            <option>临汾</option>
        </select><br>
        <!-- 
            cols：每行显示n个文字
            rows：显示多个行
         -->
        多行文本：
        <textarea name="say" cols="30" rows="10" rows="10"></textarea>
        <br>
        <button>提交按钮</button>
        <button type="submit">提交按钮</button>
         <button type="reset">重置按钮</button>
        <button type="button">普通按钮</button>
        <button>
            <img src="img/张爽.jpg" alt="">
        </button>
（3）lable
<title>lable</title>
</head>
<body>
    <form action="#"  method="get"></form>
    <label>
        用户名：<input type="text" name="a">
    </label><br>
    <label for="a">密 &nbsp; 码：</label>
    <input type="password" name="pwd"><br>
（4）表格
<title>表格</title>
</head>
<body>
    <p>
        table表格标签<br>
        tr：行 td：单元格<br>
        boder:边框
        height="200px" width="300px" 不推荐  
        tr 只能设置高<br>
        td 只能设置width
    </p>
    <table  border="1" height="200px" winth="300px">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
           <td>1</td>
           <td>彬彬</td>
           <td>女</td>
        </tr>
        </table>
        <hr>
        <h2>带表头的表格</h2>
        <table border="1" height="200px" width="300px"  >
            <caption>
                <h3>学生信息表</h3>
            </caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>1</td>
                <td>鑫鑫</td>
                <td>未知</td>
            </tr> 
        </table>
        <hr>
        <table border="1" height="500px" width="500px" > 
            <tr>
                <td colspan="2" > 1,1</td>
                <!-- <td>1,2</td> -->
                <td colspan="2">1,3</td>
                <!--  09iujik9=<td>1,4</td> -->
                <td>1,5</td>
            </tr>
            <tr>
                <td>2,1</td>
                <td>2,2</td>
                <td>2,3</td>
                <td>2,4</td>
                <td>2,5</td>
            </tr>
            <tr>
                <td>3,1</td>
                <td colspan="2" rowspan="2" >3,2</td>
                <!-- <td>3,3</td> -->
                <td>3,4</td>
                <td>3,5</td>
            </tr>
            <tr>
                <td>4,1</td>
                <!-- <td  >4,2</td> -->
                <!-- <td>4,3</td> -->
                <td>4,4</td>
                <td>4,5</td>
            </tr>
            <tr>
                <td>5,1</td>
                <td>5,2</td>
                <td>5,3</td>
                <td>5,4</td>
                <td>5,5</td>
            </tr>
        </table>
（5）列表
<title>列表</title>
</head>
<body>
    <h2>无序列表</h2>
    <ul>
        <li>无序列表的特点：</li>
        <li>没有顺序</li>
        <li>每一个li都是一个选项</li>
        <li>每一个li都是独占一行</li>
        <li>ul里只能写li标签</li>
        <li>li标签中可以写其他标签</li>
        <li>
           <a href="#">这是标签的嵌套</a> 
        </li>
    </ul>
    <h2>有序列表</h2>
    <ol type="I" >
        <li>特点：</li>
        <li>和无序列表基本一致</li>
        <li>但是，选项有顺序</li>
        <li>符号可以改变，通过type属性</li>
        <li>但是不能推荐使用type，推荐css</li>
    </ol>

    <h2>自定义列表</h2>
    <dl>
        <dt>手机品牌:</dt>
        <dd>华为</dd>
        <dd>小米</dd>
        <dd>荣耀</dd>
        <dd>OPPO</dd>
        <dt>电脑品牌：</dt>
        <dd>华为</dd>
        <dd>小米</dd>
        <dd>联想</dd>
        <dd>dell</dd>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/13666.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！