html和css基础练习

vscode快捷键

alt + b 在浏览器中打开
alt + shift + b 在其他浏览器打开

ctrl + / 注释
ctrl + y 快捷键删除

参考文章

https://www.bilibili.com/video/BV1m84y1w7Tb

基础html标签

img:图像,title:头部文字,body:主体,hr:段落行,span:行,a:超链接,video:视频,p:文件段 等等

DOCTYPE html>


<html lang="en">
<head>
    
    <meta charset="UTF-8">

    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈:中国底气 新思想夯实大国粮仓title>
head>
<body>
    

    
    
    <img src="img/news_logo.png"   > 新浪政务 > 正文
    <h1>焦点访谈:中国底气 新思想夯实大国粮仓h1>

    
    <hr>
    2023年03月02日 21:50 央视网
    <hr>
    
    
body>
html>

css和html基础

css选择器

html和css基础练习_第1张图片

DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈title>

    
    <style>
        h1 {
            /* color: rgb(0, 255, 0); */
            color: #5567C2;
        }

        /* span {
            color: gray;
        } */

        /* 类选择器 */
        /* .cls{
            color: gray;
        } */


        /* id选择器,id不能重复 */
        #time {
            color: gray;
            font-size: 14px; 
            /* 设置字体大小 */
        }

        a {
            /* 设置黑色 */
            color: black;

            /* 文本 */
            text-decoration: none;
        }

        
        p {
            /* 首行缩进 */
            text-indent: 24px;

            /* 设置行高 */
            line-height: 30px;
        }

        #plast {
            text-align: right;
        }
        #center {
            width: 65%;
            /* margin:0% 17.5% 0% 17.5% ;  */
            /* 上 右 下 左 */
            margin: 0% auto;
        }




    style>


    
    

head>
<body>

    <div id="center" >
        <img src="img/news_logo.png"   > <a href="https://gov.sina.com.cn/" target="_self">新浪政务a>  > 正文
        <h1>焦点访谈:中国底气 新思想夯实大国粮仓h1>
    
        
        
    
    
        
    
        <hr>
        <span id="time">2023年03月02日 21:50 span><span><a href="https://www.cctv.com/" target="_blank">央视网a>span>
        <hr>
        
        
    
        
    
        
        
    
        
        <video src="video/1.mp4" controls width="950">video>
    
        
        
    
    
        
        
        <p><b>央视网消息b> (焦点访谈):p>
        
        <p>人勤春来早,春耕农事忙。立春之后,由南到北,我国春耕春管工作陆续展开,春天的田野处处生机盎然。p>
    
        <img src="img/1.jpg" alt="">
        <p>今年,我国启动了新一轮千亿斤粮食产能提升行动,这是一个新的起点。2015年以来,我国粮食产量连续8年稳定在1.3万亿斤以上,人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤,粮食产量提高了1500亿斤。p>
    
        <img src="img/2.jpg" alt="">
        <p>测试。p>
        
        <p id="plast">责任编辑:王树淼 SN242p>
    
    
    
        
    div>
    
body>
html>

表单,列表等

表格

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>HTML-表格title>
    <style>
        td {
            text-align: center; /* 单元格内容居中展示 */
        }
    style>
head>
<body>
    
    <table border="1px" cellspacing="0"  width="600px">
        <tr>
            <th>序号th>
            <th>品牌Logoth>
            <th>品牌名称th>
            <th>企业名称th>
        tr>
        <tr>
            <td>1td>
            <td> <img src="img/huawei.jpg" width="100px"> td>
            <td>华为td>
            <td>华为技术有限公司td>
        tr>
        <tr>
            <td>2td>
            <td> <img src="img/alibaba.jpg"  width="100px"> td>
            <td>阿里td>
            <td>阿里巴巴集团控股有限公司td>
        tr>
    table>

body>
html>

效果
html和css基础练习_第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>HTML-表单项标签title>
head>
<body>


<form action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"><label><input type="radio" name="gender" value="2">label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java label>
          <label><input type="checkbox" name="hobby" value="game"> game label>
          <label><input type="checkbox" name="hobby" value="sing"> sing label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------option>
               <option value="1">大专option>
               <option value="2">本科option>
               <option value="3">硕士option>
               <option value="4">博士option>
          select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10">textarea>  <br><br>
     <input type="hidden" name="id" value="1">

     
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
form>

body>
html>

效果:

html和css基础练习_第3张图片

你可能感兴趣的:(开发,html,css,前端)