HTML基本语法
// 以代码篇的样式体现具体标签的作用（复制到.html文件中即可）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鸟教程练习</title>
</head>
<body>
<h1>这是我第一个标题</h1>
<p>我的第一个段落</p>
<a href="https://www.runoob.com">这是我第一个链接</a>
<--图片随便下载几张移入img文件中即可-->
<img src="img/2017032015580844436.jpg" width="400px" height="600px"/>
<p>br标签时换行</p>
<br />
<p>看吧，中间有一个换行</p>
<br />
<p>HTML的标题有h1~h5,依次字体减少<br />
<h1>这是h1标题</h1>
<h2>这是h2标题</h2>
<h5>这是h5标题</h5>
<br />
标题会自动添加空格
</p>
<h5>hr标签在html页面创建水平线</h5>
<hr />
<h5>如上面所示</h5>
<！--这是一个注释-->
<p>html的注释是<！--内容--></p>
<!-- 上面的注释失败-->
<p>p是段落，段落会自动添加空格</p>
<p>这是一个段落</p>
<p>这是另外一个段落</p>
<p>这个<br>段落<br>演示了分行的效果</p>
<hr>
<h5>文本格式化</h5>
加粗b：
<b>加粗字体</b>
<br>
斜体i：
<i>这是一行斜体子</i><br>
电脑自动输出code:
<code>电脑自动输出</code><br>
上下标:上表-sup；下标-sub
这是<sup>上表</sup>和<sub>下标</sub>
<hr>
<h5>超连接</h5>
<a href="https://www.runoob.com">菜鸟教程</a>
<b>如果a标签中没有target属性限制在当前网页中打开新网页，否则在新窗口打开</b>
<a href="https://www.runoob.com" target="_blank">菜鸟教程</a>
<hr>
<p>引入css与js的标签link，引入后可以通过css和js改变央视</p>
<hr>
<h5>html的头部</h5>
<b>style标签可以直接定义文档的样式样式</b>
<!--
<hr>
-->
<b>script标签主要用来加载javascript脚本，后续会有js专门练习</b>
<p>script标签可以添加在头部也可以添加在尾部，甚至子body中</p>
<script>
document.write("hello.word!")
</script>
<hr>
<i>js语法不同与html具体请学习</i>
<p>
javascript是一种轻量级语言
javascript可插入html页面的编程代码，并可由浏览器执行
</p>
<hr>
<h5>css部分</h5>
<p>
css定义了html的样式，在html文档中改变布局是通过style标签，在css文件中须通过link引入<br>
外部链接才可以改变html格式
</p><br>
<hr>
<h5>图像</h5>
<b>插图图像的标签是img </b>
<img src="img/1543364615986931.jpg" />
<p>在加载图片是一般会设置托i按的高和宽，不然会破话html的格式，每个标签一般都有属性，图片的长宽属性分别<br>
是width和height，还有其他属性，另外图像会出现了img出现的位置。
</p>
<p>图片中还有map标签图片上的区域映射，点击会跳转</p>
<hr>
<h5>表格</h5>
<b>每个表格由table标签起引，tr标签决定行，td决定列,值得注意的是用table标签的border属性确认边框，不然不显示边框</b>
<br>
<i>无边框表格</i>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<i>有边框表格</i>
<table border="1px">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<b>表头标签为th</b>
<table border="1" cellpadding="100" >
<!--cellpadding是单元格间距-->
<tr>
<th><b>head</b></th>
<th><b>tail</b></th>
</tr>
<tr>
<td>100</td>
<td>200</td>
</tr>
</table>
<table border="1" cellpadding="100" cellspacing="0" >
<br>
<b>区别?</b>
<br>
<!--cellpadding是单元格间距,cellspacing是格子之间的距离-->
<tr>
<th><b>head</b></th>
<th><b>tail</b></th>
</tr>
<tr>
<td>100</td>
<td>200</td>
</tr>
</table>
<br>
<hr>
<h5>列表</h5>
<p>有序列表</p>
<ol>
<li>Coffee</li>
<li>Mike</li>
</ol>
<p>无序列表</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<h5>区块元素</h5>
<p>块元素由h1,p,ul,ol,table等</p>
<p>内联元素a，img</p>
<p>块元素div</p>
<P>span元素是文本容器，css改变其样式</P>
<hr>
<h5>html布局</h5>
<b>div是专门的布局标签但也可以用table作为布局</b><br>
<p>下面是div布局</p>
<div id="container" style="width:500px;height: 300px;">
<div id="header" style="background-color: #ffa500; width: 500px ;height:60px ;">
<h1>主要的网页标题</h1>
</div>
<div id="menu" style="background-color: aqua;;height: 430px; width: 200px;float: left;" >
<b>菜单</b><br>
HTML<BR>
CSS<br>
javascript<br>
</div>
<div id="content" style="background-color:#eeeeee;height: 430px;width: 300px;float: right;">
内容在这里
</div>
<div id="footer" style="background-color: #ffa500;clear:both;text-align: center;">
版权runoob.com
</div>
</div>
<br>
<br>
<br>
<b>使用表格布局</b>
<table border="" cellspacing="" cellpadding="" width="500px" height="300px">
<tr>
<td colspan="2" style="background-color:#ffa500;"><h1>主要的网页</h1></td>
</tr>
<tr>
<td style="background-color: #ffd700; width=200px">
<b>菜单</b>
HTML<BR>
CSS<br>
JAVASCRIPT<br>
</td>
<td style="background-color: #eeeeee; height:430px;width:300px">
内容在这里
</td>
</tr>
<tr>
<td colspan="2" style="#ffA500;text-align: center;">
runoob.com
</td>
</tr>
</table>
<br>
<hr>
<h5>表单</h5>
<b>文本域</b>
<form>
first name:<input type="text"><br>
last name:<input type="text">
</form>
<br>
<b>密码字段</b>
<FORM>
password:<input type="password">
</FORM>
<b>单选</b>
<form>
<input type="radio" value="male">MALE<BR>
<input type="radio" value="female">FEMALE
</form>
<br />
<form>
<input type="checkbox" value="Bike">i have a bike<br>
<input type="checkbox" value="Car">i have a car
</form>
<br>
<b>提交按钮</b>
<form >
username:<input type="text">
<input type='submit' value="Submit">
</form>
</body>
</html>
css基本语法
// 项目的css文档（在项目中新建.css文档粘到其中）
body
{
background-color: #d0e4fe;
}
h1{
color:orange;
text-align: center;
}
p{
font-family: "times new roman";
fornt-size:20px;
}
/*
如上面所示，前面的body，h1是选择器（要修改的HTML元素），后面是声明（修改的属性）
如：
p{
color:red;
text-agign:center;
}
*/
/* 对table01修改样式 */
#table01{
border: 1px solid black; /*边框*/
width: 600px;
height: 400px;
background-color: white;
}
.tr01{
border: 1px solid black;
width: 600px;
height: 200px;
color: aquamarine;
}
.th01{
border: 1px solid black;
width: 200px;
}
.tr02{
border: 1px solid black;
width: 200px;
height: 200px;
color: #D0E4FE;
}
.th02{
border: 1px solid black;
width: 200px;
}
/* css中的属性和html有类似之处，了解这些基本可以通过css简单改变html了 */
// html的文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("css/test01.css");
</style>
</head>
<body>
<h1>css基本语法</h1>
<p>通过css我们可以提高网页的开发效率，css可以有效的改变网页的格式和布局</p>
<h4>如何在HTML中引入CSS(具体格式在html文档中)</h4>
<li>外部链接式</li>
<p>
在html的link标签中链接.css文件
<!-- <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> -->
</p>
<li>内部嵌入式</li>
<p>在html的style标签中编写css文档
<!-- <head>
<style type="text/css">此处写css文档</style>
</head> -->
</p>
<li>导入式</li>
<p>在html中导入css文档
<!-- <head>
<style type="text/css">
@import url("css/test01.css");
</style>
</head> -->
</p>
<hr />
<h1>css文档修改了body的背景颜色，h1颜色和位置</h1>
<p>
修改了p标签的字体间隔，字体大小
</p>
<hr />
<h5>要修改html样式必须通过id和class，区别是id唯一，class不唯一。格式id是#，class是. </h5>
<!-- 此处定义一个id=table01的容器通过css改变样式 -->
<table id="table01">
<tr class="tr01">
<th class="th01">对table定义格式</th>
<th class="th01">对单元格定义格式</th>
<th class="th01">对边框定义</th>
</tr>
<tr class="tr02">
<th class="th02">看单元格区别</th>
<th class="th02">看边框区别</th>
<th class="th02">看整体区别</th>
</tr>
</table>
</body>
</html>
项目的结构：
下面开始进行自己的网页设计吧！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/156349.html
