HTML学习笔记，附有自己的注释
<!doctype html>
<html>
<head>
<title>Lin's First Webpage</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div> <!-- 分隔标记，分割为独立，不同的部分 -->
<a name="top"/> <!-- 设定一个标签，当最下面的超链接引用这个标签时可以返回顶部 -->
<h1>This is huge header</h1>
<h2>This one's a littler smaller</h2>
<h3>And smaller still...</h3>
<h4>And so on</h4>
<h5>And on</h5>
<h6>Do you really want to go smaller than this</h6> <!--h只能1-6-->
<p>My first line goes here.<br /> line break !! </p> <!--段落格式<p>...</p>. <br /> 换行内容 ！！换行，br=break-->
<hr /> <!-- hr=horizontal 水平，添加一条水平线 -->
<p>A second line here</p> <!-- p=Paragraph段落 -->
<p>This is <strong>a bold</strong> text. This word will be in <em>italics</em>. <!-- <strong>...</strong> 变粗体，<em>...</em>变斜体 -->
I want this <u>word</u> to be underline. <strike>This is line is wrong</strike></p> <!-- <u>...</u> 加下划线，<strike>...</strike> 文字划横线 -->
<h2>My favourite foods</h2>
<ul> <!-- ul=unordered list 无序列表-->
<li>Pizza</li> <!-- li=list 内容-->
<li>Chocolate</li>
<li>Curry</li>
</ul>
<h2>My favourite times of day</h2>
<ol> <!-- ol=ordered list 有序列表-->
<li>Morning</li>
<li>Bed time</li>
<li>Dinner time</li>
</ol>
<img src="image/a.jpg" width="50" height="50" /> <!-- 添加本地图片 --> <!-- img=image 图片，src=source 来源 -->
<!-- 添加网络图片 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523267076478&di=c5a41c85118394376b453dcdb0ad1f86&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftransform%2F20150518%2FA-19-cpkqeaz4644050.jpg"
width="50" height="50" /> <!-- 设定宽度和高度 width="x" height="x" -->
<form> <!-- <form>...</form> 添加表单 -->
<input type="email" placeholder="Please input your email address..."/> <!--添加输入框, type="..." 输入的类型，placeholder 占位符-->
<br><br>
<textarea></textarea> <!-- <textarea></textarea> 文本编辑框 -->
<br></br>
<select> <!-- <select>...</select> 添加选项框 -->
<option>请选择...</option> <!-- <option>...</option> 选项内容 -->
<option>第一项</option>
<option>第二项</option>
<option>第三项</option>
</select>
<br></br>
<input type="radio" name="color" /> 红色 <!-- type="radio" 单选类型 当name相同时只能选取一个-->
<input type="radio" name="color" /> 蓝色
<input type="radio" name="color" /> 黄色
<br><br>
<input type="checkbox" name="dog" /> 狗 <!-- type="checkbox" 多选类型 name不能相同-->
<input type="checkbox" name="cat" /> 猫
<input type="checkbox" name="fish" /> 鱼
<br><br>
<input type="submit" value="提交"/> <!-- type="submit" 提交按钮 value="..." 可以修改按钮里面的内容-->
</form>
<p><a href="http://www.baidu.com" >Baidu</a></p> <!-- href=Hyperlink reference超级链接参照 <a href="网址">显示的超链接名字</a> 外网超链接 -->
<p><a href="helloworld.html" >Hello World</a></p> <!-- 本地超链接 -->
<p><a href="#top" >Back to top</a></p> <!-- 在最上面设定top标签代码，使用超链接可以返回顶部，<a name="top"/>，href="#top" #top表示引用这个top标签 -->
<table> <!-- <table>...</table> 添加表格 -->
<tr><th>Names</th><th>Age</th><th>Gender</th></tr> <!-- tr=TableRow 表格行 th=TableHead 表格头-->
<tr><td>Lin</td><td>28</td><td>Male</td></tr> <!-- td=TableDetail 表格内容 -->
<tr><td>Linda</td><td>25</td><td>Female</td></tr>
</table>
<iframe src="helloworld.html"></iframe> <!-- frame 有相框，边框的意思 --> <!-- 本地链接 -->
<iframe height=498 width=510 src='http://player.youku.com/embed/XMzUyMzk3OTk4NA==' frameborder=0 'allowfullscreen'></iframe> <!-- 网络链接 -->
</div>
</body>
</html>
扫一扫
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
