web前端入门知识：1-2

最新推荐文章于 2024-03-08 15:45:02 发布
最新推荐文章于 2024-03-08 15:45:02 发布
阅读量358 收藏 1
点赞数
分类专栏： web前端 文章标签： 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50147784/article/details/129347804
版权

一：表单

<!--

表单：form的属性：

action 表单要提交的服务器的地址

-->

 <form action="./2-2 target.html">  </form>

<!-- 文本输入框

placeholder 关键字提示语

readonly 只读 一般伴随value使用

name数据要提交到服务器中，必须要为元素指定一个name属性

-->

用户名：<input type="text" placeholder="请输入关键字" name="username"><br>
<!-- 密码框 -->
密码框：<input type="password" name="password"><br>

<!-- 单选框

name属性定义多选一(没写name相当于是单独的两个数据，定义name相当于定义为一组数据)

checked属性定义默认选中

-->

单选框：<input type="radio" name="sex">男
       <input type="radio" name="sex">女<br/>

<!-- 多选框 checked属性定义默认选中 -->

多选框： <input type="checkbox" name="test" value="1">打游戏
        <input type="checkbox" name="test" value="2">敲代码
        <input type="checkbox" name="test" value="3" checked>打篮球
        <input type="checkbox" name="test" value="4">睡觉<br>

<!-- 下拉列表 -->

省份：<select name="select">
            <option value="l" disabled selected>--省份选择--</option>
            <option value="ll">陕西</option>
            <option value="lll">山西</option>
            <option value="广东">广东</option>
            <option value="lllll">河南</option>
            <!-- 下拉项 disabled定义失效 selected定义默认选中 -->
      </select><br>

<!-- 下拉框 -->

 <input type="number" min="1" max="20" step="2"><br>

<!-- 数字类型输入框 min定义最小数字范围 max定义最大数字范围 step定义输入字段的数字间隔 -->

数字/月份：<input type="number" min="1" max="12" step="5"><br>

<!-- 包含日期的输入框 --> 

<input type="date">

<!-- 文件域 -->

 <input type="file"><br>

<!-- 重置按钮 -->

 <input type="reset">

<!-- 按钮 伴随value使用 value属性定义按钮文字内容 -->

 <input type="button" value="正在加载"><br>

<!-- 提交按钮 value属性可以更改文字内容 -->

 <input type="submit" value="登录"><br>

<!-- 图像式提交按钮 伴随src使用 width定义图片的宽 height定义图片的高 -->

   <input type="image" src="./images/22c2b63d-39aa-4d7e-bb54-bbf00c0b7e8c.gif" width="100px" height="50px">

<!-- 可拖动文本框

textarea定义多行文本域 cols定义文本域的宽（每行的字符数） rows定义文本域的高（显示的行数） -->

 <textarea cols="50" rows="30"></textarea>

<!-- 颜色选择器 -->

<input type="color" name="" id="">

<!-- 属性：

1、在标签中可以设置属性（开始标签或自结束标签）

2、属性是一个名值对（x=y）（根据文档中的规定来写）（有的属性没有属性值；属性值使用''/""）

3、属性用来设置标签中的如何显示

4、属性跟标签名或其他属性应该使用空格隔开

-->

<!--

input：输入框标签

属性名:【type：输入框输入的类型】

属性值:【text:默认值，显示内容，

password:内容不可见，

radio:定义单选，实现单选还得需要name属性，name属性的值必须是一致的

checkbox:定义多选，checked属性定义默认选中

number:数字

date：日期

file：文件】

-->

练习1：我的登录个人界面

<!DOCTYPE html>
<html lang="en">
<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>表单练习4</title>
</head>
<body>
    <form action>
        <li>用户名：<input type="text" placeholder="请输入设置用户名"></li><br/>
        <li>密码框：<input type="password" placeholder="请输入密码"></li><br/>
        <li>确认密码：<input type="password" placeholder="请输入确认密码"></li><br/>
        <li>邮  箱：<input type="password" placeholder="请输入邮箱"></li><br/>
        <li>确认邮箱：<input type="password"placeholder="请输入确认邮箱"></li><br/>
        <li>性  别: <input type="radio" name="sex" checked>"男 "
                    <input type="radio" name="sex">"女 "
                     <br/></li>
         <li>来 自:<select name="select">
                        <option value="l" disabled="" selected="">--地区--</option>
                        <option value="l1">陕西</option>
                        <option value="ll1">山西</option>
                        <option value="ll11">广州</option>
                        <option value="ll111">深圳</option>
                    </select></li><br/>
        <li>爱   好：
            <input type="checkbox" name="test" value="1">"音乐"
                     <input type="checkbox" name="test" value="2" checked>"篮球"
                     <input type="checkbox" name="test" value="3">"足球"
                     <input type="checkbox" name="test" value="4">"读书"
                     <input type="checkbox" name="test" value="5">"游泳"
                     <input type="checkbox" name="test" value="6">"乒乓球"
                     <input type="checkbox" name="test" value="3">"看电视"
                     <input type="checkbox" name="test" value="4">"画画"
                     </li>
         <li>功能实现：<input type="submit" value="提交">&nbsp<input type="submit" value="重置">
         <input type="color" name="" id="">
     </form>
