其他分享
首页 > 其他分享> > HTML基础

HTML基础

作者：互联网

今日内容概要

HTML简介

HTML是构建网页的骨架，几乎所有的网站都是HTML构建
HTML超文本标记语言

HTML标签分类：1.双标签
              <a></a>
            2.自闭和标签(单标签)
              <img/>

HTML文档结构
<html>
  <head>编写给浏览器查看的内容</head>
  <body>编写给用户查看的内容</body>
</html>

HTML语法注释
  <!--单行注释-->
  <!--
  多行注释
  -->
注释快捷键ctrl+?

head内常见标签

title       定义网页标题
style       内部支持css代码
script      内部支持js代码，还可以通过src属性导入外部js文件
link        通过href属性导入外部css文件
meta        定义网页源信息
keywords    关键字搜索
description 网页描述信息

body内基本标签

h1~h6 标题标签
p     段落标签
b     加粗
i     斜体
u     下划线
s     删除线
br    换行
hr    水平分割线

标签分类
  1.单双标签
  2.块级标签(h1~h6,p)
    独占一行
  3.行内标签(u,i,s,b)
    自身文本多大就占多大

特殊符号

&nbsp; 空格
&gt;   大于号
&lt;   小于号
&amp;  &符号
&yen;  羊角符
&copy; 版权符
&reg;  注册

常见标签

布局标签：div 块级标签
        span 行内标签

'''
标签是可以嵌套的，需要遵循以下规则
块级标签可以无限制嵌套块级标签和行内标签
特例：p标签虽然是快级标签，但是不能嵌套块级标签
行内标签不能嵌套块级标签，可以嵌套行内标签
'''

1.a标签：连接标签
    方法一：通过href属性指定网址(URL)点击跳转
           当前页面跳转 target="_self" 默认
           新建页面跳转 target="_blank"
    方法二：锚点功能
           通过href属性指定标签的id值点击跳转到对应位置

2.img标签：图片标签
    src属性指定图片地址
        本地地址和网络地址
    alt属性编写文本
    	用于图片无法加载情况下的提示信息
    title属性写文本
    	用于鼠标悬浮在图片上提示的文本信息
    height,width属性写像素
         用于调整图片尺寸
         调整的时候修改一个图片另一个等比例缩放
         同时调整多个图片可能会造成图片失真

标签两大重要属性

1.id属性(个体查找)
  相当于标签生份证号，在同一个html页面上id不能重复

2.class属性(群体查找)
  相当于python中面向对象类的继承，可以将多个标签分为一类
  <h1 class='c1'></h1>
  <p class='c1'></p>
  一个标签可以有多个类
  <h1 class='c1 c2 c3'></h1>
  <p class='c4 c5 c6'></p>

列表标签

1.无序列表
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ul>

2.有序列表
  <ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ol>

3.标题列表
  <dl>
    <dt>111</dt>
        <dd>222</dd>
    <dt>333</dt>
        <dd>444</dd>
  </dl>

表格标签

需要展示一些具体固定格式的多余数据时可以考虑使用

表格标签格式
  <table>
    <thead></thead> 表头
    <tbody></tbody> 表单
  </table>

  tr标签：表示一行
  th标签：表头字段名称
  td标签：普通单元格数据

  <table border="1" cellpadding="3" cellspacing="1">
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>hobby</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>sss</td>
            <td>18</td>
            <td>music</td>
        </tr>
        <tr>
            <td>lll</td>
            <td>18</td>
            <td>run</td>
        </tr>
    </tbody>
  </table>

  border: 表格边框
  cellpadding: 内边距
  cellspacing: 外边距
  width: 像素 百分比（最好通过css来设置长宽）
  rowspan: 单元格竖跨多少行
  colspan: 单元格横跨多少列（合并单元格）

image

标签：块级,行内,标签,基础,嵌套,HTML,属性
来源： https://www.cnblogs.com/sly0/p/15880768.html