第二天:html基础入门+CSS初步学习

1、表格标签

    <table align="center" border="1px" cellpadding="10" cellspacing="0" width="500" height="250">
        <thead>
            <tr>
                <th>th>
                <th>姓名th>
                <th>性别th>
                <th>年龄th>
                <th colspan="2">工作地址th>
            tr>
        thead>
        <tbody align="center">
            <td rowspan="2">nametd>
            <td>张三td>
            <td>td>
            <td>21td>
            <td>浙江杭州td>
            tr>
            <tr>
                <td>李四td>
                <td>td>
                <td>20td>
                <td>江苏南京td>
            tr>
        tbody>
    table>

2、注释标签

    

3、表单标签(+CSS)

    
    <form>
        
        
        <label for="user">用户名:label><input type="text" name="username" id="user" placeholder="请输入用户名" maxlength="4"> <br>
        
        <label for="pwd">密码:label><input type="password" name="pwd" id="pwd"><br>
        
        
        
        性别:
        <label for="sex1">label> <input type="radio" name="sex" id="sex1" value="" checked="checked">
        <label for="sex2">label> <input type="radio" name="sex" id="sex2" value=""><br>
        
        爱好:<input type="checkbox" name="hobby" id="h1"><label for="h1">吃饭label><input type="checkbox" name="hobby" id="h2" checked="checked"><label for="h2">睡觉label><input type="checkbox" name="hobby" id="h3"><label for="h3">打豆豆label><br>
        
        <input type="submit" value="注册">
        
        <input type="reset" value="重置">
        
        <input type="button" value="获取短信验证码"><br>
        
        上传头像 :<input type="file"><br>
        
        籍贯:<select class="jiguan">
            <option>北京option>
            <option>上海option>
            <option>浙江option>
            <option>江苏option>
            <option selected="selected">重庆option>
            <option>湖北option>
            <option>云南option>
        select><br>
        
        反馈:<textarea cols="90" row="90">定义和用法:textarea标签定义多行的文本输入控件。 文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。 提示:可以通过 textarea 标签的 wrap 属性设置文本输入区内的换行模式。textarea>
    form>

4、列表标签

    <h2>what's your favourite food?h2>
    
    <li>appleli>
    <li>fishli>
    <li>chipsli>
    ul>
    
    <ol>
        <li>appleli>
        <li>fishli>
        <li>chipsli>
    ol>
    
    <dl>
        <dt>关注dt>
        <dd>1dd>
        <dd>2dd>
        <dd>3dd>
    dl>

5、特殊字符

    <h3>  h3>
    <h3>小于号<h3>
    <h3>大于号>h3>
    <h3>和号&h3>
    <h3>摄氏度°h3>
    <h3>乘号×h3>
    <h3>除号÷h3>
    <h3>正负号±h3>
    <h3>平方²h3>
    <h3>立方³h3>
 
    <h3>版权©h3>
    <h3>注册商标®h3>

6、表单域(初步了解)

    <form action="demo.php" method="POST" name="name1">form>

7、网页小练习