</body>
</html>

练习2：我的登录个人界面

<!DOCTYPE html>  
<html lang="en">
<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>
    <style>
        
    </style>
</head>
<body>
    <div>
        <p style="color: brown;">会员注册</p>
        
    <!--表单-->
        <form action>
           <li>用户名：<input type="text" placeholder="请输入设置用户名"></li><br/>
           <li>密码框：<input type="password" placeholder="请输入密码"></li><br/>
           <li>性  别: <input type="radio" name="sex" checked>"男 "
                       <input type="radio" name="sex">"女 "
                        <br/></li>
           <li>出生年月：<input type="date"></li>
           <li>爱   好：<input type="checkbox" name="test" value="1" checked>"体育"
                        <input type="checkbox" name="test" value="2">"旅游"
                        <input type="checkbox" name="test" value="3">"读书"
                        <input type="checkbox" name="test" value="4">"电脑"
                        <input type="checkbox" name="test" value="5">"音乐"
                        </li>
            <li>上传形象：<input type="text">  <input type="file"></li>
            
            <li> 个人简介：<textarea name="" id="" cols="40" rows="10" placeholder="--留下你的简介--"></textarea></li>
            <li> 友情链接 ：<select name="select">
                <option value="l" disabled="" selected="">--网易--</option>
                <option value="l1">网易1</option>
                <option value="ll1">网易2</option>
                <option value="ll11">网易3</option>
                <option value="ll111">网易4</option>
            </select></li>
            <input type="submit" value="提交">&nbsp<input type="submit" value="登录">
            <input type="color" name="" id="">
        </form>
    </div>
</body>
</htm40

二：表格

<!-- <table></table>定义表格标签 -->

<!-- <caption></caption>定义表格的标题 -->

<!-- <tr></tr>定义表格的行 -->

<!-- <th></th> <td></td>定义表格的列 -->

<!-- 颜色表示：

1.英文单词：red;

2.十六进制表示：#ff0000;

3.三原色：rgb（255,0,0）; -->

<!--

表格的相关属性：

属性名 属性值 描述

align left、center、right 对齐方式

boder ghghgh 1或"" 边框，默认为""，表示没有边框

cellpadding 像素值 单元边沿与其内容之间的空白，默认像素为1，内边距

cellspacing 像素值 单元格之间的空白，默认2像素

width 像素值或百分比 表格的宽度

-->

/* border-collapse:设置边框的合并 */

border-collapse: collapse;

/* 默认情况下元素在td中是垂直居中的 */

vertical-align: top;

/* 让box2在box1中垂直水平居中 */

margin: auto;

 <!-- 结构框架 -->
    <table>
        <caption></caption>
        <!-- 用于定义表格标签 -->
        <tr>
            <!-- 用于定义表格中的行，必须嵌套在<table>中 -->
            <td></td><!-- 用于定义表格中的单元格，必须嵌套在<tr>中 -->
        </tr>
    </table>
<!DOCTYPE html>
<html lang="en">

<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>111111</title>
</head>

<body>
    <table cellspacing="10" cellpadding="1" width="300px" height="100px" border="1" align="center">
        <caption>个人信息</caption>
        <tr>
            <th>姓名</th><!-- 表头单元格，字体会居中，加粗 -->
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>12</td>
            <td>男</td>
        </tr>
        <tr align="center">
            <td>小黄</td>
            <td>15</td>
            <td>男</td>
        </tr>
        <tr align="center">
            <td>小花</td>
            <td>12</td>
            <td>女</td>
        </tr>     
    </table>

</body>

</html>

合并单元格：

跨行合并：rowspan="合并单元格个的个数" ，rowspan表格的跨行属性，在n-1行删除对应的单元格

