HTML5入门―DAY1：HTML基础
导读：收集整理的这篇文章主要介绍了html5教程-HTML5入门―DAY1：HTML基础，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 HTML5入门—...
收集整理的这篇文章主要介绍了html5教程-HTML5入门―DAY1：HTML基础，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 HTML5入门—DAY1：HTML基础
!doctyPE html>
html>
head>
meta charset="utf-8">
tITle>
DAY1：HTML基础/title>
style>
*{
margin:0;
padding:0;
}
body{
padding: 30px;
padding-top:10px;
line-height: 35px;
font-family: "微软雅黑";
}
h1,h2{
padding: 20px 0;
}
h3{
background: #00AA88;
color: #FFfcF4;
font-Size: 20px;
font-weight: 700;
margin: 10px 0;
border-radius: 4px;
padding: 5px 0px 5px 15px;
}
p{
line-height: 40px;
}
ul li{
list-style: none;
line-height: 40px;
}
span{
color: #199475;
font-weight: 700;
font-size:18px;
display: block;
border-radius: 4px;
padding: 10px;
font-size: 18px;
padding-left: 0px;
}
em{
font-style: normal;
color:red;
}
.other{
color:#044D22;
}
.oo{
color:red;
display:inline;
font-size:18px;
font-weight:normal;
}
.marleft{
margin-left:30px;
}
.marBTom{
margin:15px 0;
font-weight:600;
}
.borderbtm{
border-bottom: solid 1px #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
.textcon{
margin: 10px 0;
border: solid 1px #ddd;
border-left-width: 6px;
padding: 10px;
border-radius: 4px;
border-color: #f60;
}
/style>
/head>
body>
p class="boxs">
h1>
DAY1：HTML基础/h1>
h2 class="borderbtm">
/h2>
p class="marleft">
p>
span>
HTML的基本语法/span>
/p>
blockquote class="textcon">
p>
strong class="oo">
1、常规标记>
/strong>
br>
标记 属性=“属性值” 属性=“属性值”>
/标记>
br>
例如：head>
/head>
/p>
/blockquote>
blockquote class="textcon">
p>
strong class="oo">
2.空标记/strong>
br>
标记 属性=“属性值” />
br>
例如：meta charset=”utf-8”>
br/>
/p>
br>
/blockquote>
/p>
h3>
五、HTML常用标记/h3>
p class="marleft">
p class="marbtom">
1、文本标题（h1-h6） /p>
blockquote class="textcon">
p>
h1>
LOGO/h1>
br>
h2>
次要栏目或标题-小标题H2/h2>
br>
h3>
再次要栏目或分类小标题H3/h3>
br>
h4>
文中分类小标题H4/h4>
br>
h5>
二级标题/h5>
br>
h6>
六级标题/h6>
/p>
p>
strong>
html标题标签使用原则/strong>
：/p>
p>
H1在一个网页中最好只使用一次，如对一个网页LOGO使用。br>
/p>
/blockquote>
p class="marbtom">
2、段落文本(p) /p>
blockquote class="textcon">
p>
p>
段落文本内容/p>
br>
标识一个段落(段落与段落之间有段间距)/p>
/blockquote>
p class="marbtom">
3、空格 /p>
blockquote class="textcon">
p>
br>
所占位置没有一个确定的值,这与当前字体字号都有关系./p>
/blockquote>
p class="marbtom">
4、换行(br) /p>
blockquote class="textcon">
p>
br />
br>
换行是一个空标记(强制换行)br>
/p>
/blockquote>
strong class="marbtom">
5、加粗 加粗有两个标记/strong>
br>
blockquote class="textcon">
A、b>
加粗内容/b>
br>
B、strong>
加粗内容/strong>
br>
/blockquote>
strong class="marbtom">
6、倾斜br>
/strong>
blockquote class="textcon">
em>
/em>
,i>
/i>
/p>
/blockquote>
p>
strong class="marbtom">
7、水平线/strong>
blockquote class="textcon">
hr />
空标记br>
/blockquote>
strong class="marbtom">
8、列表(ul,ol,dl)/strong>
blockquote class="textcon">
p>
HTML中有三种列表分别是：无序列表，有序列表，自定义列表br>
p style="overflow:hidden">
p style="float:left;
height:220px;
margin-right:30px;
">
*无序列表br>
无序列表组成：br>
ul>
(unordered list)br>
li>
/li>
br>
li>
/li>
br>
．．．．．．br>
/ul>
br>
/p>
p style="float:left;
height:220px;
margin-right:30px;
">
*有序列表br>
有序列表组成：br>
ol>
(ordered list)br>
li>
/li>
br>
li>
/li>
br>
．．．．．．br>
/ol>
br>
/p>
p style="float:left;
height:220px;
margin-right:30px;
overflow:hidden;
">
*自定义列表br>
dl>
(definition list)br>
dt>
名词/dt>
br>
dd>
解释/dd>
br>
(definition description)br>
．．．．．．br>
/dl>
br>
br>
/p>
/p>
/p>
br>
/p>
/blockquote>
p class="marbtom">
9、插入图片/p>
blockquote class="textcon">
p>
img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
br>
/p>
/blockquote>
strong class="marbtom">
10、超链接的应用/strong>
/p>
blockquote class="textcon">
p>
语法：br>
a href="目标文件路径及全称/连接地址" title="提示文本">
链接文本/图片/a>
br>
a href="#">
/a>
空链接br>
/p>
/blockquote>
p class="marbtom">
11、p和span的用法/p>
blockquote class="textcon">
p>
p >
/p>
/p>
p>
没有具体含义，统称为块标签，br>
用来设置文档区域，是文档布局常用对象/p>
p>
span>
/span>
br>
文本结点标签br>
可以是某一小段文本，或是某一个字。 br>
/p>
/blockquote>
p class="marbtom">
12、数据表格的作用及组成/p>
blockquote class="textcon">
p >
作用：显示数据br>
/p>
p>
表格组成br>
table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
br>
tr>
br>
td>
/td>
br>
td>
/td>
br>
/tr>
br>
/table>
/p>
p>
strong class="oo">
注：一个tr表示一行;
一个td表示一列(一个单元格)/strong>
br>
*数据表格的相关属性br>
1）width="表格的宽度"br>
2）height="表格的高度"br>
3）border="表格的边框"br>
4）bgcolor="表格的背景色" bg=backgroundbr>
5）bordercolor="表格的边框颜色"br>
6）cellspacing="单元格与单元格之间的间距"br>
7）cellpadding="单元格与内容之间的空隙"br>
8）对齐方式：align="left/center/right";
br>
9)合并单元格属性：br>
colspan=“所要合并的单元格的列数"合并列;
/p>
p>
rowspan=“所要合并单元格的行数”合并行;
/p>
/blockquote>
p class="marbtom">
13、表单的作用及组成/p>
p>
span class="oo">
表单的作用：用来收集用户的信息的;
/span>
/p>
p>
1)、表单框br>
blockquote class="textcon">
form name="表单名称" method="post/get" action="">
/form>
br>
/blockquote>
2）文本框br>
blockquote class="textcon">
input type="text" value="默认值"/>
br>
/blockquote>
3)密码框br>
blockquote class="textcon">
input type="password" />
br>
input type="password" placeholder="密码" />
/p>
/blockquote>
p>
4)重置按钮br>
blockquote class="textcon">
input type="reset" value="按钮内容" />
br>
/blockquote>
5）单选框/单选按钮br>
blockquote class="textcon">
input type="radio" name="ral" />
br>
input type="radio" name="ral" checked="checked" />
br>
单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。br>
checked="checked"(默认选中；) disabled="disabled"禁用/p>
/blockquote>
p>
6）复选框br>
blockquote class="textcon">
input type="checkbox" name="like" />
br>
input type="checkbox" name="like" disabled="disabled" />
(disabled="disabled" :禁用)br>
(checked="checked" :默认选中)/p>
/blockquote>
p>
7)下拉菜单br>
blockquote class="textcon">
select name="">
br>
option>
菜单内容/option>
br>
/select>
br>
/blockquote>
8）多行文本框（文本域）br>
blockquote class="textcon">
textarea name="textareal" cols="字符宽度" rows="行数">
br>
/textarea>
br>
/blockquote>
9)按钮br>
blockquote class="textcon">
input name="'" type="button" value=“按钮内容” />
br>
input name="'" type="submit" value=“按钮内容” />
br>
button>
/button>
/p>
/blockquote>
p class="oo">
p >
br>
/p>
/p>
/p>
p style=" width: 130px;
height: 45px;
line-height: 44px;
text-align: center;
color: #f00;
background: #000;
border-radius: 4px;
position: fixed;
bottom: 50px;
cursor:pointer;
right: 10px;
">
br />
br />
br />
/p>
/body>
/html>
HTML5入门—DAY1：HTML基础
!doctype html>
html>
head>
meta charset="utf-8">
title>
DAY1：HTML基础/title>
style>
*{
margin:0;
padding:0;
}
body{
padding: 30px;
padding-top:10px;
line-height: 35px;
font-family: "微软雅黑";
}
h1,h2{
padding: 20px 0;
}
h3{
background: #00AA88;
color: #FFFCF4;
font-size: 20px;
font-weight: 700;
margin: 10px 0;
border-radius: 4px;
padding: 5px 0px 5px 15px;
}
p{
line-height: 40px;
}
ul li{
list-style: none;
line-height: 40px;
}
span{
color: #199475;
font-weight: 700;
font-size:18px;
display: block;
border-radius: 4px;
padding: 10px;
font-size: 18px;
padding-left: 0px;
}
em{
font-style: normal;
color:red;
}
.other{
color:#044D22;
}
.oo{
color:red;
display:inline;
font-size:18px;
font-weight:normal;
}
.marleft{
margin-left:30px;
}
.marbtom{
margin:15px 0;
font-weight:600;
}
.borderbtm{
border-bottom: solid 1px #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
.textcon{
margin: 10px 0;
border: solid 1px #ddd;
border-left-width: 6px;
padding: 10px;
border-radius: 4px;
border-color: #f60;
}
/style>
/head>
body>
p class="boxs">
h1>
DAY1：HTML基础/h1>
h2 class="borderbtm">
/h2>
p class="marleft">
p>
span>
HTML的基本语法/span>
/p>
blockquote class="textcon">
p>
strong class="oo">
1、常规标记>
/strong>
br>
标记 属性=“属性值” 属性=“属性值”>
/标记>
br>
例如：head>
/head>
/p>
/blockquote>
blockquote class="textcon">
p>
strong class="oo">
2.空标记/strong>
br>
标记 属性=“属性值” />
br>
例如：meta charset=”utf-8”>
br/>
/p>
br>
/blockquote>
/p>
h3>
五、HTML常用标记/h3>
p class="marleft">
p class="marbtom">
1、文本标题（h1-h6） /p>
blockquote class="textcon">
p>
h1>
LOGO/h1>
br>
h2>
次要栏目或标题-小标题H2/h2>
br>
h3>
再次要栏目或分类小标题H3/h3>
br>
h4>
文中分类小标题H4/h4>
br>
h5>
二级标题/h5>
br>
h6>
六级标题/h6>
/p>
p>
strong>
html标题标签使用原则/strong>
：/p>
p>
H1在一个网页中最好只使用一次，如对一个网页LOGO使用。br>
/p>
/blockquote>
p class="marbtom">
2、段落文本(p) /p>
blockquote class="textcon">
p>
p>
段落文本内容/p>
br>
标识一个段落(段落与段落之间有段间距)/p>
/blockquote>
p class="marbtom">
3、空格 /p>
blockquote class="textcon">
p>
br>
所占位置没有一个确定的值,这与当前字体字号都有关系./p>
/blockquote>
p class="marbtom">
4、换行(br) /p>
blockquote class="textcon">
p>
br />
br>
换行是一个空标记(强制换行)br>
/p>
/blockquote>
strong class="marbtom">
5、加粗 加粗有两个标记/strong>
br>
blockquote class="textcon">
A、b>
加粗内容/b>
br>
B、strong>
加粗内容/strong>
br>
/blockquote>
strong class="marbtom">
6、倾斜br>
/strong>
blockquote class="textcon">
em>
/em>
,i>
/i>
/p>
/blockquote>
p>
strong class="marbtom">
7、水平线/strong>
blockquote class="textcon">
hr />
空标记br>
/blockquote>
strong class="marbtom">
8、列表(ul,ol,dl)/strong>
blockquote class="textcon">
p>
HTML中有三种列表分别是：无序列表，有序列表，自定义列表br>
p style="overflow:hidden">
p style="float:left;
height:220px;
margin-right:30px;
">
*无序列表br>
无序列表组成：br>
ul>
(unordered list)br>
li>
/li>
br>
li>
/li>
br>
．．．．．．br>
/ul>
br>
/p>
p style="float:left;
height:220px;
margin-right:30px;
">
*有序列表br>
有序列表组成：br>
ol>
(ordered list)br>
li>
/li>
br>
li>
/li>
br>
．．．．．．br>
/ol>
br>
/p>
p style="float:left;
height:220px;
margin-right:30px;
overflow:hidden;
">
*自定义列表br>
dl>
(definition list)br>
dt>
名词/dt>
br>
dd>
解释/dd>
br>
(definition description)br>
．．．．．．br>
/dl>
br>
br>
/p>
/p>
/p>
br>
/p>
/blockquote>
p class="marbtom">
9、插入图片/p>
blockquote class="textcon">
p>
img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
br>
/p>
/blockquote>
strong class="marbtom">
10、超链接的应用/strong>
/p>
blockquote class="textcon">
p>
语法：br>
a href="目标文件路径及全称/连接地址" title="提示文本">
链接文本/图片/a>
br>
a href="#">
/a>
空链接br>
/p>
/blockquote>
p class="marbtom">
11、p和span的用法/p>
blockquote class="textcon">
p>
p >
/p>
/p>
p>
没有具体含义，统称为块标签，br>
用来设置文档区域，是文档布局常用对象/p>
p>
span>
/span>
br>
文本结点标签br>
可以是某一小段文本，或是某一个字。 br>
/p>
/blockquote>
p class="marbtom">
12、数据表格的作用及组成/p>
blockquote class="textcon">
p >
作用：显示数据br>
/p>
p>
表格组成br>
table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
br>
tr>
br>
td>
/td>
br>
td>
/td>
br>
/tr>
br>
/table>
/p>
p>
strong class="oo">
注：一个tr表示一行;
一个td表示一列(一个单元格)/strong>
br>
*数据表格的相关属性br>
1）width="表格的宽度"br>
2）height="表格的高度"br>
3）border="表格的边框"br>
4）bgcolor="表格的背景色" bg=backgroundbr>
5）bordercolor="表格的边框颜色"br>
6）cellspacing="单元格与单元格之间的间距"br>
7）cellpadding="单元格与内容之间的空隙"br>
8）对齐方式：align="left/center/right";
br>
9)合并单元格属性：br>
colspan=“所要合并的单元格的列数"合并列;
/p>
p>
rowspan=“所要合并单元格的行数”合并行;
/p>
/blockquote>
p class="marbtom">
13、表单的作用及组成/p>
p>
span class="oo">
表单的作用：用来收集用户的信息的;
/span>
/p>
p>
1)、表单框br>
blockquote class="textcon">
form name="表单名称" method="post/get" action="">
/form>
br>
/blockquote>
2）文本框br>
blockquote class="textcon">
input type="text" value="默认值"/>
br>
/blockquote>
3)密码框br>
blockquote class="textcon">
input type="password" />
br>
input type="password" placeholder="密码" />
/p>
/blockquote>
p>
4)重置按钮br>
blockquote class="textcon">
input type="reset" value="按钮内容" />
br>
/blockquote>
5）单选框/单选按钮br>
blockquote class="textcon">
input type="radio" name="ral" />
br>
input type="radio" name="ral" checked="checked" />
br>
单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。br>
checked="checked"(默认选中；) disabled="disabled"禁用/p>
/blockquote>
p>
6）复选框br>
blockquote class="textcon">
input type="checkbox" name="like" />
br>
input type="checkbox" name="like" disabled="disabled" />
(disabled="disabled" :禁用)br>
(checked="checked" :默认选中)/p>
/blockquote>
p>
7)下拉菜单br>
blockquote class="textcon">
select name="">
br>
option>
菜单内容/option>
br>
/select>
br>
/blockquote>
8）多行文本框（文本域）br>
blockquote class="textcon">
textarea name="textareal" cols="字符宽度" rows="行数">
br>
/textarea>
br>
/blockquote>
9)按钮br>
blockquote class="textcon">
input name="'" type="button" value=“按钮内容” />
br>
input name="'" type="submit" value=“按钮内容” />
br>
button>
/button>
/p>
/blockquote>
p class="oo">
p >
br>
/p>
/p>
/p>
p style=" width: 130px;
height: 45px;
line-height: 44px;
text-align: center;
color: #f00;
background: #000;
border-radius: 4px;
position: fixed;
bottom: 50px;
cursor:pointer;
right: 10px;
">
br />
br />
br />
/p>
/body>
/html>
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5入门―DAY1：HTML基础
本文地址： https://pptw.com/jishu/587202.html