• 【HTML】重点知识内容~快速上手

    推荐前端学习路线如下：

    HTML、CSS、JavaScript、noodJS、组件库、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack 和 vite、Vue 和 React 码源、NextJS、React Native、后端内容。。。。。。

    HTML基本结构：

    2.  
    3. <html>html>      根
    4.  
    5. <head>head>      头部  放置页面相关信息
    6.  
    7. <body>body>      身体  放置内容
    8.  
    9. <title><title>     标题

    网页结构展示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		
    6. 		<title>title>
    7. 		
    8. 	head>
    9. 	<body>
    10. 		【HTML】重点知识内容~快速上手
    11. 	body>
    12. html>

    常用标签：

    h1~h6

    表示一级到六级标签 文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距

    1. <h1>一级标题h1>
    2. <h2>二级标题h2>
    3. <h3>三级标题h3>
    4. <h4>四级标题h4>
    5. <h5>五级标题h5>
    6. <h6>六级标题h6>

    p

    标识一个段落(段落与段落之间有段间距)；

    默认情况，在网页上，页面上的内容不会按照我们写的代码进行换行。`回车` 会被渲染成一个 `空格`；

    1. <p>这是一段文字p>
    2.  
    3. <p>
    4.   这是一段文字
    5. p>

     

    img

    image的缩写，img是一个单标签，功能是在一个网页上展示一个图片。

    属性

    • src
      source的缩写，表示图片的源，在src可以设置图片地址
    • alt
      当图片加载失败时显示对应的alt中的文本内容
    • title
      当鼠标放在图片上时，显示一段提示文字
    • width 宽
    • height 高

    src

    可以是绝对路径，也可以是相对路径

    • 绝对路径
      可以使用电脑中的文件的路径 E:\H5\02_HTML\代码\xxx.jpg
      也可以使用网络路径 https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png 未来我们的网页上，最后上线，几乎都是网络地址
    • 相对路径
      一般情况下，我们在做静态页面时，页面中的背景图，图标等不常更改的资源。一般存放在项目中，做相对路径引入。

    相对路径记住两个概念 ./ 和 ../，分别表示当前目录和上一级目录。一般我们在正常的项目结构中。

    推荐一个使用方法，在src中直接输入 ./ 接下来根据提示选择对应的文件夹及对应的文件

    1. - 项目文件夹
    2.   - css
    3.   - img
    4.   - js
    5.   - 网页1.html
    6.   - 网页2.html

    大小设置

    我们可以给图片添加width和height两个属性，设置图片的宽高

    • 数字
    • 百分比

    注意！！！宽高只要设置一边，就会等比缩放，如果都设置，除非都是等比例缩放，否者会变形

    <img src="图片地址" alt="图片加载失败时显示的文字" title="鼠标悬停后显示的内容" width="100" height="100"/>

    文字的样式属性（强调属性）

    em i

    可以让文字倾斜，em表示强调，i表示文字斜体。在项目中，很多人把 i 作为图标展示的标签。

    stong b

    可以让文字加粗，stong表示强调，b表示文字加粗。

    br

    可以在网页中实现换行，就像是一个回车。
    如果我们在项目开发中，主动频繁使用 br，说明写的有问题

    hr

    分割线，在网页上实现一条横线，也很少使用

    1. <em>倾斜em>
    2. <i>倾斜i>
    3. <strong>加粗strong>
    4. <b>加粗b>
    5. <br>
    6. <hr>

    特殊标签：

    1. 2<sup>3sup>   上标
    2. 0<sub>2sub>   下标
    3. <del>del>     删除线
    4. <u>u>         下划线
    5. <s><s>          删除线

    特殊符号

    1.     空格
    2. >     大于号
    3. <     小于号
    4. ©   版权

    a

    超链接，在网页上，存在着很多的超链接。一定要会用

    属性

    • href 必填属性
      超链接跳转路径的设置，可以是网址，也可以是相对路径
    • target 设置窗口的打开方式； _blank 页面打开时在新的窗口中打开，如果不设置，则在当前窗口打开； _self 默认值，打开本窗口
    • title
      当鼠标放在超链接上时，显示一段提示文字
    1. <a href="链接">超链接a>
    2. <a href="链接" target="_blank">超链接a>

    列表

    • 有序列表
    • 无序列表
    • 定义列表

    无序列表在网页中应用最多

    有序列表

    1. <ol type="" start="">
    2.   <li>li>
    3.   <li>li>
    4.   <li>li>
    5. ol>

    type类型：

    type="A/a/I/i/1"

    start="4"

    定义开始位置，属性值必须是数字。

    无序列表

    1. <ul type="">
    2.   <li>li>
    3.   <li>li>
    4.   <li>li>
    5. ul>

    type类型：

    type="disc" 实心圆

    type="circle" 空心圆

    type="square"  方形

    type="none"   没有

    定义列表

    1. <dl>
    2.   <dt>标题  关键词（可以插图片和文本）dt>
    3.   <dd>对内容的详细解释dd>
    4.   <dd>dd>
    5.   <dd>dd>
    6.   <dd>dd>
    7.   <dd>dd>
    8. <dl>

    表格（table）

    这是一个重要的标签，但是前期我们所做的面向用户的网站中，不常用。

    插件：表格宽*高=table>tr*n>td*n

    1. <table>
    2.   <thead>
    3.     <tr>
    4.       <th>th>
    5.       <th>th>
    6.       <th>th>
    7.       <th>th>
    8.       <th>th>
    9.     tr>
    10.   thead>
    11.   <tbody>
    12.     <tr>
    13.       <td>td>
    14.       <td>td>
    15.       <td>td>
    16.       <td>td>
    17.       <td>td>
    18.     tr>
    19.     <tr>
    20.       <td>td>
    21.       <td>td>
    22.       <td>td>
    23.       <td>td>
    24.       <td>td>
    25.     tr>
    26.     <tr>
    27.       <td>td>
    28.       <td>td>
    29.       <td>td>
    30.       <td>td>
    31.       <td>td>
    32.     tr>
    33.     <tr>
    34.       <td>td>
    35.       <td>td>
    36.       <td>td>
    37.       <td>td>
    38.       <td>td>
    39.     tr>
    40.   tbody>
    41.   <tfoot>
    42.  
    43.   tfoot>
    44. table>

    在写表格时，thead , tbody , tfoot 可以省略不写。

    表格的属性

    -width=""            表格的宽度

    -height=""           表格的高度

    -border=""           表格的边框

    -bordercolor=""      表格边框的颜色

    -bgcolor=""          背景颜色

    -cellspacing=""      单元格之间的间距

    -cellpadding=""      内容到边框的间距

    -aligen=""  left  center  right     水平对齐方式  

    -valign="" top bottom  middle  basline    垂直对齐方式

    跨行

    如果我们想让某一个单元格，跨多行，给这个td添加 `rowspan` 可以实现跨行操作

    -rowspan="所要合并单元格的行数"   合并行

    跨列

    如果我们想让某一个单元格，跨多列，给这个td添加 `colspan` 可以实现跨列操作

    -cowspan="所要合并单元格的列数"   合并列

     

    form表单

    表单标签未来不太常用，因为form已经逐渐被ajax替代了。但是我们前期写页面时，还是要使用

    我们应该把所有的表单内元素包裹在一个form中（非必须）

    <form method="post">form>

    method 方式，方法，定义表单提交的方法。

    get是获取

    method="get" 从服务器上获取数据，在数据传输的过程中，用可以在地址栏上看到过程，默认传递方式，安全性比较低。

    post 是传递数据

    method="post" 向服务器传送数据，在数据传递过程，用户在地址栏上看不到，安全性比较高。

    <form action="">form>

    action设置数据传递之后给谁？

     

    input(行内块、置换元素)

    input有很多种形态，需要通过type属性进行控制

    1. <form>
    2.   <input type="text">
    3. form>

    type

    • text
      文本输入框，最常用，让用户在文本框中输入我们想要获取的内容
    • password
      密码，让文本以密文显示（不安全）
    • radio
      单选（必须加一个name属性,且同组的属性值必须一样），多个选项只选其一时使用，如性别
    • checkbox
      多选，当有多个选项需要选择时，如爱好
    • submit
      提交按钮，自动显示提交两个字，可以通过value修改
    • reset
      重置按钮，自定显示重置两个字，可以通过value修改
    • button
      普通按钮，没有功能，需要通过value配置显示文本
    • file
      文件上传，可以进行本地文件的上传功能
    1. <form>
    2.   <input type="text" name="" value="" placeholder="这是一个提示文本，输入内容后消失">
    3. form>

    value

    一般情况下，value用来获取对应用户输入的值,用来帮助系统显示内容。

    name

    如果我们要使用表单提交，则所有的表单内元素都需要加name属性

    1. <input type="radio" name="sex" id="qita"><label for="qita">不明label>    点击文字即可选中
    2. <label for=""><input type="radio" name="sex" checked>男label>       方便修改文本样式

    placeholder

    设置提示信息

    button

    普通按钮，如果把button放在表单里，则button自动会有提交功能

    1. <button>按钮button>
    2. <input type="button">            两种的作用相同

    select > option

    下拉选择框，需要用select包裹多个option

    1. <select>
    2.   <option value="123">选项2option>
    3.   <option value="123">选项3option>
    4.   <option value="123">选项1option>
    5.   <option value="123">选项4option>          选项显示在浏览器，123是提交给服务器的数据
    6. select>

    textarea

    文本域，用于输入多行文本时使用

    <textarea>textarea>

    表单内元素的状态

    • blur
      失去焦点
    • focus
      获取焦点
    • checked 给radio和checkbox添加，用于设置对应选项的选中状态，添加则表示选中
    • selected 给option添加，用于设置默认被选中的选项
    • readonly 只读，添加到输入框，无法修改内容，只能查看
    • disabled 添加到元素上，则对应元素禁用，样式变灰

     

    页面划分

    1. <div>用来划分页面区域的div>
    2. <span>修饰独立小部分内容span>

    两者没有固定的格式表现。对他应用样式（CSS）时，他才会产生视觉上的变化。

     

     

    55361c7d731b45f2b1899a68e8a598aa.jpeg

     

     

  • 相关阅读:
    Notepad2 v4.22.11r4478 开源轻量级文本编辑软件
    DNSLog注入
    【超详细断点级别讲解 SpringSecurity】项目实战：用户认证、用户授权
    计算机毕业论文java毕业设计选题源代码javaweb学生信息管理/学生考试系统[包运行成功]
    多重视窗管理程序 screen
    将函数实现放到CPP报“无法解析的外部符号...”，系VS Bug
    Supervisor启动并管理Celery相关进程
    VBA之正则表达式（44）-- 拆分商品和规格
    Android 车载应用开发指南 - CAN Bus 协议详解
    Dockerfile 安装python3.7到tensorflow1.15.0镜像中
  • 原文地址：https://blog.csdn.net/leoxingc/article/details/128086567