前端从入门到入土

m0_62102386

已于 2023-07-05 07:23:48 修改

阅读量67

点赞数

文章标签：前端

于 2023-07-04 22:47:01 首次发布

本文链接：https://blog.csdn.net/m0_62102386/article/details/131544845

版权

html篇

标题标签

在HTML中标题标签好h1-h6,数字越小级别越高

<body>
    <h1>第一深情</h1>
    <h2>王宝强</h2>
    <h3>电影作品</h3>
    <h4>树先生</h4>
    <h5>八角笼中</h5>
    <h6>一个人的武林</h6>
</body>
</html>

段落标签

<p>标签是一个块级标签，主要来描述一个段落。

   <p>
        作者：余光中<br>
        小时候<br>
        乡愁是一枚小小的船票<br>
    </p>

列表标签
有序列表：<ul>标签
无序列表：<ol>标签
自定义列表:<dl>标签

有序列表和无序列表的列表项标签为<li>

有序列表

<p>水果</p>
    
    <ol type="A">
        <li>香蕉</li>
        <li>苹果</li>
				<li>草莓</li>
    </ol>

无序列表

<ul >
        <li>第一深情</li>
        <li>邮科院</li>
        <li>熊志昂</li>
        <li>渣男韩文昊</li>
    </ul>

自定义列表

<p>选择题</p>
    <dl>
        <d> 1.你晚上吃什么</dt>
        <dd>A.面条</dd>
        <dd>B.蛋炒饭</dd>
        <dt>2.晚上几点睡觉</dt>
        <dd>A.11</dd>
        <dd>B.修仙</dd>
    </dl>

dt:描述列表的标题

dd:定义标题对应的内容

表格标签

作用：给数据添加表格的形式

<!-- 定义一个表格 -->
    <table border="2px solid" bgcolor="" align="center" cellpadding="10" cellspacing="2" >
        <!-- 表格的标题 -->
        <caption>课程表</caption>
        <!-- 第一行 -->
        <tr bgcolor="pink">
            <th>时间</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期天</th> 
        </tr>
        <tr>
            <td rowspan="3">上午</td>
            <td>html</td>
            <td>html</td>
            <td>html</td>
            <td>html</td>
            <td>html</td>
            <td rowspan="3">休息</td>
            <td rowspan="3">休息</td>
        </tr>
       
</table>

tr标签表示表格中的一行

td标签表示一个单元

表格标签的一些基本属性

cellspacing:表示个单元格之间的空隙
cellpadding:表示单元格与单元格边界的距离
表单标签
input标签的属性

属性值	描述
button	定义可点击按钮
checkbox	定义复选框
text	单行文本输入框常用于输入简短的信息
password	输入密码的输入框
email	输入地址的文本输入框
radio	用于单项选择
submit	提交信息
reset	重置信息
image	图像形式的提交
file	文件提交

<form action="#" method="post">
    <!-- 用户名 -->
    用户名：<input type="text" placeholder="请输入用户名" autofocus><br>
    密&emsp;码：<input type="password" placeholder="请输入密码" required><br>
    <!-- 邮箱 -->
    邮&emsp;箱：<input type="email" name="email"><br>
    性&emsp;别：<input type="radio" name="sex">男&nbsp;&emsp;&emsp;<input type="radio" name="sex">女<br>
    爱&emsp;好：<input type="checkbox" name="ball">唱&emsp;&emsp;
                <input type="checkbox" name="ball">跳&emsp;&emsp;
                <input type="checkbox" name="ball">rap&emsp;&emsp;
                <input type="checkbox" name="ball">篮球&emsp;&emsp;<br>

                <!-- 下拉列表 -->
                <!-- name:下拉列表的名称  id：选择器-->
                家&emsp;乡：<select name="城市" id="">
                    <option value="">武汉</option>
                    <option value="">上海</option>
                    <option value="">北京</option>
                    <option value="">深圳</option>
                    <option value="">广州</option>
                    <option value="">云南</option>
                   
                </select><br>
                <!-- 文本域 -->
                <label for="" style="vertical-align:top ;"> 简&emsp;介</label>   
                <textarea name="" id="" cols="20" rows="6" style="resize:none ;"></textarea><br>
                <!-- 普通按钮 -->
                <!-- 方式一 -->
                <input type="button" value="普通按钮1">
                <!-- 方式二 -->
                <button type="button">普通按钮2</button><br>
                <!-- 提交按钮 -->
                <!-- 方式一 -->
                <input type="submit" value="提交按钮1">
                <!-- 方式二 -->
                <button type="submit">提交按钮2</button><br>
                <!-- 重置按钮 -->
                <!-- 方式一 -->
                <input type="reset" value="重置按钮1">
                <!-- 方式二 -->
                <button value="reset">重置按钮2</button><br>
                <!-- 图片按钮 -->
                <!-- 仅有一种方式 -->
                <input type="image" src="../01.jpg" width="50" height="50">
                
    </form>

css篇

概念：css样式表或层叠样式表

css特性:

css层叠性

概念：所谓的层叠性是指如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性覆盖。遵循就近原则。
css继承性

概念：子标签会继承父标签的某种样式，如文本颜色和字号。

css中的选择器

