• HTML基础知识

    目录

    HTML 注释

    单行注释

    

    • 1

    多行注释

    

    • 1
    • 2
    • 3
    • 4
    • 5

    由于 HTML 代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找

    
导航条所有的 html 代码


左侧菜单栏的 HTMl 代码


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    HTML 文档结构

    <html>
  <head>head>:head 内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
  <body>body>:body 内的标签 写什么浏览器就渲染什么 用户就能看到什么
html>

    • 1
    • 2
    • 3
    • 4

    PS:文件的后缀名其实是给用户看到的，只不过对应不同的 文件后缀名有不同的软件来处理并添加很多功能

    注意:HTML 代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码

    标签的分类

    双标签

    <h1>h1>
<a href="https://www.mzitu.com/">a>

    • 1
    • 2

    单标签(自闭和标签)

    <img/>

    • 1

    head 内常用标签

    <title>Titletitle>  				网页标题
<style>style>  	  				内部用来书写 css 代码
<script>alert(123)script>  		内部用来书写 js 代码
<script src="myjs.js">script>     还可以引入外部 js 文件
<link rel="" href="mycss.css">      引入外部 css 文件
<meta name="keyword" content="淘宝"> 当你在用浏览器搜索的时候 只要输入了 keywords 后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    body 内基本标签

    基本标签

    <h1>我是 h1h1>  标题标签 1～6 级标题，数字越小字体越大
<b>加粗b>
<i>斜体i>
<u>下划线u>
<s>删除线s>
<p>段落p>
<br>  换行
<hr>  水平分割线

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    块儿级标签

    块儿级标签:独占一行

    h1~h6	p div

    • 1

    ps：
    1 .块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2. 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
    3.但是 p 标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
    4.如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)

    行内标签

    i u s b span

    • 1

    行内标签:自身文本多大就占多大
    行内标签不能嵌套块儿级标签 可以嵌套行内标签

    特殊符号

       空格
>   大于号
<   小于号
&  &
¥  ¥
©		©
商标®  ®

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    列表标签

    无序列表(较多)

    <ul>
          <li>第一项li>
          <li>第二项li>
          <li>第二项li>
          <li>第二项li>
  ul>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    有序列表

    <ol type="1" start="5">
      <li>111li>
      <li>222li>
      <li>333li>
  ol>

    • 1
    • 2
    • 3
    • 4
    • 5

    标题列表

     <dl>
      <dt>标题 1dt>
      <dd>内容 1dd>
      <dt>标题 2dt>
      <dd>内容 2dd>
      <dt>标题 3dt>
      <dd>内容 3dd>
  dl>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    表格标签

    <table>
        <thead>
  			<tr>  一个 tr 就表示一行
                <th>usernameth>  加粗文本
                <td>usernametd>  正常文本
            tr>
  			thead>  表头(字段信息)
        <tbody>
        	<tr>
                <td>a1td>
                <td>a2td>
                <td>a3td>
            tr>
        tbody>	 表单(数据信息)
table>


<table border="1">  加外边宽
<td colspan="2">a2td>  colspan:水平方向占多行
<td rowspan="2">a3td>   rowspan:垂直方向占多行


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    form 表单

    action

    action:控制数据提交的后端路径(给哪个服务端提交数据)
		 1.什么都不写  默认就是朝当前页面所在的 url 提交数据
		 2.写全路径:https://www.baidu.com  朝百度服务端提交
		 3.只写路径后缀 action='/index/'  
		 	自动识别出当前服务端的 ip 和 port 拼接到前面
		     host:port/index/

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    input 和 label 标签

    <label for="d1">  
第一种 直接讲 input 框写在 label 内
username:<input type="text" id="d1">
label>					
第二种 通过 id 链接即可 无需嵌套
<label for="d2">password:label>
<input type="text" id="d2">

ps:input 不跟 label 关联也没有问题
label 和 input 都是行内标签

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    input

    input 标签 就类似于前端的变形金刚  通过 type 属性变形
	text:普通文本
    password:密文
	date:日期	
    submit:用来触发 form 表单提交数据的动作
    button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，
    reset:重置内容

    radio:单选
    默认选中要加 checked='checked'
    <input type="radio" name="gender" checked='checked'>男

    当标签的属性名和属性值一样的时候可以简写
    <input type="radio" name="gender" checked>女
	checkbox:多选
  	<input type="checkbox" checked>DBJ
  
  file:获取文件  也可以一次性获取多个
    	<input type="file" multiple>
  hidden:隐藏当前 input 框
    	钓鱼网站

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    select 标签

    select 标签 默认是单选 可以加 mutiple 参数变多选 默认选中 selected
						
    <select name="" id="" multiple>
        <option value="" selected>新垣结衣option>
        <option value="" selected>斯佳丽option>
        <option value="">明老师option>
    select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    textarea 标签

    textarea 标签  获取大段文本
<textarea name="" id="" cols="30" rows="10">textarea>

    • 1
    • 2

    能触发 form 表单提交数据的按钮有哪些(重要)

    1、<input type="submit" value="注册">

    • 1

    所有获取用户输入的标签 都应该有 name 属性

    name 就类似于字典的 key
用户的数据就类似于字典的 value
<p>gender:
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
p>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    form 表单默认提交数据的方式

    form 表单默认提交数据的方式 是 get 请求  数据是直接放在 url 后面的

	<form action="http://127.0.0.1:5000/index/" method="post">


    • 1
    • 2
    • 3
    • 4

    form 表单提交文件需要注意

    form 表单提交文件需要注意
	1.method 必须是 post
	2.enctype="multipart/form-data"
		enctype 类似于数据提交的编码格式
			默认是 urlencoded 只能够提交普通的文本数据
			formdata 就可以支持提交文件数据

# 针对用户输入的标签。如果你加了 value 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值">label>
disable 禁用
readonly 只读

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 相关阅读:
    FPGA实现Avalon-MM接口通信
    基于JAYA优化的BP神经网络（分类应用） - 附代码
    SpringSecurity入门
    虚拟内存管理
    【CCF CSP】201812-1小明上学
    挑战英伟达的新玩家？Tenstorrent虫洞分析
    HTML 常用标签及练习
    C++多重继承解决方法
    下雨小雲動畫
    PHP 可用的函数
  • 原文地址：https://blog.csdn.net/kafu0/article/details/126065092