<body id="top">
    <h1>元宇宙h1>
    <p>    元宇宙(Metaverse)一词,诞生于1992年的科幻小说《雪崩》,小说描绘了一个庞大的虚拟现实世界,在这里,人们用数字化身来控制,并相互竞争以提高自己的地位,到现在看来,描述的还是超前的未来世界。 [1]p>
    <br> <img src="https://img0.baidu.com/it/u=3961265338,1607393487&fm=253&fmt=auto&app=120&f=JPG?w=676&h=289"> br>
    <h3>中文名h3>元宇宙br>
    <h2>目录h2>
    <a href="#mingci">
        <h3>1 名词定义h3>
    a>
    <a href="#lingyu">
        <h3>2 领域概念h3>
    a>
    <a href="#xiangguan">
        <h3>3 相关产业h3>
    a>
    <h2 id="mingci">名词定义h2>
    <p>    Roblox给出的定义,包含八大要素:身份、朋友、沉浸感、低延迟、多元化、随时随地、经济系统和文明。要素众多,每个要素背后,还有一连串的解释。总之,一句话说不清楚,这也恰恰说明这一概念的模糊性。 [1]p>
    <h2 id="lingyu">领域概念h2>
    <p>    科技领域 2021年,3月,元宇宙概念第一股罗布乐思(Roblox)在美国纽约证券交易所正式上市;5月,Facebook表示将在5年内转型成一家元宇宙公司;8月,字节跳动斥巨资收购VR创业公司Pico……,元宇宙无疑成为了科技领域最火爆的概念之一。 准确地说,元宇宙不是一个新的概念,它更像是一个经典概念的重生,是在扩展现实(XR)、 <a href="区块链.html" target="_blank">区块链a>、云计算、数字孪生等新技术下的概念具化。
        [2]
    p>
    <h2 id="xiangguan">相关产业h2>     从企业来看,元宇宙仍处于行业发展的初级阶段,无论是底层技术还是应用场景,与未来的成熟形态相比仍有较大差距,但这也意味着元宇宙相关产业可拓展的空间巨大。因此,拥有多重优势的数字科技巨头想要守住市场,数字科技领域初创企业要获得弯道超车的机会,就必须提前布局,甚至加码元宇宙赛道。 元宇宙不仅是重要的新兴产业,也是需要重视的社会治理领域。元宇宙资深研究专家马修·鲍尔提出:“元宇宙是一个和移动互联网同等级别的概念。”以移动互联网去类比元宇宙,就可以更好地理解部门对其关注的内在逻辑。希望通过参与元宇宙的形成和发展过程,以便前瞻性考虑和解决其发展所带来的相关问题。[2]
    <br />2021年12月,百度Create AI开发者大会将与开发者和网民见面。2021年的Create大会将在“元宇宙”里举办。[3]
    <p>更多内容<a href="https://www.baidu.com" target="_blank">百度一下a>p>
    br><a href="#top">返回顶部a>
body>
<body>
    <h1>区块链h1>
    <p>    区块链是一个信息技术领域的术语。从本质上讲,它是一个共享数据库,存储于其中的数据或信息,具有“不可伪造”“全程留痕”“可以追溯”“公开透明”“集体维护”等特征。基于这些特征,区块链技术奠定了坚实的“信任”基础,创造了可靠的“合作”机制,具有广阔的运用前景。p>
    <p>    2019年1月10日,互联网信息办公室发布《区块链信息服务管理规定》 [1] 。2019年10月24日,“把区块链作为核心技术自主创新的重要突破口”“加快推动区块链技术和产业创新发展”。“区块链”已走进大众视野,成为社会的关注焦点。p>
    <p>    2019年12月2日,该词入选《咬文嚼字》2019年十大流行语。 p>
body>

8、利用类选择器画三个盒子/多类名使用/id选择器




<body>
    <div class="box blue font1">blue1div>
    <div class="box pink font1">pinkdiv>
    <div class="box" id="purple">blue2div>
body>

9、通配符选择器



<body>
    <h1>标题标签需单独指定文字大小h1>
    <div>hellodiv>
    <div>worlddiv>
    <em>testem><br>
    <i>山山水水i><br>
    <a href="#">为什么在a>
    <p>元宇宙(Metaverse)一词,诞生于1992年的科幻小说《雪崩》,小说描绘了一个庞大的虚拟现实世界,在这里,人们用数字化身来控制,并相互竞争以提高自己的地位,到现在看来,描述的还是超前的未来世界。p>
    <p>从企业来看,元宇宙仍处于行业发展的初级阶段,无论是底层技术还是应用场景,与未来的成熟形态相比仍有较大差距,但这也意味着元宇宙相关产业可拓展的空间巨大。因此,拥有多重优势的数字科技巨头想要守住市场,数字科技领域初创企业要获得弯道超车的机会,就必须提前布局,甚至加码元宇宙赛道。 从来看,元宇宙不仅是重要的新兴产业,也是需要重视的社会治理领域。元宇宙资深研究专家马修·鲍尔提出:“元宇宙是一个和移动互联网同等级别的概念。”以移动互联网去类比元宇宙,就可以更好地理解部门对其关注的内在逻辑。希望通过参与元宇宙的形成和发展过程,以便前瞻性考虑和解决其发展所带来的相关问题。p>
body>

总结:今天收获还是很丰富的,初步学完了HTML,CSS基础也学了大半,知道了很多标签用法,以及CSS样式,继续加油!

你可能感兴趣的:(web前端学习之路,css,html,html5)