类选择器

<style>
p{
        color: pink;
        font-size: 30px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .one{
        color: blueviolet;
        font-size: 30px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .two{
        color: yellow;
        font-size: 50px;
    }
    </style>
</head>
<body>
<p>今天很深情</p>
    <p class="one">明天还是深情</p>
    <p class="two">第一深情</p>

    <!-- 简写生成一个自带选择器的标签（默认情况下生成的是div标签） -->
    <div class="three"></div>
    <!-- p+类选择器的名称+enter -->
    <p class="four"></p>
    <!-- 类选择器的名称+$+"*n" -->
    <!-- .1$*5 -->
    <div class="11"></div>
    <div class="12"></div>
    <div class="13"></div>
    <div class="14"></div>
    <div class="15"></div>
    <!-- .div$*4 -->
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <!-- p.p$*3 -->
    <p class="p1"></p>
    <p class="p2"></p>
    <p class="p3"></p>
</body>

id选择器

<style>
        #two{
            color: rgba(255, 170, 0, 0.975);
            font-size: 60px;

        }
    </style>
</head>
<body>
    <div>
        <p>给第二个p标签设置选择器</p>
        <p id="two">我设置了id选择器</p>
    </div>
    <p id="three"></p>
    <p id="three"></p>
    <p id="three"></p>
    <p id="three"></p>
</body>

通用选择器

<style>
        /* 通配符给页面所有标签设置属性 */
        *{
            color: aqua;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>第</p>
    <span>一</span><br>
    <label for="">深</label>
    <h2>情</h2>
</body>

组合选择器

<style>
        /* 给p标签和h2设置属性 */
        p,h2{
            color: aqua;
            font-size: 40px;
        }
        .one,.two{
            color: blue;
            
        }

    </style>
</head>
<body>
    <p class="one">第一</p>
    <label for="">22222</label>
    <h2>深情</h2>
    <h4>66666</h4>
    <p>7777</p>
    <p class="two">8888</p>
</body>

后代选择器

<!-- 给div的后代span设置属性 -->
    <style>
        .p1 .p2{
            color:blue;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="p1">
        <!-- span是div儿子 -->
        <span>11</span>
        <p>222
            <span class="p2">7777</span>
        </p>
        <div>
        <p>333333
            <!-- 是p的儿子，也div的孙子 -->
            <span>4444
                <span class="p2">6666</span>
            </span>
        </p>
        </div>
    </div>
</body>

子代选择器

<style>
        div>span{
            color: aquamarine;
        }
    </style>
    </head>
<body>
    <div>
        <p>1111</p>
        <p>2222
            <!-- 是 -->
            <span>33333</span>
        </p>
        <!-- 是p标签的儿子 -->
        <span>44444</span>
    </div>

相邻兄弟选择器

<style>
        /*   */
        li+li{
            color: brown;
        }
    </style>
</head>
<body>
    <!-- ul>li*7 -->
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        
    </ul>
    <ol>
        <li>444</li>
        <li>555</li>
        <li>666</li>
    </ol>
</body>

伪类选择器

<!-- hover在link和visited后才会生效
          active在hover后面才会生效 -->
    <style>
        /* 超链接未访问时的状态 */
        a:link{
            color: pink;
            /* 下划线 */
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            text-align:right;
            font-style: italic;
        }
        /* 超链接访问过后的状态 */
        a:visited{
            color: aquamarine;
        }
        /* 超链接鼠标点击未弹起 */
        a:hover{
            color: chartreuse;
            cursor: pointer;
        }
        /* 鼠标点击弹起状态 */
        a:active{
            color: black;
        }
    </style>
</head>
<body>
    <a href="<http://www.baidu.com>">点击进入百度</a>
    
</body>

属性选择器

属性选择器一共有7种写法

1.某某[属性]

2.某某[属性=属性值]

3.某某[属性^=属性值]

4.某某[属性$=属性值]

5.某某[属性*=属性值]

6.某某[属性~=属性值]

7.某某[属性|=属性值]

<style>
			.demo {
				width: 300px;
				border: 1px solid #ccc;
				padding: 10px;
				overflow: hidden;
				margin: 20px auto;
			}
 
			.demo a {
				float: left;
				display: block;
				height: 50px;
				width: 50px;
				border-radius: 10px;
				text-align: center;
				background: #aac;
				color: blue;
				font: bold 20px/50px Arial;
				margin-right: 5px;
				text-decoration: none;
				margin: 5px;
			}
       </style>
 
            <div class="demo">
			<a href="<http://www.baidu.com>" target="_blank" class=" links item first" id="first" title="link">1</a>
			<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
			<a href="sites/file/test.html" class="links item" title="link-1 aa" lang="zh-cn">3</a>
			<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
			<a href="sites/file/image.jpg" class="links item" title="link-23 aa">5</a>
			<a href="<mailto:baidu@hotmail>" class="links item" title="website link" lang="zh">6</a>
			<a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
			<a href="/abc.pdf" class="linksitem" title="close the website" lang="en-zh">8</a>
			<a href="abcdef.doc" class="links item" title="<http://www.sina.com>">9</a>
			<a href="abd.doc" class="linksitem last" id="last">10</a>

</div>