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

html学习笔记一

2015-10-09 16:39 302 查看
学习了一天，总结巩固下自己收获。

html是超文本标记语言，而不是编程语言。

1：html结构

　　包含html标签，head标签，title标签，body标签。

<html>
<head>
<title>This is my first page!</title>
</head>
<body>
content.
</body>
</html>


2:html语法

　　第一点：标签是有左尖括号<和右尖括号>组成，<标签>

　　第二点：开始标签<标签> 和 结束标签</标签>

　　第三点：标签正确嵌套。

　　第四点：标签元素和属性为了遵循w3c标准，用小写。

3：标签

　　1）head标签（包含title标签，style标签，script标签，link标签，meta标签，base标签）

　 　

title标签：语义是文档标题

意义：

用于浏览器工具栏标题显示

页面添加到收藏夹标题显示

搜索引擎搜索页面标题显示

<!doctype html>
<html>
<head>
<title>标题标签</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>


　　style标签：语义内嵌样式表

<!doctype html>
<html>
<head>
<title>内嵌样式表</title>
<style type="text/css">
h1{color:red;}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>


　　script标签：语义是插入js代码

<!doctype html>
<html>
<head>
<title>内嵌样式表</title>
<style type="text/css">
h1{color:red;}
</style>
<script type="text/javascript">
document.getElementById("hid").innerHTML="JAVASCRIPT";
</script>
</head>
<body>
<h1 id=“hid”>Hello world!</h1>
</body>
</html>


　　

link标签：语义是插入外部样式表

<!doctype html>
<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>


　　

meta标签：包含一些元信息，例如关键字，描述，作者，文档编码等

<!doctype html>
<html>
<head>
<title>meta</title>
<meta name="keyword" content="html,css"/>
<meta name="description" content="欢迎回到html基础"/>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>


　　

2）body标签（承载页面内容）

div标签（语义用于分离独立的逻辑块）

<!doctype html>
<html>
<head>
<title>div</title>
</head>
<body>
<div>top</div>
<div>content</div>
<div>footer</div>
</body>
</html>


　　

标题标签（h1~h6）

h1字体最大，h6最小。语义是用于文本的标题。

<!doctype html>
<html>
<head>
<title>标题标签</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>


　　

段落标签（p）

用于描述文档的段落，段落标签前后换行显示。

<!doctype html>
<html>
<head>
<title>段落标签</title>
</head>
<body>
<p>我是段落</p>
</body>
</html>


　　

超链接标签（a）：用于从一个页面向另一个页面跳转

<!doctype html>
<html>
<head>
<title>超链接标签</title>
</head>
<body>
<a href="http://www.baidu.com" title="我是超链接">
</body>
</html>


　　

图像标签（img）：用于图像的显示。

<!doctype html>
<html>
<head>
<title>img标签</title>
</head>
<body>
<img src="logo.jpg" alt="my image"  title="my image"/>
</body>
</html>


　　

列表标签：有序列表（ol）和无序列表（ul）

1 <html>
2     <head>
3         <title>列表</title>
4     </head>
5 <body>
6        <ol>有序列表
7            <li>html</li>
8            <li>css</li>
9            <li>js</li>
10         </ol>
11          <ul>无序列表
12            <li>html</li>
13            <li>css</li>
14            <li>js</li>
15         </ul>
16 </body>
17 </html>


表格标签

<!doctype html>
<html>
<head>
<title>table标签</title>
</head>
<body>
<table>
<caption>表格标题</caption>
<tbody>
<tr><th>表格头</th></tr>
<tr><td>单元格</td></tr>
</tbody>
</table>
</body>
</html>


表单标签

1 <!doctype html>
2 <html>
3     <head>
4            <title>form标签</title>
5     </head>
6 <body>
7      <form method="post" action="form.php">
账号<input type="text" name="name"/>
密码<input type="password" name="pass"/>
女<input type="radio" name="sex" value="girl"/>
男<input type="radio" name="sex" value="boy"/>
跑步<input type="checkbox" name="sport" value="running"/>
游戏<input type="checkbox" name="sport" value="swimming"/>
<input type="submit" name="btnSubmit" value="提交"/>
</form>
14 </body>
15 </html>


总结：html基础是了解标签的正确使用，所编写的代码要符合语义化，w3c标准。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航