跨列合并：colspan="合并单元格个的个数" ，colspan表格的跨列属性，在同行删除n-1个单元格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
        合并单元格：
            跨行合并：rowspan="合并单元格个的个数"
            跨列合并：colspan="合并单元格个的个数" 
    -->
    <table border="2" cellspacing="0" align="center">
        <tr>
            <th width="100" height="30"></th>
            <th width="100" height="30" rowspan="4" bgcolor="black"></th>
            <th width="100" height="30"></th>
            <th width="100" height="30"></th>
            <th width="100" height="30"></th>
        </tr>
        <tr>
            <th width="100" height="30"></th>
            <!-- <th width="100" height="30"></th> -->
            <th width="100" height="30" colspan="3" bgcolor="blue"></th>
            <!-- <th width="100" height="30"></th> -->
            <!-- <th width="100" height="30"></th> -->
        </tr>
        <tr>
            <th width="100" height="30" rowspan="5" bgcolor="yellow"></th>
            <!-- <th width="100" bheight="30"></th> -->
            <th width="100" height="30"></th>
            <th width="100" height="30"></th>
            <th width="100" height="30"></th>
        </tr>
        <tr>
            <!-- <th width="100" height="30"></th> -->
            <!-- <th width="100" height="30"></th> -->
            <th width="100" height="30"></th>
            <th width="100" height="30" bgcolor="grey" colspan="2"></th>
            <!-- <th width="100" height="30"></th> -->
        </tr>
        <tr>
            <!-- <th width="100" height="30"></th> -->
            <th width="100" height="60" bgcolor="red" rowspan="2" colspan="3"></th>
            <!-- <th width="100" height="30"></th> -->
            <!-- <th width="100" height="30"></th> -->
            <th width="100" height="30"></th>
        </tr>
        <tr>
            <!-- <th width="100" height="30"></th> -->
            <!-- <th width="100" height="30"></th> -->
            <!-- <th width="100" height="30"></th> -->
            <!-- <th width="100" height="30"></th> -->
            <th width="100" height="30" rowspan="2" bgcolor="green"></th>
        </tr>
        <tr>
            <!-- <th width="100" height="30"></th> -->
            <th width="100" height="30"></th>
            <th width="100" height="30"></th>
            <th width="100" height="30"></th>
            <!-- <th width="100" height="30"></th> -->
        </tr>
        <tr>
            <!-- <th width="100" height="30"></th> -->
            <th width="100" height="30"></th>
            <th width="100" height="30" colspan="3" bgcolor="orange"></th>
            <!-- <th width="100" height="30"></th> -->
            <th width="100" height="30"></th>
        </tr>
    </table>
</body>

</html>

练习1：

<!DOCTYPE html>
<html lang="en">
<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>表格8</title>
    <style>
        
    </style>
</head>
<body>
    <table align="center" border="1"  cellspacing="0">
        <tr>
            <td width="100" height="50" align="center" colspan="10">我国科技有限公司</td>

        </tr>
        <tr>
            <td width="100" height="50" align="center" colspan="10">差旅游费销单</td>

        </tr>
        <tr>
            <td width="100" height="50" align="center" colspan="10">YD-R-093.02 单元：元</td>

        </tr>
        <tr>
            <td width="100" height="50" align="center"  rowspan="2"> 事件1</td>
            <td width="100" height="50" align="center"  > 报名人</td>
            <td width="100" height="50" align="center" colspan="2"></td>
            <td width="100" height="50" align="center" > 部门</td>
            <td width="100" height="50" align="center" colspan="2"></td>
            <td width="100" height="50" align="center" > 职位</td>
            <td width="100" height="50" align="center" colspan="2"></td>
        </tr>
        <tr>
            <td width="100" height="50" align="center"  > 出差单位</td>
            
            <td width="100" height="50" align="center" colspan="8"></td>
            
        </tr>

        <tr>
            <td width="100" height="50" align="center"  rowspan="3"> 事件2</td>
            <td width="100" height="50" align="center" > 自购/公司代购</td>
            <td width="100" height="50" align="center" > 起点</td>
            <td width="100" height="50" align="center" > 终点</td>
            <td width="100" height="50" align="center" > 交通工具</td>
            <td width="100" height="50" align="center" colspan="3" > 终止时间（年月日）</td>
            <td width="100" height="50" align="center" > 报销金额</td>
            <td width="100" height="50" align="center" > 财务核定金额</td>
        
        </tr>
        
        <tr>
            
            <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center" colspan="3"  ></td>
            <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center" ></td>
            
        </tr>
        <tr>
            
            <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center"  colspan="3"></td>
            <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center"></td>
           <!-- <td width="100" height="50" align="center" ></td>
             <td width="100" height="50" align="center" ></td>
            <td width="100" height="50" align="center" ></td> -->
            
        </tr>

    </table>
