创作不易如需要完整代码请点赞关注收藏~~
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>通常有自己的标题等等
代码如下
<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：内嵌式 在页面中使用<style></style>标记将CSS样式包含在页面中
3：链接式 是CSS样式表中最常用的一种引用样式表的方法 将CSS样式表定义在一个单独的文件中然后在HTML页面中通过<link>标记引用 是一种最为有效的使用CSS样式的方法
语法如下<link rel='stylesheet\ href='path' type=''>
代码如下
<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>创作不易如需要完整代码请点赞关注收藏~~
本文含有隐藏内容，请 开通VIP 后查看