HTML基础单页⾯总结（基于w3school教程）
（以下html代码可直接粘贴到⼀个以.html结尾的⽂本⽂件并⽤浏览器打开查看实际效果）
<html><!--html的语法由标签（形式为<keyword>），标签的属性（keword右边的键="值"对），标签之间的内容组成，每个标签定义了⼀个元素，
属性则影响了该元素的视觉表现和逻辑上的动作响应等,-->
<!--位于<!...中的为html的注释语句-->
<head ><!--head标签⽤于定义⽂档的头部，它是所有头部元素的容器，其中元素可以引⽤脚本、指⽰浏览器在哪⾥到样式表、提供元信息等等。-->
<title>Html</title><!--title标签定义了在浏览器上显⽰的页⾯标题，是head中唯⼀必须的元素-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--meta可提供有关页⾯的元信息，⽐如针对搜索引擎和更新频度的描述和关键词。注：字符集属性charset应在⼀开始给出（应与你编辑器保存该html时使⽤的字符集⼀致，否则在它之前的中⽂显⽰可能不正确-->
<meta name="author" content="yhavi">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript">
<meta http-equiv="Refresh" content="5;url=www.w3school"/><!--这⾥实现5秒后重定向到url指出的位置。要使其失效请注释掉它。
注：当使⽤绝对寻址时需要添加于签名-->
<script type="text/javascript">
document.write("5秒钟后跳转！")
</script><!--script⽤于加⼊脚本语⾔⽚段如javascript 可使⽤src属性引⽤代码或直接在标签内容⾥⽤纯⽂本写代码-->
<base href=""  target="_blank"></base><!--base的href属性重新定义了整个html中URL寻址的相对起点（不定义base时使⽤该页⾯的URL为起点）
位于bass标签中的target属性定义了整个页⾯中点击超链接时打开链接的位置，_blank⽰意在新窗⼝中打开-->
<link><!--link⼀般⽤于使⽤外联的css样式表，详见www.w3school/tags/tag_link.asp-->
</head>
<body><!--body 元素定义⽂档的主体。body 元素包含⽂档的所有内容（⽐如⽂本、超链接、图像、表格和列表等等。）-->
<h1 name="fortarget"><!--h1到h6标签定义了标题并分别对应不同的标题⼤⼩.另,html中每个元素都可定义name或id属性⽤于标识该标签-->
正⽂主题
</h1>
<p><!--p定义了段落，段落与段落间会⾃动换⾏，浏览器同时会在相邻的段落之间插⼊⼀些垂直的间距。但注意，
浏览器忽略了源代码中的排版（省略了多余的空格和换⾏）故应使⽤<br/>标签实现换⾏。
另，<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。-->
感谢阅读
欢迎指正
换<br/>
⾏
</p>
<hr/><!--hr⽔平分隔线-->
<pre>
<strong>你</strong>
们好
</pre><!--pre标签内的内容允许保留空格和换⾏等，可⽤于呈现代码(当然更好的是⽤<code>⽅便浏览器做出处理)。
其中不可嵌套会使段落断开的标签，仅允许物理样式和基于内容的样式变化（如上⾯的<strong>标签），还有链接、图像和⽔平分隔线-->
<!--pre内的符号也会被转换，<：< ; > : > ; " : " ;    : 不间断空格； & : &
更多请参考www.w3school/html/html_entities.asp-->
<!--<strong>等特殊样式定义标签见www.w3school/tags/tag_phrase_elements.asp-->
<ul><!--⽆序列表-->
<li>第⼀项</li>web浏览器在哪里打开
<li>第⼆项</li>
</ul>
<ol><!--有序列表-->
<li>第⼀项</li>
<li>第⼆项</li>
</ol>
<dl><!--⾃定义列表-->
<dt>First term</dt><!--定义项名-->
<dd>Definition</dd><!--定义项的内容-->
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
<table border="1"><!--table定义了表格，其可见程度和⼤⼩等视觉效果属性可控详见www.w3school/tags/tag_table.asp-->
<tr><!--tr定义表的⾏-->
<th>Month</th><!--th定义表中该⾏的标题项-->
<th>Savings</th>
</tr>
<tr>
<td>January</td><!--td定义与前⾯tr定义的标题对应的项-->
<td>$100</td>
</tr>
</table>
<form action="ample/test.asp" method="post/get"><!--form定义了表单，⽤于向服务器发送⽤户输⼊
action属性表明⽬标URL（这⾥随便写了个所有下⾯的提交可能不会有效果）,
method表明http请求⽅法的类型对应不同的数据发送⽅式（这会影响web后端服务器的处理）但仅限GET和POST
（可参考baike.baidu/view/1628025.htm?from_id=243074&type=syn&fromtitle=http&fr=ala
ddin#5）-->
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50"><!--表单中的输⼊元素均使⽤input标签，通过type属性选择不同的元素。text为⽂本域-->
<input type="password"><!--password为密码输⼊框（输⼊的字符以⾮明⽂⽅式显⽰）-->
<input type="checkbox" checked="checked"><!--checkbox为复选框-->
<input type="radio" checked="checked"><!--radio为单选框-->
<input type="submit"><!--submit为按钮，点击此处同时将本页中各个表单的内容发送到各表单URL所处服务器。
注：type为button的也是⼀种按钮，但它不触发数据的发送和跳转，⼀般⽤于和avascript脚本关联触发脚本程序的运⾏-->
<input type="reset"><!--reset为重置按钮。重置按钮会清除表单中的所有数据。-->
<input type="hidden" value="hiddenmessage"><!--hidden定义隐藏的输⼊字段。⽤户不可见但发送数据时其value属性的值仍会发送。
注：表单中输⼊的⽂本或做出的选择实际上最后改变了对应元素的value属性，
在提交表单时这些value属性的值会根据form标签中methon属性标明的⽅式以⼀定格式发送到URL所指⽰的服务器-->
<input type="file"/><!--file⽤于⽂件上传-->
<select><!--select下拉单选框，带有selected的option选项会被预选 select更多修饰性属性（如规定必选）见www.w3school/tags/tag_select.asp--> <option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="10"
cols="20"></textarea><!--textarea是⽐⽂本域更⼤的⽂本输⼊框-->
</form>
<!--frameset⽤于定义框架集（即在⼀个窗⼝中打开⼀个或多个html页⾯，可⽤于实现导航（⼀个页⾯存放书签列表另⼀个⽤于显⽰书签指向的页⾯））
在此由于不⽅便展⽰感兴趣可参考www.w3school/html/html_frames.asp-->
<a href="www.w3school">超链接</a><!--a标签表⽰超链接，在href属性中给出链接的⽬标URL.注，a也有target属性⽤于定义在哪⾥打开链接--> <br/>
<a href="www.w3school"><img src="www.w3school/i/site_photoref.jpg" alt="图⽚超链接"></a>
<!--图⽚也可以⽤于承载超链接，alt属性存放当图⽚⽆法正常显⽰时显⽰的替代字符串。
更复杂的⽤于控制图⽚中响应点击位置的<map>标签见www.w3school/tags/tag_map.asp-->
<a href="#fortarget">跳转到前⾯</a><!--使⽤href=”#itemname“的形式可调转到URL#itemname所在的位置（相当于滚轮⾃动转到该元素显⽰处），
注意，仍然遵循相对寻址，故应注意前⾯的base给出的起点会影响此处的效果
该⽅法可⽤于创建页内导航书签或跨页导航书签（跳转到另⼀页⾯的特定某处）-->
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。