HTML一些基本的用法此处不再赘述 若有疑问可以参考博主前面两篇博客
HTML5相比HTML中新增了一些元素
1，<section>表示页面中的一个区域 例如章节 页眉 页脚或者页面中的其他部分
效果如下 并且加入了一个按钮
代码如下
<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> <header> <h1>苹果美容</h1> </header> <p>苹果素有水果之王的美称 它含有丰富的维生素C 能让皮肤细嫩 柔滑而白皙. </p> <footer> <p>2022-9-27</p> </footer> </article>
3：<aside>用来表示当前页面或文章的附属信息部分 可以包含与当前页面或主要内容相关的引用等等
代码如下
<aside> <nav> <h2>侧栏</h2> <ul> <li> <a href="#">玫瑰少年</a> 2022-9-27 </li> <li> <a href="#">在我心里</a>2022-9-27 </li> </ul> </nav> </aside>
4：CSS样式表
CSS是为了弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准，在动态页面设计中尤其有用
CSS语法格式如下
选择符{属性：属性值;}
1:标记选择器
2：类别选择器
名称由用户自己定义 以.开头 调用用class属性
代码如下
<style> .one{ font-family:宋体; font-size:24px; color:red; } .two { font-family:宋体; font-size:16px; color:green; } </style> <body> <h2 class="one">应用了选择器one</h2。 <p>正文内容1</p> <h2 class="two">应用了选择器two</h2。 <p>正文内容2</p> </body>
3：id选择器 以#开头
代码如下
<style> #first{ font-size:18px } #second{ font-size:24px } </style> <body> <p id="first">id选择器1</p> <p id="second">id选择器2</p> </body>
4：在页面中包含CSS的方式有三种 分别是
1：行内样式 直接定义在HTML标记之中 通过style属性来实现
<td><p style="color:#F00; font-size:36px;">行内样式一</p></td><-----在页面文字中定义CSS样式> </tr> <tr> <td><p style="color:#F00; font-size:24px;">行内样式二</p></td>
2：内嵌式 在页面中使用标记将CSS样式包含在页面中
3：链接式 是CSS样式表中最常用的一种引用样式表的方法
将CSS样式表定义在一个单独的文件中然后在HTML页面中通过标记引用 是一种最为有效的使用CSS样式的方法
语法如下
代码如下
<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层来控制
代码如下
<style> #border{ margin:3px; width:180px; padding-left:14px; border-width:5px; border-color:red; border-style:solid; height:104px; } </style> <body> <div id="border"> 文字一<br> 文字二<br> 文字三<br> 文字四<br> 文字五<br> </div> </body>
