web前端学习笔记（html）

最新推荐文章于 2024-10-08 17:48:41 发布

　　～

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量32

点赞数

文章标签：前端学习笔记

本文链接：https://blog.csdn.net/yhahab/article/details/131904702

版权

本文详细介绍了HTML的基本结构和常用标签，包括文档声明、标题标签（h1-h6）、段落、文本格式化、换行与水平线、图片、视频、音频、超链接、特殊字符、有序与无序列表、自定义列表、框架、表单元素以及CSS的基础应用，如行内样式、内部样式和外部样式的关联。

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

tt基本骨架：

<!DOCTYPE html>
<!-- 文档声明 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 注释快捷键：ctrl+/ -->
    我是一段文字
   

</body>

</html>

2.标题标签

<!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~h6   逐级减小  独占一行-->
    <h1>我是一个标题</h1>
    <h2>我是一个标题</h2>
    <h3>我是一个标题</h3>
    <h4>我是一个标题</h4>
    <h5>我是一个标题</h5>
    <h6>我是一个标题</h6>

</body>

</html>

3.段落标签

4.文本格式化标签

5.换行标签及水平线标签

6.图片标签

<!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>
    <!-- src  指向图片地址的  alt：图片地址发生错误时，用来对图片进行提示的  title：鼠标悬停时，显示的文字 align:设置图片与文字的对齐方式的-->
    <img src="../灰太狼.jpg" alt="我是灰太狼" title="我要去抓羊了" width="500px" border="20px" align="center">
</body>

</html>

7.路径

<!--

相对路径

../ 返回上一级

./ 当前级

-->

8.视频标签

<!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>
    <video src="images/video.mp4" controls="controls" loop="loop" autoplay muted></video>
</body>

</html>

controls：控制 loop：循环 autoplay muted：静音

9.音频标签


<!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>
    <audio src="images/music.mp3" controls loop></audio>
</body>

</html>

10.超链接

<!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>
 
    <a href="./11-超链接2.html" target="_blank">点击我进行跳转</a>
    <a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_8781526532986121071%22%7D&n_type=-1&p_from=-1"
        target="_blank">去百度</a>


</body>`

</html>

11.特殊字符

&nbsp：空格

&yen：¥

12.有序列表

</ol>

13.无序列表

</ul>

14.自定义列表

<dl>

<dd>web之家</dd>

<dd>web之家</dd>

</dl>

15.框架

这个时候他们会变得有些沉默，但是这并不是代表他们没有社交的能力，而是他们不想再逢场作戏。

注释： <!-- <iframe src="https://www.taobao.com" frameborder="1" width="800px" height="600px"></iframe>

代码：

<a href="https://www.taobao.com" target="nn">点击我进入淘宝</a>

</body>

16.表单

<body>
    <form action="#">
        <!-- placeholder   提示词 -->
        用户名：<input type="text" name="userName" autocomplete="off" placeholder="请输入正确的用户名：">
        密码：<input type="password" name="one" maxlength="6">
        <br>
        <input type="radio" name="r1" value="女" checked>女
        <input type="radio" name="r1" value="男">男

        <br>
        爱好：
        <input type="checkbox" name="love" value="sing" checked>爱唱歌
        <input type="checkbox" name="love" value="dance">爱跳舞
        <input type="checkbox" name="love" value="打豆豆">爱打豆豆

        <select name="xiala" id="" multiple>
            <option value="西安">西安</option>
            <option value="成都" selected>成都</option>
            <option value="南京">南京</option>

        </select>
        <!-- maxlength   最大长度 -->
        <textarea name="jianjie" id="" cols="30" rows="10" maxlength="20"></textarea>
        <br>
        <input type="file" name="wenjian" id="" multiple>
        <!-- <input type="button">  普通按钮 -->

        <input type="submit" value="tijaio">
        <br>
        <input type="email" name="number" id="">
        <input type="date" name="" id="">
        <input type="time" name="" id="">
        <input type="color" name="" id="">



        <button>提交</button>
    </form>

</body>

17.lable标签

选择框

<label for="sing">爱唱歌</label><input type="checkbox" name="love" id="sing"

01.

<!-- 1、所有表单必须有name属性

2、所有表单包含在form

3、单选、多选必须有value值 -->

<fieldset>：分区域

<legend>主要内容</legend>：包括内容

用户名:<input type="text" name="useName" maxlength="4" value="">

密码: <input type="password" name="pwd">

</fieldset>

<br>

<input type="hidden" name="hid">：隐藏
<input type="reset" disabled=""> 重置和禁用

<button>提交</button> 提交

02.表格标签

 <tr>
                <th width="">姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>

<tr>：行

<th>加粗列

<td>列

align="center" ：居中

03.单元格合并

rowspan="2" 行单元格合并

colspan="3" 列单元格合并

04.无语义标签

超链接

有语义标签

无语义

使用格式：

<div>我是一个盒子<a href="#">v发v发v</a></div>

<div>我是一个盒子</div>

<div>我是一个盒子</div>

<h1>ncdcjdc</h1>

无语义

使用格式

<span>我是一个小容器</span>

<span>我是一个小容器</span>

<span>我是一个小容器</span>

<span>我是一个小容器</span>

05.元素显示模式

06.全局属性

<a href="#"> dicdncd </a>

</form>

<div contenteditable="true">我是一个不允许编辑的盒子</div>

<div dir="rtl">我是一个不允许编辑的盒子</div>

<div hidden>我是一个不允许编辑的盒子cdcdcd</div>

<a href="#" hidden>cdjcdj</a>

07.css体验

<style>

div {

width: 300px;

height: 300px;

background-color: pink;

}

<style>

/* css书写规范：

选择器 {

属性名：属性值；

属性名：属性值；

}

*/

08.行内样式

<div style="width: 700px; height: 50px; background-color: pink;">我是一个盒子</div>

09.内部样式

 <style>
        div {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>

10.外部样式

先写一个css文件然后在html文件里用下面方法连接起来

<link rel="stylesheet" href="./13-外部样式.css">

　　～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