</body>
</html>

练习2

<!DOCTYPE html>
<html lang="en">
<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>表格3</title>
</head>
<body>
    <table border="1" cellspacing="0" align="center">
        <tr>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px" rowspan="4" bgcolor="yellow">1</td>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
        </tr>
        <tr>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px" colspan="3" bgcolor="cyan">1</td>
           <!--
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>  -->
        </tr>
        <tr>
            <td width="100px" height="50px" rowspan="6" bgcolor="blud">1</td>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
           <!--  <td width="100px" height="50px">1</td>
            -->
        </tr>
        <tr>
            
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px"  colspan="2" bgcolor="green">1</td>
             <!-- <td width="100px" height="50px">1</td>
                
                <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>  -->
        </tr>
        <tr>
            <td width="100px" height="50px" colspan="3" rowspan="2" bgcolor="width">1</td>
            <td width="100px" height="50px">1</td>
            <!-- <td width="100px" height="50px">1</td> 
             <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td> --> 
        </tr>
        <tr>
            <td width="100px" height="50px" rowspan="3" bgcolor="red">1</td>
            <!-- <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td> -->
        </tr>
        <tr>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
            <!-- <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td> -->
        </tr>
        <tr>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td>
            <!-- <td width="100px" height="50px">1</td> -->
            <!-- <td width="100px" height="50px">1</td> -->
        </tr>
        <tr>
            <td width="100px" height="50px">1</td>
            <td width="100px" height="50px" colspan="3" bgcolor="gray">1</td>
            <td width="100px" height="50px">1</td>
            <!-- <td width="100px" height="50px">1</td>
            <td width="100px" height="50px">1</td> -->
        </tr>
      
        
  
        </table>
    </body>
</html>

三：标签

<!--

标签语义：

标签的含义：这个标签是用来干嘛的

-->

<!--

标题标签：<h1>-<h6>，一般网页中仅出现一次h1

特点：1、字体会加粗，字号会一次变大

2、一个标题独占一行

-->

    <h1>我是标题一</h1>
    <h2>我是标题二</h2>
    <h3>我是标题三</h3>
    <h4>我是标题四</h4>
    <h5>我是标题五</h5>
    <h6>我是标题六</h6>

<!--

段落标签：p是一个文本级的标签，p里面只能放文字、图片、表单元素。

p标签中只能包含行内元素不能包含块级元素

-->

<p style="width: 200px;height: 200px; >我是第一个段落标签</p>

<!-- 水平线标签 -->

<hr>

<!-- 字体加粗 -->

<b>字体加粗</b>

<strong>字体加粗</strong>

<!-- 字体倾斜 -->

<i>字体倾斜</i>

<em>字体倾斜</em>

<!-- 删除线 -->

<s>删除线</s>

<del>删除线</del>

<!-- 下划线 -->

<u>下划线</u>

<ins>下划线</ins>

<!--

超链接：<a href=""></a>

#：代表一个空链接，不做任何跳转

href：去往的路径，targe打开方式 _self:在自身打开 _blank:在新页面打开

去掉a链接的字体下划线 text-decoration: none;

-->

<a href="">XX</a>

<!--

图片标签：src图片来源，alt图片不显示时显示的文字，title提示文本 鼠标放在图片上显示的文字，border图片边框

-->

<!-- 1.相对路径：./同一文件夹找图片，../跳出上层找图片，../../跳出两层找图片 -->

<img src="./1.gif" alt="正在加载中..." width="400px" height="400px">

<!-- 2.绝对路径：网页地址 -->

<img src="https://---" alt="请稍后。。。" width="400px">

<!--

a 超链接标签

特点：

1、默认有一个下划线 去掉下划线：text-decoration:none;

2、不会继承父级的颜色样式

功能：

1、跳转页面

