HTML初识

HTML初识

web标准

web定义

让不同的浏览器按照相同的标准显示结果，让展示效果统一

web标准的构成

  1. 结构 HTML 页面元素和内容
  2. 表现 CSS 页面外观 样式 颜色
  3. 行为 JavaScript 页面交互

五大浏览器

  • IE浏览器
  • 火狐浏览器（Firefox）
  • 谷歌浏览器 （Chrome） 占比60%左右
  • Safari浏览器
  • 欧朋浏览器 （Opera）

注意：浏览器的渲染引擎不同，解析出来效果会存在差异

HTML的概念

HTML定义

超文本标记语言 对网页的内容进行描述

HTML的骨架结构

<!DOCTYPE html> <!-- 文档类型说明 告诉浏览器是哪个版本的HTML -->
<html lang="zh-CN"> <!-- 网页使用的语言 搜索引擎是归类浏览器翻译 --> <!-- 网页的整体 -->
<head> <!-- 网页的头部 -->
    <meta charset="UTF-8"> <!-- 万国码 国际化字符编码 防乱码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><!--网页的标题--></title>
</head>
<body>
 	<!--网页的主体-->
</body>
</html>

SE0三大标签

title：网页标题标签

用户搜索关键词之后，首先看到的就是你网站的标题

<title><!--网页的标题--></title>

keywords：网页关键词标签

<！-页面关键词->

<meta name=“keywords” content=“个人活动发布，会办app，活动管理，会议管理，社群理“/>

description ：网页描述标签

<！-页面描述->
<meta name=”description“ content=”发布个人会议，发布公司会议，w我们都可以帮你找到合适的会议地点和参会观众“>

ico图标设置 标题左侧的小图标

<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">

标签的结构

单标签自成一体 无法包裹内容

<开始标签>包裹的内容</结束标签>   <!--双标签-->
<br />  <!--单标签-->

标签的属性

标签可以存在多个属性 必须以空格分开

<strong class="one tow"></strong>
class="one"  属性名="属性名"

标签学习

标题标签

文字都有加粗 都独占一行

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

段落标签

段落和段落之间存在缝隙 并且 独占一行

<p>我是段落标签</p>

换行标签 + 水平线标签

HTML5之前必须加 / HTML5之后 不用

<br />   <hr />   
<br>	 <hr>

图片标签

<img src="路径" 
     alt = "替换文本 图片加载失败显示alt" 
     title ="提示文本  鼠标悬停显示title"
     width ="宽度"	
     height ="高度"   <!--宽和高填一个就会等比例缩放-->
>

路径的介绍

绝对路径

相对路径

  1. 同级目录

  2. 下级目录

  3. 上级目录

    注意：../指向上查询一个文件夹 多个 ../../../

音频标签

音频标签只支持MP3 ，WAV，Ogg

<audio src="路径" controls loop autoplay ></audio>
  • controls 显示插件
  • loop 循环播放
  • autoplay 自动播放 （部分浏览器不支持）

视频标签

视频标签只支持MP4，webm，ogg

<video src="路径" controls loop autoplay muted></video>
  • controls 显示插件
  • loop 循环播放
  • autoplay 自动播放 （部分浏览器不支持）
  • muted 静音自动播放

链接标签

<a href="路径" target="_blank">hhh</a>
  • target 链接打开形式
  • _self 自身窗口打开
  • _blank 新建窗口打开

空链接

<a href="#"></a>

注意 ： 点击之后回到顶部 不确定最终位置 用空连接占位

锚链接

<a href="#red">跳转到red</a>
<p id="red">red</p>

列表标签

ul ol 标签里只可以包含 li 标签 ，li标签里可以包含任何内容

dl里面 只可以包含dt dd 标签 ，dt dd 标签中可以包含任何内容

有序列表

<ol>
    <li>香蕉</li>
    <li>桃</li>
    <li>柿子</li>
    <li>梨</li>
</ol>

无序列表

<ul>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
</ul>

自定义列表

