您的位置:首页 > Web前端 > HTML

从零开始的HTML学习

2019-05-22 15:00 211 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_40353297/article/details/90444169

使用样式

  • 外部样式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • 内部样式
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
  • 内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

链接

  • target 属性
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
// "_blank",该链接会在新窗口中打开

表格

//<caption></caption>标题
//<th></th> 表头
//<tr></tr>行
//<td></td>单元格
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td> //显示空单元格边框
<td>row 2, cell 2</td>
</tr>
</table>

列表

  • 无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
  • 有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
  • 自定义列表
<dl>
<dt>Coffee</dt>//列表项
<dd>Black hot drink</dd>//列表项的定义
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

表单

  • 下拉列表
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
  • 按钮
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

input - placeholder 属性

显示文本框中提示信息

<form action="demo-form.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="提交">
</form>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: