HTML 基本标签

HTML 

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Hello</title>
    </head>
    <body>
        <h1>
            Hello World
        </h1>
    </body>
</html>

  • 注释

    <!-- 注释内容 -->

注意： 注释不能嵌套使用

3.4 文本标签

HTML 标签

描述整个 HTML 文件，方便浏览器表示

HTML 标签内部有两个子标签：head、body

head 标签

描述整个 HTML 头部咨询信息

包括：title 标题、meta 元数据、style 样式、script 脚本、link 连接、…...

body 标签

描述网页显示的内容

所有网页中显示的内容都会写到body标签中

3.5 排版标签

p 标签： 描述段落、将HTML内容拆分成段落

  • align 对其标签： left、center、right 。默认left
  • br 换行标签： 将段落内容进行换行，一般写成
  • hr 分割线标签： 一般写成
    • hr 标签的属性：
      • size: 厚度、大小。
      • width：宽度、单位可以使 px 像素，也可以是% 百分率 ；默认值为 100%。
      • color：颜色。

3.6 div 块标签

div 块标签： 在文档中定义块，一般需要和css结合实现网页

span 标签： 在文档中定义文本块、行内块。

块级元素： 以新行为开始

行内元素： 不以新行为开始

作用：

div+css：制作网页的各式各样

span：

3.7 字体标签

font 标签： 规定文本的字体、颜色、大小等。

常用属性：

  • size：字体字号大小，最大值是7；最小值是1
  • face：字体。
  • h1~h6：1号标题到6号标题，1号标题为最大...

3.8 语义

  • i和em都是表示倾斜，i表示视觉上的倾斜；em表示强调
  • b和strong都是表示加粗，b表示视觉上的加粗；strong表示强调
  • u和ins都表示下划线，u表示视觉上的下划线；ins表示强调
  • s和del都是表示删除线，s表示不正确的文本；del表示要删除的文本
<i>倾斜</i>
<em>倾斜</em>
<b>加粗</b>
<strong>加粗</strong>
<s>删除线</s>
<del>删除线</del>
<u>下划线</u>
<ins>下划线</ins>

image-20190819111633759.png

3.9 列表标签

ul、ol、li

  • ul： 无序列表（Unorderde List）

    属性：type：列表项目类型，disc（默认值，实心圆）、square（方块）

<!-- 默认的样式 -->
<ul>
    <li>嵌入式开发</li>
    <li>Java后台开发</li>
    <li>HTML5前端开发</li>
    <li>Python爬虫</li>
</ul>

<ol>
    <li>首先</li>
    <li>其次</li>
    <li>再次</li>
    <li>最后</li>
</ol>

<!-- 添加元素后的样式 -->

默认样式：

image-20190819112116541.png

添加元素后的样式：

3.10 图片标签

img 标签： 在网页上插入图片

注意： img 是单标签

<img ser="图片路径" alt="图片代替描述文字" width=“50%” height=“50%”/>
  • src： 图片地址
  • alt： 图片的代替文字
  • width： 图片的宽度，可以用px像素或者是%百分比。
  • height： 图片的高度，可以用px像素或者是%百分比。
  • 可以使用 GIF 等动态图片...

3.11 连接标签

a 标签： 添加超链接，可以从当前页面跳转到指定的连接上。

属性：

  • href： 链接的目的地址
  • name： 锚点的名字
  • target: 打开页面的方式
    • _self:在当前页面打开（默认）
    • _blank:在新的页面打开
<!-- 在当前页面打开 -->
<a href="https://www.baidu.com">百度<a/><br/>
<!-- 在新的页面打开 -->
<a href="https://www.baidu.com" target=“——blank”>百度</a><br/>
<!-- 锚点 -->
<a href="#锚点名称">跳转到锚点</a><br/>
<a name="锚点名称">我是一个锚点</a><br/>
<!-- 锚点示例 -->
<a href="#a1">跳转到a1</a>
<a name="a1">我是锚点a1</a>

3.12 表格标签

table 标签： 用于创建表格

属性：

  • border： 表格的边框大小
  • width： 表格的宽度，可以使用px像素或者%百分率。
  • align: 对其方式 ，left（左对齐 默认）、center（居中）、right（右对齐）
  • bgcolor： 设置表格的背景颜色
<table border="1" width="60%" align="center" bgcolor="aqua">
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>24</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>18</td>
    </tr>
</table>

image-20190819143826460.png

<table border="1" width="60%" align="center" bgcolor="aqua">
    <tr align="center" bgcolor="#6495ed">
        <td>张三</td>
        <td>男</td>
        <td>24</td>
    </tr>
    <tr bgcolor="#7fffd4">
        <td>李四</td>
        <td>男</td>
        <td>18</td>
    </tr>
</table>

image-20190819144236446.png

<table border="1" width="60%" align="center" bgcolor="aqua">
    <caption>人员信息表</caption>
    <tr align="center" bgcolor="#f0f8ff">
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr bgcolor="#6495ed">
        <td>张三</td>
        <td align="center" bgcolor="blue">男</td>
        <td>24</td>
    </tr>
    <tr align="right" bgcolor="#7fffd4">
        <td bgcolor="#8a2be2">李四</td>
        <td>男</td>
        <td>18</td>
    </tr>
    <tr>
        <td colspan="3">共2人</td>
    </tr>
</table>

image-20190819145500722.png

3.13 特殊符号

posted @ 2019-08-19 15:18  执笔画素颜  阅读(287)  评论(0)  编辑  收藏  举报