<dl>
    <dt>标题</dt>
    <dd>哈哈哈</dd>
    <dd>哈哈哈</dd>
    <dd>哈哈哈</dd>
</dl>

表格标签

表格标签

<table border="1" width="500px" height="500" cellpadding="10" cellspacing="0">  <!--表格主体-->
  <caption>
        <h2>大标题</h2>
  </caption>
  <tr>
        <th>小标题</th> <!--表头-->
        <th>小标题</th>
        <th>小标题</th>
  </tr>  
  <tr>  <!--表格行-->
        <td>表格单元格</td> 
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
</table>
  • border 边框
  • width 宽度
  • height 高度
  • caption 大标题
  • cellpadding 单元格内边距
  • cellspacing 单元格边框间距

表格结构

    <table>
        <thead>
            <tr>
                <th>小头部</th>
                <th>小头部</th>
                <th>小头部</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>身体</th>
                <th>身体</th>
                <th>身体</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>底部</th>
                <th>底部</th>
                <th>底部</th>
            </tr>
        </tfoot>
    </table>
  1. thead 头部 不受table标签样式限制
  2. tbody 身体
  3. tfoot 底部 不受table标签样式限制

合并单元格

不能跨结构 合并 例如: thead 和 tbody

  • rowspan 跨行合并 上下 方向 删除合并的单元格
  • colspan 跨列合并 左右 方向 删除合并的单元格

**注意： **

表单标签

文本框

 <input type="text" placeholder="占位符" value="默认值" required autofocus>
  • required 必填项
  • autofocus 自动聚焦

密码框

<input type="password" name="password" placeholder="请输入密码" autocomplete="off">
  • autocomplete="off" 浏览器不记住用户输入的值
  • autocomplete="on" 浏览器记住用户输入的值 默认值

单选框

性别：<input type="radio" name="gender" checked> 男
      <input type="radio" name="gender">  女

复选框

爱好：<input type="checkbox" name="happy">  抽烟
      <input type="checkbox" name="happy">  吃茶
      <input type="checkbox" name="happy">  赏花

注意：单选框和复选框需要相同的 name 属性 才能实现

​ checked 默认选中

value 和name

  • value 用户输入的内容
  • name 当前控件的含义

文件选择

<input type="file" name="file" multiple>

multiple 可以选择多个文件

  • 使用file 时 必须添加 enctype="multipart/form-data" ；

  • <form action="" method="get" enctype="multipart/form-data">
    <input type="file" name="file">
</form>

  • enctype 默认情况只能上传文本格式的文件

  • multipart/form-data 是将文件以二进制的形式上传，这样可以实现多种类型的文件上传

按钮

按钮需要配合form标签使用

<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="button" value="普通按钮  配合 js 使用">

button按钮

按钮需要配合form标签使用

<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
<button type="button">普通按钮  可以放图片</button>

下拉框

<select name="city" id="">
    <option value="">1</option>
    <option value="">2</option>
    <option value="" selected>3</option>
    <option value="">4</option>
    <option value="">5</option>
</select>
  • select 标签的整体
  • option 下拉菜单的每一项
  • selected 默认选中

textarea 文本域标签

<textarea cols="30" rows="10" ></textarea>
  • cols 文本可见宽度
  • rows 文本可见行数

label标签

<label><input type="radio" name="gender"> 男</label>
<input type="radio" name="gender" id="nv"> <label for="nv"> 女</label>
  1. 直接用label把内容包裹起来
  2. 用label包裹文本 在表单添加id属性 label for属性和id属性值一样

语义化标签

<header>头部</header>
<nav>导航</nav>
<footer>底部</footer>
<aside>侧边栏</aside>
<section>区块</section>
<article>文章</article>

注意：标签和div一致 比div多了语义

字符实体

&nbsp; 空格
&gt;   大于号
&lt;   小于号
&yen;  元
&copy; 版权
posted @ 2021-10-25 16:13  rain_sparse  阅读(94)  评论(0)    收藏  举报