<!DOCTYPE html> <!--根标签,一个HTML文档有且只有一个根标签--> <html lang="en"> <!-- 注释快捷键: ctrl + / HTML标签一般是成对存在,即开始标签+结束标签 head 标签: HTML头部 body 标签: HTML主体部分 --> <head> <!--指定 HTML使用的编码--> <meta charset="UTF-8"> <!--HTML标题,不是body里面展示给用户的标题,是每个网页最上面的小窗口--> <title>HTML基础知识</title> </head> <!--网页主体部分--> <body> <!--标题标签--> <h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3> <h4>这是一个标题</h4> <h5>这是一个标题</h5> <h6>这是一个标题</h6> <!--段落标签--> <p> 一个HTML文件主要有两部分组成:文件头和文件体 文件头就是标签包含的部分,用来告诉浏览器如何解析HTML文件 文件体就是标签包含的部分,用来存放网页显示的内容 </p> <!--内容分隔线--> <hr /> 在一个段落中如果要换行,又不想重开另一个段落,可以使用<br /> 这样就能实现效果 <br /> <!-- 的用法--> <!--每使用一次代表一个空格--> 每次使用它, 代表空格的实体字符 <br /> <!--字符实体标签--> <!-- HTML中有一些字符有特殊含义，例如：左尖括号<、右尖括号>等等。 为了能够在HTML文本中显示它们，我们需要使用字符实体。 字符实体有三部分：&符号 + 实体名 + 英文分号 比如:要在HTML中显示小于号，那么就需要这样写：< 下面列出一些常见的字符实体：
另外，还有一些其他比较常用的实体字符：
注意：字符实体是区分大小写的。
--> <!--字体颜色及大小设置--> <!--使用下面的方法有七种大小设置,再往下字体大小还是一样--> <font color="blue" size="1">Python</font> <font color="blue" size="2">Python</font> <font color="blue" size="3">Python</font> <font color="blue" size="4">Python</font> <font color="blue" size="5">Python</font> <font color="blue" size="6">Python</font> <font color="blue" size="7">Python</font> <font color="blue" size="8">Python</font> <br /> <!--格式化字体的粗细大小标签--> Python人工智能 <br /> <b>Python人工智能</b> <br /> <strong>Python人工智能</strong> <br /> <h1>HTML入门</h1> <small>HTML标签用法</small> <br /> <br /> <br /> 水的化学式:H<sub>2</sub>O <br /> X的平方:X<sup>2</sup> <br /> <!--保持段落之间的空格和换行--> <pre> 静夜思 床前明月光,疑是地上霜. 举头望明月,低头思故乡. </pre> <br /> <br /> <!-- 无序列表 type属性:指定列表类型 disc:点 square:方块 circle:圆圆 --> 菜单显示: <ul type="circle"> <li>宫保鸡丁</li> <li>黄焖鸡</li> <li>大盘鸡</li> </ul> <br /> <!-- 有序列表: type属性:指定列表类型,有 1\a\A\i\I --> 明星阵容: <ol type="a"> <li>刘德华</li> <li>彭于晏</li> <li>黄渤</li> </ol> <br /> <!--自定义列表标签--> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> <!-- a标签:超链接标签, 工作原理: 1)如果a标签的href属性是以http开头,那么浏览器会启用http协议解析该网址内容 2)如果a标签的href属性是以其他协议开头,那么浏览器就会检查注册表中是否存在处理该协议的软件 3)如果a标签是以file协议开头,那么浏览器就会在当前目录下查找是否存在指定资源 target:指定网页的打开方式 _self:在当前窗口中打开 _blank:在新窗口中打开 --> <a href="https://www.baidu.com" target="_blank">百度</a> <br /> <br /> <!--锚点定位--> <!--锚点定位可以定位到网页的某一位置,这样使用者就无需不停的滚动页面来寻找需要的信息--> <!-- 实现步骤: 1.定义锚点, name属性用于创建命名的锚.这里不需要指定 href属性 2.将 # 符号和锚名称添加到URL末端,这样可以跳转到锚位置 --> <a name="tips">这是提示</a> <a href="http://www.w3school.com.cn/html/index.asp#tips">跳转到这个提示部分</a> <br /> <!--图像标签,有img标签定义--> <!-- 比如 <img src="url" /> 一般 img是空标签,它只会包含属性,并且没有闭合标签 src属性:用于指定图片的位置,比如 http://www.w3school.com.cn/images/boat.gif alt属性:用来为图像定义一个可替换的文本,简单说就是图片显示不了时显示该文本内容 --> <a href="http://www.jd.com"> <img src="img/time2.jpg" alt="点开可进入京东官网" /> </a> <br /> <br /> <br /> <!--表格标签--> <!-- 比如做一个学员成绩表: border:设置表格边框的宽度 width:表格的宽度,以像素为单位 height:设置表格的最小高度 cellspacing:设置单元格之间的空白 --> <table border="1" width="500" height="200" cellspacing="0" align="left"> <!--设置表格标题--> <!--这里有 top,就有 bottem --> <caption align="top">学员成绩表</caption> <thead> <!-- align:设置行或列的对齐方式:left\center\right\justify --> <tr align="center"> <!--表格头--> <th>姓名</th> <th>性别</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td align="center">Jane</td> <td align="center">女</td> <td align="center">88</td> </tr> <tr> <td align="center">太白</td> <!--rowspan表格列合并--> <!--下面两个都是男,可以使用 rowspan标签--> <td rowspan="2" align="center">男</td> <td align="center">98</td> </tr> <tr> <td align="center">金星</td> <!--上面使用了 rowspan标签,因此这里可以省略--> <!--<td>男</td>--> <td align="center">68</td> </tr> <tr> <td align="center">平均成绩</td> <!--colspan表格行合并--> <td colspan="2" align="center">85</td> </tr> </tbody> </table> <br /> </body> </html>