HIML-
<!DOCTYPE html> <!--并不是html标签,它指的是这个文档使用的是哪一种规范,这里是使用的是HTML5的规范-->
<html>
<head>
<meta charset="utf-8" /> <!-- 字符集-->
<title>开始学习HTML标签吧</title> <1-- html文档的标题 -->
<mata name="keywords" content="html,css,tutorial" />
<stytle>
.hi{
color: red; <1-- 由head标签包裹的内容是不会显示在浏览器上的-->
}
</stytle>
</head>
<body>
<p class="hi">hello world!</p> <!-- 设置了一个hello world的段落同时给他设置了一个名字为hi的类属性。-->
</body> <!-- 实际显示在浏览器上的内容由body标签包裹 -->
<!-- h1-h5标签的使用 -->
<h1>我是一级标题,最大的字号并加粗</h1>
<h2>我是二级标题</h2>
~
~
~
<h6>我是六级标题,最小的那个字号</h6>
<!-- 列表标签的使用(是一个嵌套标签:有一个默认符号在最前面有一个符号表示是一列) -->
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol> <!-- 有序列表:前面有一个数字表示它的顺序 -->
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 图片标签 -->
<img
width="100" 宽度
height="130" 高度
src="https://b.bdstatic.com/searchbox/icms/searchbox/img/san_logo.png" 图片的链接
alt="san logo" 对图片的文字描述(当图片无法正常显示的时候就会显示在旁边)
/>
<!-- 超链接标签 -->
<a herf="http://www.W3School.com.cn">W3School</a> <!-- 使用a标签,把网站地址赋给herf这个属性,下划线是a标签的默认样式 -->
<!-- p标签包裹文本并且可以使用其他的标签进行处理 -->
<p>
这是一段普通的文本<em>这是强调的内容</em> em标签处理后是斜体,而strong标签处理后为粗体
</p>
<!-- 表单标签,默认值。单行的文本区域,输入中的换行会被自动去除。(就是一个输入框)-->
<input type="text" />
<!-- 用br标签包裹并使用placeholder属性,把希望显示在文本框当中的提示文本赋给这个属性,就可以实现在文本框当中显示提示信息,当输入信息的时候,文本框中的提示信息就会消除。-->
<br>
<input type="text" placeholder="请填写文本信息" />
<br>
<!-- checkbox是复选框,可设为选中或未选中 -->
<br>
<input type="checkbox"/>first checkbox first checkbox为复选框后面的信息
<input type="checkbox"/>second checkbox
<br>
<!-- 让用户选择文件的控件 -->
<br>
<input type="file" />
<br>
<!-- 把type的值设为radio,则变成一个单选框 -->
<label>
<input type="radio" id="radio"/>
first radio
</lable>
另外,如果type的值是range的话,那它就是一个控制范围的标签;如果type的值是range的话,那它就是一个进度条拖动的控件;如果type的值是submit的话,那它就是一个提交的按钮。
像上面的复选框有个交互上的弊端,一定要点击方框才能勾选。对此可以给出以下优化写法:
<!-- 优化写法,这样点方框的文字描述也能勾选上 -->
<label>
<input
type="checkbox"
id="cboxl-pro"
value="first_checkbox"
/>first_checkbox</label>
<label>
<input
type="checkbox"
id="cbox2-pro"
value="second_checkbox"
/>first_checkbox</label>
<!-- 多行纯文本编辑控件,可在里面输入多行文字 -->
<!-- cols表示文本域的可视宽度,rows表示元素的输入文本行数(显示的高度) -->
<textarea name="story" rows="5" cols="20">
this is a textarea
</textarea>
在HTML当中,有一个重要的概念叫‘语义化’,简单来说就是写html网站的时候,要选择合乎语义的标签,便于开发者阅读。可以保证我们写出优雅的代码同时,让浏览器的爬虫和辅助技术更好的解析。
·在html中提供了一个专门用来表示键盘元素的标签,就是<kbd>标签。我们一般也会使用<pre>标签嵌套<code>标签来表示当前这一部分是一个代码段
·同时,在html5当中,也给我们提供了非常多的语义化标签。
<header>
<h1>观鸟网</h1>
<img src="图片链接” alt=图片的描述文字 />
<nav> <!-- 导航栏的部分用nav标签进行包裹;左侧的文章用aricle标签进行包裹;section标签用来包裹段落;侧边栏用aside标签 -->
<ul>
<li><span>主页</span></li>
<li><a> herf="#">开始</a><li>
<li><a> herf="#">图片</a><li>
<li><a> herf="#">设备</a><li>
<li><a> herf="#">论坛</a><li>
</ul>
</nav>
·在article的外侧使用main标签包裹
· 语义化的优点:1.使代码的可读性好
2.搜索引擎的爬虫会识别和爬取语义化的标签并设定权重
3.有利于网站的可访问性,使残障人士通过频率器等工具浏览网页
·除此之外可以利用MDN或W3School进行其他html标签的学习。
https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics