JAVA Web入门之HTML5及CSS的使用与实战(超详细，附源码)

我不是女神ヾ 2023-09-30 15:39 84阅读 0赞

**创作不易如需要完整代码请点赞关注收藏~~**

HTML一些基本的用法此处不再赘述 若有疑问可以参考博主前面两篇博客

[HTML入门][HTML]

[HTML进阶][HTML 1]

HTML5相比HTML中新增了一些元素

1：**<section>** 表示页面中的一个区域 例如章节 页眉 页脚或者页面中的其他部分

效果如下 并且加入了一个按钮

![7c2a024850e9477495dad48523583225.png][]

**代码如下**

<html>
        <head>
              <title>HTML5</title>
        </head>
        <body>
       <form action="" method="post" name="myform">
     用户名:<input name="username" type="text" id="username4" maxlength="20">
    密码：<input name="pwd1" type="password" id="pwd14" size="20" maxlength="20">
    爱好: <input name="like" type="checkbox" id="like" value="旅游"> 旅游
     <input name="like" type="checkbox" id="like" value="篮球">篮球
     <input name="like" type="checkbox" id="like" value="LOL">LOL
     <input name="like" type="checkbox" id="like" value="羽毛球">羽毛球
    </form>
    <form name="form1" method="post" action="">
    <textarea name="content" cols="30" rows="5" wrap="hard">
    </textarea>
    </form>
    <table width="409" height="523: border="1" align="center">
    <tr>
       <td width="199" height="208">
       </td>
    
    <td width="194">
    
    
    <tr>
    <td height="35" align="center" valign="middle"><a herf="textarea.html">查看详情</a></td>
    </table>>
    <section>
    <h2>section标记的使用</h2>
    <p>完成百分比:100%</p>
    <input type="button" value="请单击"/>
    </section>
    <article>
    <header>
    <h1>苹果美容</h1>
    </header>
    <p>苹果素有水果之王的美称 它含有丰富的维生素C 能让皮肤细嫩 柔滑而白皙.
    </p>
    <footer>
    <p>2022-9-27</p>
    </footer>
    </article>
    
    
    
    
    
    
    
    
    
    
    
    
         </body>
    </html>

2：**<article>**表示页面中的一块与上下文不相关的独立内容 例如博客中的一篇文章 一段用户评论等等 一个**<article>**通常有自己的标题等等

代码如下

<article>
    <header>
    <h1>苹果美容</h1>
    </header>
    <p>苹果素有水果之王的美称 它含有丰富的维生素C 能让皮肤细嫩 柔滑而白皙.
    </p>
    <footer>
    <p>2022-9-27</p>
    </footer>
    </article>

3：**<aside>**用来表示当前页面或文章的附属信息部分 可以包含与当前页面或主要内容相关的引用等等

![e46a9fa1375143b9a990e11c3f442cf0.png][]

代码如下

4：CSS样式表

**CSS是为了弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准，在动态页面设计中尤其有用**

CSS语法格式如下

选择符\{属性：属性值;\}

**1:标记选择器**

**2：类别选择器 名称由用户自己定义 以.开头 调用用class属性**

![4f0a6690b616443fa3db1f3ffb4123a3.png][]

代码如下

**3：id选择器 以\#开头**

![9a5d464550f548329b73e414d8eee483.png][]

代码如下

4：在页面中包含CSS的方式有三种 分别是

**1：行内样式 直接定义在HTML标记之中 通过style属性来实现**

![7fd5b1af1eff4777b3495c9a06486d3c.png][]

<td><p style="color:#F00; font-size:36px;">行内样式一</p></td><-----在页面文字中定义CSS样式>
    </tr>
    <tr>
    <td><p style="color:#F00; font-size:24px;">行内样式二</p></td>

**2：内嵌式 在页面中使用<style></style>标记将CSS样式包含在页面中**

3：**链接式 是CSS样式表中最常用的一种引用样式表的方法 将CSS样式表定义在一个单独的文件中然后在HTML页面中通过<link>标记引用 是一种最为有效的使用CSS样式的方法**

**语法如下<link rel='stylesheet\\ href='path' type=''>**

![e41db066b0784b63b741bea68c8e120d.png][]

代码如下

<head>
              <title>通过链接形式引入CSS样式</title>
     <link href="css.css"/>
        </head>
    <body>

CSS.CSS样式表中代码如下

h1,h2,h3{
    color:#6CFw;
    font-family:"Trebuchet MS", Arial,Helvetica,sans-serif;
    }
    p{
    color:#F0Cs;
    font-weight:200;
    font-size:24px;
    }

**CSS3的新特征**

引入了模块与模块化结构 可以自己选择自己支持哪个模块

对文字添加彩色边框后效果如下 可以使用DIY层来控制

![1ab90fa918fa4409bec5ca4968ab3c50.png][]

代码如下

**创作不易如需要完整代码请点赞关注收藏~~**

[HTML]: https://blog.csdn.net/jiebaoshayebuhui/article/details/127049054?spm=1001.2014.3001.5502
[HTML 1]: https://blog.csdn.net/jiebaoshayebuhui/article/details/127061414?spm=1001.2014.3001.5502
[7c2a024850e9477495dad48523583225.png]: https://img-blog.csdnimg.cn/7c2a024850e9477495dad48523583225.png
[e46a9fa1375143b9a990e11c3f442cf0.png]: https://img-blog.csdnimg.cn/e46a9fa1375143b9a990e11c3f442cf0.png
[4f0a6690b616443fa3db1f3ffb4123a3.png]: https://img-blog.csdnimg.cn/4f0a6690b616443fa3db1f3ffb4123a3.png
[9a5d464550f548329b73e414d8eee483.png]: https://img-blog.csdnimg.cn/9a5d464550f548329b73e414d8eee483.png
[7fd5b1af1eff4777b3495c9a06486d3c.png]: https://img-blog.csdnimg.cn/7fd5b1af1eff4777b3495c9a06486d3c.png
[e41db066b0784b63b741bea68c8e120d.png]: https://img-blog.csdnimg.cn/e41db066b0784b63b741bea68c8e120d.png
[1ab90fa918fa4409bec5ca4968ab3c50.png]: https://img-blog.csdnimg.cn/1ab90fa918fa4409bec5ca4968ab3c50.png