href：要跳转页面的地址(没地址的情况下可以写一个#)

#：代表一个空链接 不做任何跳转

既可以给绝对地址也可以给本地地址

target：目标点

_blank 在新页面打开

_self 在本页打开(默认的)

2、锚点

在href的值里写上#name【name对应的id的值】

-->

<div style="color:red;">
        <a href="https://www.baidu.com/" target="_blank">我是a标签</a>
</div>

<!-- 输入框标签 -->

<input type="text" style="width: 200px;height: 50px;">

<!-- 无序列表 -->

<ul>
     <li style="list-style:lower-roman,a;">床前明月光</li>
     <li>疑是地上霜</li>
     <li>举头望明月</li>
     <li>低头思故乡</li>
</ul>

<!-- 有序列表 -->

<ol start="3">
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
</ol>

<!-- 自定义列表 -->\

<dl>
       <dt>静夜思</dt>
       <dd>床前明月光</dd>
       <dd>疑是地上霜</dd>
       <dd>举头望明月</dd>
       <dd>低头思故乡</dd>
</dl>

<!-- 注释标签：ctrl+/ -->

练习1

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        h1{
            color: #000;


        }
    </style>
</head>
<body>
    <h1 align="center"><b>水果展示</b></h1>
    <hr>
    <table  align="center">
        <tr>
            <td width="100px" height="30" align="center" colspan="2" rowspan="4"><img width="100" height="100" src="https://lmg.jj20.com/up/allimg/tp02/1Z91G456313237-0-lp.jpg" alt="正在加载"></td>
            <td width="100px" height="30" align="center" >名称：香蕉</td>
            <td width="100px" height="30" align="center" colspan="2" rowspan="4"><img width="100" height="100" src="https://lmg.jj20.com/up/allimg/tp02/1Z91G456313237-0-lp.jpg" alt="正在加载"></td>
            <td width="100px" height="30" align="center" >名称：菠萝</td>
            <td width="100px" height="30" align="center" colspan="2" rowspan="4"><img width="100" height="100" src="https://lmg.jj20.com/up/allimg/tp02/1Z91G456313237-0-lp.jpg" alt="正在加载"></td>
            <td width="100px" height="30" align="center" >名称：香蕉</td>
    

        </tr>
       <tr>
            <td width="100px" height="30" align="center" ><s>原价：19.50</s></td>
            <td width="100px" height="30" align="center" ><s>原价：19.50</s></td>
            <td width="100px" height="30" align="center" ><s>原价：19.50</s></td>

        </tr>

        <tr>
            <td width="100px" height="30" align="center" >现价：9.8</td>
            <td width="100px" height="30" align="center" >现价：9.8</td>
            <td width="100px" height="30" align="center" >现价：9.8</td>

        </tr>

        <tr>
            <td width="100px" height="30" align="center" >产地：海南</td>
            <td width="100px" height="30" align="center" >产地：海南</td>
            <td width="100px" height="30" align="center" >产地：海南</td>

        </tr>
        <tr>
            <td width="100px" height="30" align="center" >名称：荔枝</td>
            <td width="100px" height="30" align="center" colspan="2" rowspan="4"><img width="100" height="100" src="https://lmg.jj20.com/up/allimg/tp02/1Z91G456313237-0-lp.jpg" alt="正在加载"></td>
            <td width="100px" height="30" align="center" >名称：梨</td>
            <td width="100px" height="30" align="center" colspan="2" rowspan="4"><img width="100" height="100" src="https://lmg.jj20.com/up/allimg/tp02/1Z91G456313237-0-lp.jpg" alt="正在加载"></td>
            <td width="100px" height="30" align="center" >名称：葡萄</td>
            <td width="100px" height="30" align="center" colspan="2" rowspan="4"><img width="100" height="100" src="https://lmg.jj20.com/up/allimg/tp02/1Z91G456313237-0-lp.jpg" alt="正在加载"></td>
    

        </tr>
       <tr>
            <td width="100px" height="30" align="center" ><s>原价：19.50</s></td>
            <td width="100px" height="30" align="center" ><s>原价：19.50</s></td>
            <td width="100px" height="30" align="center" ><s>原价：19.50</s></td>

        </tr>

        <tr>
            <td width="100px" height="30" align="center" >现价：9.8</td>
            <td width="100px" height="30" align="center" >现价：9.8</td>
            <td width="100px" height="30" align="center" >现价：9.8</td>

        </tr>

        <tr>
            <td width="100px" height="30" align="center" >产地：海南</td>
            <td width="100px" height="30" align="center" >产地：海南</td>
            <td width="100px" height="30" align="center" >产地：海南</td>

        </tr>

    </table>
</body>
</html>

四：行内元素 块级元素 行内块元素

块级元素：

宽度默认100%；默认独占一行；可以直接设置 宽 高 边距 填充

1.块级元素(block)：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，

常用于网页布局和网页结构的搭建。

常见的块元素有h1~h6、p、div、ul、ol、li等，其中div标签是最典型的块元素。

块级元素的特点：

（1）总是从新行开始。

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%。

（4）可以容纳内联元素和其他块元素。

行内元素

宽度自动；默认并排显示，不能直接设置 宽 高 边距 填充

2.行内元素(inline)：行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，

一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中span标签最典型的行内元素。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

行内块元素：

宽度自动；默认并排显示，可以直接设置 宽 高 边距 填充，自带2-3像素的边距

3.行内块元素（inline-block）：在行内元素中有几个特殊的标签，可以对它们设置宽高和对齐属性，称它们为行内块 元素。

常见的行内块元素有img、input、td等。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

三种转换：

<!--

元素->行内： display:inline;

元素->块： display:block;

元素->行内块: display:inline-block;

-->

<a href="#" style="display: block;width: 200px;height: 200px;background-color: blue;">百度</a>
    <div style="display: inline;">的v干哈日记和vi覅吧</div>
    <div style="display: inline-block;">的v干哈日记和vi覅吧</div>

五：CSS样式基础

   .div {
            /* 宽 */
            width: 310px;
            /* 高：一整个盒子的高 字顶头对齐 */
            height: 200px;
            /* 行高：一行的高 字在中间 */
            line-height: 100px;
            /* 背景颜色 */
            background-color: blue;
            /* 字体颜色 */
            color: aliceblue;
            /* 字体大小 */
            font-size: 20px;
            /* 字体样式 */
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            /* 字体加粗 */
            font-weight: bold;
            /* 字体倾斜 */
            font-style: italic;
            /* 字体对齐方式：left、center、right */
            text-align: center;
            /* 
                边框：宽度 实线 颜色 
                    实线：solid double(双实线) 
                    虚线：dotted dashed
            */
            border: 10px solid black;
            /* 字间距 */
            letter-spacing: 10px;
            /* 词间距：但是设置之前得在要设置的字之间添加空格 */
            word-spacing: 10px;
            /* 设置文本阴影：水平方向偏移量，垂直方向偏移量，阴影面积，阴影颜色 */
            text-shadow: 30px 30px 1px brown;
        }
————————————————————————————————————————————————————————————————————————————
        p {
            /* 首行缩进 */
            text-indent: 2em;
        }

        a {
            /* 
                字体下划线：none \ 
                          underline(下划线) \
                          line-through(删除线) \ 
                          overline(上划线)
            */
            text-decoration: none;
        }
—————————————————————————————————————————————————————————————————————————————
        ul {
            /* 
                列表的标记样式
                    none 不使用任何项目符号
                    disc 默认值，实心圆
                    circle 空心圆
                    square 实心矩形
                    decimal 数字1、2、3、4、5
                    decimal-leading-zero 以0打头的数字，01、02、03、04、05
                    lower-alpha 小写英文字母，a、b、c、d、e
                    upper-alpha 大写英文字母，A、B、C、D、E
                    lower-roman 小写罗马数字，ⅰ、ⅱ、ⅲ、ⅳ、ⅴ
                    upper-roman 大写罗马数字，Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ
            */
            /* list-style-type: none; */
            /* 
                标记的位置：list-style-position 
                    inside（放置在文本以内）
                    outside(位于文本的左侧,列表项目标记放置在文本以外)
            */
            list-style-position: inside;
 }

        input {
            /* 绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 */
            outline: none;
            border: none;
            border-bottom: 2px solid black;
        }

<!--

取消行内/行内块元素的边距:

1、取消行内/行内块元素之间的空格

2、把父元素的font-size:0;

-->

<div class="box">
        <a href="#">超链接</a><a href="#">超链接</a>
        <a href="#">超链接</a>
        <a href="#">超链接</a>
        <a href="#">超链接</a>
    </div>

<!--

css的vertical-align属性使用场景：经常用于设置图片或者表单(行内块元素)和字垂直对齐

官方解释：用于设置一个元素的垂直对齐方式，但是他只针对于行内元素或者行内块元素有效

vertical-align常用属性值

1、baseline：默认值 元素放置在父元素的基线上

2、top：把元素的顶端与行中最高元素的顶端对齐

3、middle：把此元素放置在父元素的中部

4、bottom：把元素的顶端与行中最低的元素的顶端对齐

-->

<img src="./垂直对齐方式.jpg" alt="">
    <span class="p">垂直对齐方式</span><br>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <span class="p">垂直对齐方式</span><br>

外边距:

/*

外边距: 可以设置1-4个值

10px：【上下左右:10px】

10px 20px：【上下:10px , 左右:20px】

10px 20px 30px：【上:10px , 左右:20px , 下:30px】

10px 20px 30px 40px：【上:10px , 右:20px , 下:30px , 左:40px】

也可以直接设置:margin-top

margin-right

margin-bottom

margin-left

*/

margin: 10px 20px 30px 40px;

内边距：

/*

内边距: 可以设置1-4个值

10px：【上下左右:10px】

10px 20px：【上下:10px , 左右:20px】

10px 20px 30px：【上:10px , 左右:20px , 下:30px】

10px 20px 30px 40px：【上:10px , 右:20px , 下:30px , 左:40px】

也可以直接设置:padding-top

padding-right

padding-bottom

padding-left

*/

 padding: 10px 20px 30px 40px;

CSS三种引入方式

<!-- css：3种引入方式 【行内样式 内联样式 外部引入】-->

css层叠样式

1.行内样式：在开始标签里面使用style属性引入

2.内链样式：在head标签里面使用style标签引入

3.外部引入：在head标签里面使用link标签引入后缀名为.css的文件

引入方式的优先级：

!important > 行内样式 > 内部样式 = 外部引入

外部样式和内部样式有“就近原则”，以最后出现的为准

<!-- 1、行内样式 ：直接在html元素内使用style -->

    <div style="width:100px;height:100px;background:pink;"></div>

<!-- 2、内联样式/内部样式-->

<p>我是内联样式</p>

<!-- 内联样式/内部样式：整体放在head标签 在style标签内写CSS代码 作用仅在本页 -->
    <style>
        p {
            font-size: 30px;
            background-color: tomato;
        }
    </style>

<!-- 3、外部引入/外部样式 -->

<span>我是外部引入样式</span>

<!-- 外部引入/外部样式：
            使用link标签引入外部样式
            link标签用于定义文档与外部资源的关系，可用来链接外部样式表。
        link标签有三个重要的属性：
            type ：定义被链接文档的MIME类型
            rel ：定义当前文档和被链接文档之间的联系
            href ：定义被链接文档的位置
        link标签的注意事项：
            只能出现在head部分，可以使用多次
    -->
    <link rel="stylesheet" href="./ xx.css">

Delete102
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端——一个好看的表单
qqqweiweiqq的博客
12-02 913
前端
Web前端攻城狮培养计划-前端零基础入门
09-21
在“Web前端攻城狮培养计划-前端零基础入门”这个学习资源中，你将踏上成为一名优秀的Web前端开发者的旅程。这个课程专为初学者设计，无论你是否具备编程背景，都能逐步掌握Web前端开发的核心技能。以下是这个课程...
Web API 03
weixin_62443949的博客
03-26 333
web api
Web前端开发—html基础（3）
qq_45709187的博客
04-12 1853
十 表单 1 简单的表单示范 2 自动填充表单——autocomplete 3 指定目标显示位置 4 设置默认值——value 5 自动聚焦——autofocus 6 禁用元素——disabled 7 禁止修改——readonly 8 将文本包裹起来——label元素 9 label里面的for元素 10 fieldset元素——可以将表单内相关元素进行分组 11 legend元素——为fieldset定义说明文字 ...
Web前端知识CSS（文本框和表单按钮不对齐现象、CSS用户界面属性、CSS块级格式化、HTML参考手册）
m0_72686827的博客
08-15 1002
按钮​​按钮：按钮
【HTML 教程系列第 22 篇】 HTML 中的 input 标签，看这一篇就够了
热门推荐
“Allen Su”的博客
11-02 1万+
一：什么是 HTML 中的 input 标签 。 二：input 标签 type 的取值 text、password、radio、checkbox、file、button、submit、reset。 三：如何为单选框，复选框设置默认选项。 四：使用单选框的两个注意事项。
holbertonschool-web_front_end:专业-Web Stack编程―前端
04-17
在“holbertonschool-web_front_end: 专业-Web Stack编程-前端”这个项目中，我们专注于学习和掌握Web开发的前端技术。前端是构建Web应用程序的重要...这个项目可能也会涉及这些内容，让学生全面掌握Web前端开发技能。
web前端基础——CSS入门
01-20
Web前端开发中，CSS（Cascading Style Sheets）是一种用于表现HTML或XML文档样式的样式表语言，对于网页设计和用户体验至关重要。本文将详细介绍CSS入门的基础知识，包括CSS的引入方式、选择器、字体样式、外观属性...
python-web-guide：pythongolang -web入坑指南
02-03
【标题】：“Python-Web-Guide：Python与Golang Web开发入门教程” 【描述】：“Python-Web-Guide：Python与Golang -Web入坑指南”是一个专为初学者设计的资源，旨在帮助那些对使用Python和Golang进行Web开发感兴趣...
Web安全入门-task2(upload-labs1-10)
10-21
Web安全入门-task2(upload-labs1-10) 本资源主要讲解了Web安全入门的基础知识，通过Upload Labs的1-10实验，涵盖了Web安全中的多个方面。 一、文件上传限制绕过 * 白名单检测：使用substring()函数裁剪字符串，...
vue前端富文本框使用（wangeditor富文本框）
Andy的博客
03-02 2223
a.在组件components内定义文件QuillEditor.vue文件。第二步：创建富文本编辑器组件；我们自己在二次封装一下该组件方便使用。可以直接在要使用页面引入该组件或者全局注册该组件。第一步：使用node引入wangeditor富文本编辑器插件。b.QuillEditor.vue文件代码。
web前端之文本
m0_75008371的博客
07-10 1503
文本，flex问题，float问题，2D，3D，动画
HTML + CSS 连载 | 35 - 单选、多选框和 textarea
JingnanJia的博客
10-31 2023
input 元素可以实现单选框的效果，结合 lable 元素，只需要将 type 设置为 radio 就表示为单选框，但是同时需要设置单选框的文本，文本内容直接写在 input 元素的后面即可；来实现多选框，除了 type 属性外，多选框也需要设置 name 属性，对于同一类型的 checkbox，name 属性要保持一致。点击按钮，页面会发生跳转，可以从地址栏中看到我们向后端发送的数据内容，可以看到 value 属性的值就是我们向服务器发送的数据。
前端：下拉选项框及文本框的实现
fuyuo的博客
06-17 8193
下拉选项框的实现以及文本框的实现，以及要实现这2个功能的所需标签的介绍
HTML input 属性笔记
xiaotuwai8的博客
11-27 2941
输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。非常值得注意的一个，通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。其实最重要的还是value值，提交到处理页的也就是value。不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。
web前端 Antd-Checkbox 多选框纵向排列
吕氏春秋i
08-31 2381
这显然不是我要的效果 但是和功能差不多 都是多选框 现在要决绝的就是把``横向排列``改为``纵向排列`` 有了目标就容易解决了问题了 从这个问题触发 去找答案：
Web密码输入框：安全性、可用性与最佳实践全解析
最新发布
编码行者的博客
03-08 864
在Web开发中，保护用户密码的安全性至关重要。本文全面解析了的使用技巧、属性的应用、视觉反馈、防止密码泄露、提高可访问性、客户端验证等方面的最佳实践，并结合实际代码示例。
前端基础input输入框主要属性
m0_58849641的博客
09-17 1万+
　1、单行输入框< input type"text"/>。单行文本的输入框常用来输入简单的信息，例如用户名、账号等等。具体的属性有：name、value、maxlength。 　　2、密码输入框<input type=”password”/>。其内容以圆点的形式显示。 　　3、但选按钮<input type-”radio”/>。单选按钮用于单项选择，在定义单选按钮时必须为同一组中的选项制定相同的name值，可以对单选按钮应用checked属性，制定默认选中项。 　　4、复
HTML的常用文本框和基本语法
2303_79203970的博客
10-07 3449
HTML指的是超文本标记语言，是一种用于创建网页的标准标记语言。HTML使用标签来描述网页中的各种元素，比如标题、文本、图像、链接等。HTML文件可以通过浏览器读取和渲染，使用户能够查看网页内容。HTML也包含了一些元数据，如标题、描述和关键字等，这些元数据可以帮助搜索引擎更好地理解和索引页面内容。HTML的标准由万维网联盟（W3C）制定和维护。
BootStrap前端框架入门：btn-toolbar按扭组解析
该资源主要介绍了BootStrap前端框架中的btn-toolbar按钮组的使用方法，以及BootStrap的基础知识和特点。通过btn-toolbar，开发者可以在网页中创建分组的按钮，实现更美观和功能丰富的用户界面。 Bootstrap是Twitter...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值