HTMLmd

最新推荐文章于 2024-01-24 23:45:53 发布

aRimsiky

最新推荐文章于 2024-01-24 23:45:53 发布

阅读量172

点赞数

分类专栏： html 笔记文章标签： html

本文链接：https://blog.csdn.net/asoulsee/article/details/114791327

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

笔记

1 篇文章 0 订阅

订阅专栏

(HTML)Hyper Text Markup Language超文本标记语言

关于特殊字符

在html中有很多字符有其特定的功能不能直接显示，需要替换成字符实体才能在页面中显示。
- < <
- > >
- ≤ ≤
- ≥ ≥
- " "
- & &
- …
现用现查详情参见HTML 实体
文件编码问题
- 注意文档的编码格式，可能会出现中文错误

文件标签
➢ <!DOCTYPE html>: 定义文档类型
➢ meta：
- 用于向客户的浏览器传递信息和命令
- 一个<head> 标签可以包含多个/ 标签
  - name:
    - description: 定义网页的描述内容,但不要过长,否则搜索引擎会以"…"省略
    - robots: robots用来告诉搜索引擎页面是否允许索引与查询，content的参数有all.none、index、noindex、follow、nofollow;默认是all
    - author: 标注网页的作者
  - http-equiv:
    - content-type: 设定页面使用的字符集
    - refresh: 自动刷新并转到新页面
    - set-cookie:
      - 设置页面缓存过期时间;
      - 如果网页过期，那么存盘的cookie将被删除
    - expires:用于设定网页的到期时间。网页过期时，必须从服务器上重新加载页面内容
  - content:
    - text: 内容文本,用于描述name或 http-equiv 属性的相关内容
➢html：html文档的根标签
➢head：头标签。用于定义html文档的一些属性，引入外部的资源
➢title：标题标签
➢body：体标签
文本标签(部分属性逐渐不建议使用，改用css样式)
➢注释：<!–…-->
➢换行：<br/>
➢<p> … </p>：段落
➢<hr/>:显示一条水平线,可设置属性👇

➢<b>:字体加粗
➢<strong> </strong>: 加粗
<b>标签和<strong>在表现上是相似的，官方给出的描述<strong>是用于重要事项的，感觉还是一样用，可能方便源码阅读的时候区分。
➢<i>: 斜体
➢<font>:字体样式
➢<center>:文本居中
➢ <u> : 下划线
➢ <sup> :论文引用上标^arimsky
标题标签
➢ <h1> to <h6>: 定义 HTML 标题使用<h1> … <h1> ， <h2> to <h2> ，…

图片标签
➢ <img>

<!--  img是标签
        src 属性设置图片路径

        Java 中的路径
            相对路径:
                从工程名开始算起
            绝对路径:盘符/目录/文件名

        Web中的路径
            相对路径
            .       表示当前文件所在的目录
            ..      表示当前文件的上一级目录
            文件名   表示当前文件所在目录的文件,相当于./ 文件名

            绝对路径:
            格式是:  http://ip:port/工程名/资源路径 -->

            <img src="../images/sunyanzi.gif" alt="名称">
            <!-- alt 当图片加载失败或丢失时显示的 -->

列表标签
➢ 无序列表 unordered list
- start 一个整数值属性，指定了列表编号的起始值。这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。
➢ 有序列表 order list <ol>
➢ 定义列表 dt dd

    <!-- 无序列表ul  有序ol 
        li 是列表项
    -->
    <dl>
        <dt>*</dt>
        <dd>define list</dd>
    </dl>

    <ol>
        <li>JavaScript</li>
        <li>HTML</li>
        <li>CSS</li>
    </ol>

    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>C++</li>
    </ul>

超链接标签 a
➢ URL
➢ <a>

target
- _blank 在新建标签页打开页面
- _self 在当前页面转到新页面,默认

    <a href="www.cctv.cn">check</a>
    <br>
    <a href="https://www.w3school.com.cn/tags/tag_meta.asp" target="_self">check2</a>
    <br>
    <a href="https://101.qq.com/?ADTAG=cooperation.glzx.web" target="_blank">check3</a>
    <br>
    <a href="./Html_Demo01.html">check4</a>

