欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML基本教程

程序员文章站 2022-05-29 09:57:08
...

   1.html基本知识

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
</head>

<!--设置背景颜色-->
<body style="background-color:yellow;">

<!--设置标题居中 （align排列意思）-->
<h1 style="text-align:center;">感谢你曾来过</h1>


<!--设置字体颜色-->
<h2 style="background-color:red;">我的第一个标题</h2>
<p style="background-color:green;"> 我的第一个段落</p>

<!--font-family(字体），color（颜色）和font-size（字体大小） br是转行意思-->
<h3 style ="font-family:verdana;">我的第二个标题</h3>
<p2 style ="font-family:arial;color:red;font-size:20px;">我的第二个段落</p2><br>

<!--br是转行意思-->
<a href="https://blog.csdn.net/tjfsuxyy/article/details/80801888">这是一个链接</a><br>

<!--插入图像{src（source）源属性,alt 属性用来为图像定义一串预备的可替换的文本,br是转行意思}-->
<img src="D:\tjfsu.jpg" alt="Error of loading" width="400" height="600"/><br>

<!--<th>粗体居中字体,表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。-->
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

<!--无序列表-->
<h4>无序列表</h4>
<ul>
    <li>贵州</li>
	<li>天津</li>
	<li>上海</li>
</ul>

<!--有序列表-->
<ol>
	<li>法国</li>
	<li>英国</li>
	<li>德国</li>
</ol>
<ol start="50">
    <li>coffee</li>
	<li>tea</li>
	<li>millk</li>
</ol>
<!--div标签-->
<div style="color:#0000FF">
     <h5>这是一个在div元素中的标题</h5>
	 <p3>这是一个在div元素中的文本</p3>
</div>
<!--span标签-->
    <p4>我<span style="color:red">喜欢</span>你</p4>

</body>
</html>

2.div和table布局

 2.1  div布局代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>网页制作</title> 
</head>
<body>

<div id="container" style="width:600px">

<div id="header" style="background-color:red;">
<!--margin-bottom设置h1下外边距-->
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<!--float：left元素向左浮动-->
<div id="menu" style="background-color:blue;height:200px;width:150px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:orange;height:200px;width:450px;float:left;">
内容在这里</div>
<!--clear：both 图像的左侧和右侧均不允许出现浮动元素-->
<div id="footer" style="background-color:yellow;clear:both;text-align:center;">
tjfsuxyy</div>

</div>
</body>
</html>

    div布局情况

HTML基本教程     

  2.2 table布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>网页制作</title> 
</head>
<body>

<table width="600" border="0">
<tr>
<!--colspan 属性规定单元格可横跨的列数。-->
<td colspan="2" style="background-color:red">
<h1>主要的网页标题</h1>
</td>
</tr>

<tr>
<!--vertical-align用来设置垂直对齐方式-->
<td style="background-color:blue;width:150px;vertical-align:top;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:orange;height:200px;width:450px;vertical-align:top;">
内容在这里</td>
</tr>

<tr>
<td colspan="2" style="background-color:yellow;text-align:center;">
tjfuxyy</td>
</tr>
</table>

</body>
</html>

 

       table布局情况

HTML基本教程

3.表单

3.1创建密码字段代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>网页制作</title> 
</head>
<body>
<!--必需的 action 属性规定当提交表单时，向何处发送表单数据.-->
<form action="">
Username: <input type="text" name="goldenstand"><br>
Password: <input type="password" name="password01"><br>
<input type ="submit" value ="submit">
</form>

</body>
</html>

创建密码字段情况

HTML基本教程

3.2单选按钮代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>网页制作</title> 
</head>
<body>
<form >
<!--<input type="radio"> 标签定义了表单单选框选项-->
<input type="radio" name="you" value="喜欢">喜欢<br>
<input type="radio" name="you" value="不喜欢">不喜欢
</form>

</body>
</html>

单选按钮情况

HTML基本教程

3.3 复选框代码

<DOCTYPE html>
<html>
<head>
<meta charaset="utf-8">
<title>网页制作</title>
</head>

<body>

<form action="">
  <input type="checkbox"> name="tjfsuxyy" value="感谢你曾来过">感谢你曾来过<br>
  <input type="checkbox"> name="tjfsuxyy" value="再见!">再见!<br>
  <input type="submit" value="提交”>
</form>

</body>
</html>

复选框情况

HTML基本教程

3.4简单下拉列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>网页制作</title> 
</head>
<body>
<form action="">
<!--select 元素可创建单选或多选菜单。<select&> 元素中的 <option> 标签用于定义列表中的可用选项。-->
<select name="area">
<option value="贵州">贵州</option>
<option value="河南">河南</option>
<option value="天津">天津</option>
<option value="广东">广东</option>
</select>
</form>

</body>
</html>

简单下拉列表情况

HTML基本教程

3.5预选下拉列表代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>网页制作</title> 
</head>
<body>

<form action="">
<select name="area">
<option value="贵州">贵州</option>
<option value="河南">河南</option>
<option value="天津" selected>天津</option>
<option value="广东">广东</option>
</select>
</form>

</body>
</html>

 

预选下拉列表情况（列表默认选天津）

HTML基本教程

 

相关标签： html基本知识

上一篇： 了解芋圆甜品的做法大全，制作出好吃的甜品

下一篇： 用WTL的文件对话框打开图片，D3D渲染

推荐阅读