HTML 基础

最新推荐文章于 2024-07-11 16:52:21 发布

十疯

最新推荐文章于 2024-07-11 16:52:21 发布

阅读量71

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/weixin_46178697/article/details/113657518

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基础了解

1 HTML 是一种超文本标记语言, 用来描述网页的一种语言, 不属于编程语言

2 <!DOCTYPE html>  文档类型声明标签(不属于html标签);  相当于告诉页面我写的html代码

3 <html lang="zh-CN">      //相当于告诉浏览器, 当前页面的中文网页
4 <meta charset="UTF-8">   //设置当前页面以 UTF-8的字符集来显示文字, 防止乱码

5 <meta name="keywords" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场"/>  //标签优化---搜索关键词
6 <meta name="description" content="提供各类服饰、美容、.."/>  //标签优化---网站说明;  不超120个汉字
7 <meta name="renderer" content="webkit">    //告诉浏览器优先以webkit内核渲染当前页面

8 <title>zhangXiaoCuo-666</title>     //网站名-网站的介绍; 不超过28个字
9 <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">    //link:fav..(快速生成)

常用元素

1 元素类型 -- <!--  -->
    1 inline: (加粗: strong--b) (倾斜: em--i) (删除线: del--s) (下划线: ins--u)  span -- a
    2 inline-block: img -- input -- button -- textarea -- select -- label -- video -- audio
    3 block: (h1-h6) -- p -- div -- ul -- li -- header -- footer -- nav ...    

2 元素说明
    1 <img src="" alt="" title="">    <!-- alt==失效文本;  title==提示文字 -->
    2 <a href="" title="" target=" _self /_blank"> </a>     <!-- title==提示文字 -->

3 H5新增标签
    1 <header></header>  <nav></nav>  <footer></footer>  <article></article>  <section></section>
    2 <audio src="文件路径" controls muted autoplay loop></audio> 播放控件 /静音播放 /自动播放 /循环播放
    3 <video src="文件" controls muted autoplay loop></video>

4 实体字符
    &lt--小于号      &gt--大于号      &nbsp--空格     &copy--版权符

表单相关

完整的表单  --> 表单域 + 表单控件 + 提示信息
1 表单域 
  <form action="url地址" method="GET/POST" name="表单域名称"></form>  (不常用)
  
2 表单控件
  1 <input type="text">
    1 type -> text  password  radio  checkbox  file  button  submit  reset
    2 placeholder -> input::placeholder{ color: red;}  -- 修改提示文字的样式
    3 value -> input 表单值
    4 name -> input 表单名字
	5 checked -> 复选框, 布尔值
	6 required -> input 表单内容不能为空
	7 disabled -> input 表单禁用

  2 <label>   <!-- 和表单连用, 点击提示信息就相当于点击了表单 -->
    1 <label for="hhh">提示信息</label>   <input type="text" id="hhh">   
    2 <label>用户名：<input type="text"/></label>

  3 <select>  -- 下拉表单
    <select name="" id="">   
        <option>选项1</option>
        <option>选项2</option> ..
    </select>

  4 <textarea name=""></textarea>  -- 文本段落 (可当作 div 来设置属性样式)

表格标签

<table>  -- 表格根盒子
  <thead>  -- 表格头部
    <tr>  -- 行
      <th>4</th> -- 列
      <th>5</th> -- 列
    </tr>
  </thead>  ------------------------------- 表格头部
  <tbody>  -- 表格内容
    <tr>  -- 行
      <td>1</td> -- 列
      <td>2</td> -- 列
    </tr>
  </tbody>  ------------------------------- 表格内容
</table>

表单样式设置
   1 单元格之间的距离, 默认 2px;  -- cellspacing="0"   --行间 + table
   2 定义每个单元格的内边距;  -- cellpadding="10"   --行间 + table 或 设置td 的 padding
   3 边框合并  -- table {border-collapse: collapse;}   --CSS  --自带消除单元之间的距离
   4 跨行合并 rowspan="要合并的个数"
   5 跨列合并 colspan="要合并的个数"  -- 目标单元格写合并代码, 从html结构中删除多余单元格

HTML 结构 ❤

1 logo 优化
-----------------------------------------------------------------------------------
HTML 结构
  <div class="logo"> / <h1> / <a href="javascript:;" title="网站名称">网站名称</a>
  
CSS 样式
  a{
    display: block;   width: 80px;   height: 35px;
    background: url( logo图);  
    text-indent: -9999px;   overflow: hidden;
  }
-----------------------------------------------------------------------------------