➢ 锚点连接：跳转到当前页面的某一位置

    <!--  不跨页锚点       -->
    <a name="one">第一章</a>
    <a href="#one">点我跳转第一章 </a>

    <!--  跨页锚点 -->
    <!-- 要跳转的页面👇 -->
    <a name="one">第一章</a>

    <!-- 当前页面👇 -->
    <a href="要跳转的页面名称.html#one">点我跳转第一章 </a>
    <!-- 
        总结：开关一定要有 “#”
        跨页锚点与不跨页锚点的唯一区别是跨页锚点开关要注明跳转页面路径！ 
    -->

➢ 图片热区

    <!-- 
        HTML <area> 标签格式：
        <map><area /></map>

        定义和用法
            <area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
        area 元素总是嵌套在 <map> 标签中。
            注释：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。
     -->
    <img src="img/Number.jpg" usemap="#mymap" alt="">
    <!-- img 标签中的usemap 与map 绑定 
        area 标签 shape 形状  coords 坐标区域 

        rect circle poly
        多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
        每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
        多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
    -->
    <map name="mymap">
        <area shape="rect" coords="0,0,320,140" href="https://www.baidu.com" alt="">

    </map>

表格标签
➢ <table>
➢ 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头(代替第一行的td)，td 元素定义表格单元。
➢ rowspan colspan 单元格合并
div 与 span
➢ span : 经常用来显示文字
表单标签

form: 用于定义表单，可以定义一个范围，范围代表采集用户数据的范围
- 属性：
  - action：指定提交数据的URL
  - method：指定提交的方式
    - 分类一共七种　两种常用（GET／POST）
- 表单项中的数据要想被提交，必须指定name 属性值
```
    <form action="#" method="GET ">
        <input type="text" name= "username" value="用户名">
        <input type="password" name="password" value="密码">
        <input type="submit" value="登录">
    </form>
```
1. get
  ➢请求参数会在地址栏中显示。会封装到请求行中
  ➢请求参数的大小有限制
  ➢不太安全
2. post :请求参数不会在地址栏中显示。会封装在请求实体中
```
    
    <form action="#" method="GET" enctype="" target="">
        用户名: <input name="username"><br>
        密码:<input name="password" type="password"> <br>
        <input type="submit" value="登录">
    </form>
    
```
3. action: 数据要提交的地址
4. enctype:
  1. = application/x-www-form-urlencoded 传递表单数据
  2. = multipart/form-data 传文件和数据
5. target: 和<a>标签用法一样
6. method: 提交的方式 GET POST

表单项标签<input> 标签
- input :可以通过type属性值，改变元秦展示的样式
- type属性:
  1. text :文本输人框，默认宽度为 20 个字符。
  2. password :密码输入框
  3. radio:单选框
    - 注意︰
      1．要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
      2．一般会给每一个单选框提供value属性，指定其被选中后提交的值
      3. checked属性，可以指定默认选中
  4. checkbox︰复选框
    - 注意∶
      1.一般会给每一个单选框提供value属性，指定其被选中后提交的值
      2. checked属性，可以指定默认选中
  5. button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
  6. search 搜索框
  7. file 上传文件
  8. reset 定义重置按钮。重置按钮会清除表单中的所有数据。
  9. submit 表单提交
  10. image 定义图像形式的提交按钮。
  11. hidden 定义隐藏的输入字段
  12. email 、date…
- placeholder:指定输入框中的默认提示信息，当输入框的内容发生变化，会自动清空提示信息，部分input 的type 不支持，一把用于文本框、password、email 等输入文本信息的input
- label 标签，常与input 标签配合使用: 指定输入项的文字描述信息
  - 注意︰
    - label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
```
   <form>
       <label for="male">Male</label>
       <input type="radio" name="sex" id="male" />
       <br />
       <label for="female">Female</label>
       <input type="radio" name="sex" id="female" />
   </form>
```

select 下拉列表

    <!-- multiple="multiple" 使select 可以多选 -->
    <select name="job" id="job" multiple="multiple" size="4">
        <option selected="selected" >程序员</option> <!-- selected="selected" 默认选中-->
        <option>中级程序员</option>
        <option>高级程序员</option>
        <option>系统分析师</option>

    <select name="edu" id="edu">
        <option>本科</option>
        <option>博士</option>
        <option>硕士</option>
        <option>大专</option>
    </select>