首页 > 其他分享 >HTML基础知识

HTML基础知识

时间:2023-02-03 19:58:27浏览次数:47  
标签:里面 提交 标签 基础知识 输入框 HTML 设置 type

html学习内容

html文件就是整个网页的架构 css就是给网页添加细节,给网页添加颜色,定制尺寸等 js动态效果(生成可以点击的连接按钮)(javascript) jquery就是对js的一种封装 bootstrap就是对上面所有内容的封装版

浏览器 客户端给服务端发送消息叫请求 服务端给客户端发送消息叫响应

"HTTP/版本 200(状态码) ok \r\n\r\n"

html文件的标签

标签必须是封闭的,一个是自封闭,一个是组合封闭。  
<meta># 自封闭标签  
<h1></h1> # 组合封闭标签  

标签属性

<h1>内容</h1> 将内容加粗加黑  

url 就是统一资源定位器(网址),通过url找到你想要的东西  
<meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/socialism/">   http-equiv是一个标签属性 refresh的意思就是刷新 content=2代表着这个网页两秒以后会跳转。  
这一句上面那一句话的意思就是刷新两秒以后跳转到https://www.cnblogs.com/socialism/">  

<meta name="keywords" content="搜索内容">定义 搜索的关键字  

<h1></h1>到<h6></h6>都是加粗加大,h1最大,h6最小  

<button>我是一个按钮</button>  

<b>加粗</b>  

<i>倾斜</i>  

<u>下划线</u>  

<s>删除</s>  

<br>换行  

<hr>线条  

<p></p>段落标签  

<div></div>独占一行  
<span></span> <span>不独占一行,没有任何效果</span>  

a标签

  • 如果a标签没有href属性值的话就和文本标签没啥区别。如果有href属性没有值的话,就会刷新当前页面。如果不想让a标签刷新页面,那么就把href属性值设置成#。将href属性值设置成javascript:void(0);那么就会保留a标签的效果并且不会刷新页面,也不会在url后面添加#。

  • 当前的url后面加上#,那么就不会刷新当前页面

<a href="javascript:void(0);"></a>

 

图片标签

<img src="" alt="" titel="" width="" height="">显示图片。  
src里面可以放网络绝对路径和同一个文件下的相对路径。
alt里面放的是加载不出来图片的时候显示的内容,title是鼠标悬浮时的提示信息。
width是定义图片的宽度,height是定义图片的高度。

<a href="网址">域名</a>标签超链接标签 target属性_blank就是使用其他页面打开,_self就是使用当前页面打开某个网站

排序列表标签

<ul> <li></li> </ul> 无序列表标签 type控制属性 当type="none"  
时,前面的小圆点就不显示,等于square时前面的小圆圈就会变成小方块。等于circle时前面就会变成空心圆点  

<ol><li></li><\ol>有序列表标签,可以使用type来控制显示的符号,默认是显示数字,设置type等于a或A时就会显示英文  
type设置成I,还可以设置start,设置start就是设置开始序号的值。  

题列表标签(菜单)

 <dl>
  <dt></dt>
  <dd></dd>
  </dl>
    <dl>
      <dt>菜单1</dt>
      <dd>西红柿炒鸡蛋</dd>
        <dt>菜单2</dt>
      <dd>竹笋炒肉丝</dd>
    </dl>

html中的特殊符号

&nbsp;就表示一个空格
&lt;就表示小于号
&gt;表示大于号
&amp;表示and符号
&copy;表示版权标识
&reg;表示注册标识

表格标签

<table border="" cellpadding=""> # border表示加边框,里面的值表示边框的宽度
  cellpadding设置文字与内边框的距离
  cellspacing设置内边框与外边框的距离
   
  <thead> # 表头
  <tr> # 表示一行
  <th> # 表示一个单元格
  </th>
  </tr>
  </thead>
  <tbody> # 列表的主体部分
  <tr>
  <td></td> # 一个单元格
  </tr>
  </tbody>
  </table>

 

form标签 表单标签 (将数据提交到后台)

<from action="http://127.0.0.1:8001" method="post">
method可以设置请求的方式,默认为po
  action 指定数据提交的路径
  enctype可以更改提交数据的
  用户名:<input type="text",name="username">
  密码:<input type=password name="password">
  <br>
  <br>
  <input type='file'></input>
  # type=file表示传输文件,想要获取文件对象需要使用files[0]
  <input type="radio" name="sex" value="1"> male
  <input type="radio" name="sex" value="2"> female
  <br>
  <br>
  <input type="checkbox" name="hobby" value="a"> drink
  <input type="checkbox" name="hobby" value="b"> smoking
  <input type="checkbox" name="hobby" value="c"> perm
  <input type="submit" value="register"> # 将from标签里面的内容全部提交到指定地址
  <button>提交</button> # button也可以提交from表单中的值
  </from>     指定按钮显示的值

input标签 用户标签 (可以写在from表单里面)

方式1  
<label for="username">用户名</label>  
<input type="text" name="username" id="username"> # 普通的输入框  
方式2  
<label><input type=password name="password" id="password"readonly> # 输入的内容变成密文的</label>  
readonly使得输入框只能看不能改,使用readonly数据还可以提交到后台去  
disabled可以限制输入框和单选多选框的输入,不过使用了disabled以后数据就不能提交到后台去了  

<input type="radio" name="sex" value="a"> male   <input type="radio" name="sex" checked="checked" value="b"> female 单选框  
checked 默认选中      
输入框里面name是分组,但是在选择框里面name是提交数据的一个值  
选择框没有value数据就无法提交,提交的数据就是on  

<input type="checkbox"> drink   <input type="checkbox"> smoking   <input type="checkbox"> perm  
<input type="date"> 日期输入框  
<input type="button">   <input type=reset> # 重置from表单里面所有的内容  
<input type=hidden>   <input type=file> # 选择文件  
<input type="submit"> # 提交按钮  
value在输入框里面表示默认值  

select和label标签(可以写在from表单里面)

select是一个下拉伸输入框(下拉选择框)  
  <select name="" multiple>  
<option value="" selected> 北京</option>  
<option value=""> 上海</option>  
<option value=""> 深圳</option>  
</select>   select标签和option标签是固定搭配标签  
没有value数据也可以提交,但是提交的是文本  
在标签里面加一个multiple就是下拉多选  
在option标签里面加一个selected就表示默认选中  

textarea标签

    <textarea name="" id="" cols="30" rows="10"></textarea>  
name是提交数据使用的,id是配合label标签使用的,  
cols是设置输入的列数,rows是设置输入的行数  
可以使用disable禁用文本框  

标签分类(超文本标记语言)

内敛标签:不独占一行内敛标签只能嵌套内敛标签  
块级标签:自己独占一行,块级标签可以嵌套内敛标签和某些块级标签   \h1-h6\br\hr\p\div   p标签里面不能加块级标签也不能加p标签  
# 去除网页的margin和padding使得网页更加丰满  
再写html文档的时候都要写  
body{   margin:0;   padding:0;   }

标签:里面,提交,标签,基础知识,输入框,HTML,设置,type
From: https://www.cnblogs.com/socialism/p/17090304.html

相关文章

  • 前端css基础知识
    css(cascadingstylesheet)层叠样式表就是控制html中的标签样式CSS代码写法:选择器:{css代码属性:属性值}CSS代码引入方式一 在head标签里面写 <style>   ......
  • html 笔记
    快捷键ctrl+/<--注释:在网页中不起任何代码作用,只是用于提示ctrl+/--><title></title> 标签网页标题栏<br> 换行符<p>表示一个段落,段落结束自己动换行,不同的段......
  • 如何让公司其他人(同一个局域网)访问自己电脑静态.html
    还没完全开发完,也没有部署到服务器上,此时领导想要在他电脑上看效果。问:如何让他访问我本地的静态html答:vscode下载插件LiveServer。下载成功后,vscode中右键点击本地ht......
  • HTML一键打包APK工具最新版1.9.2更新(附下载地址)
    HMTL网址打包APK,可以把本地HTML项目,Egret游戏,网页游戏,或者网站打包为一个安卓应用APK文件,无需编写任何代码,也无需配置安卓开发环境,支持在最新的安卓设备上安装运行。打包......
  • html+css部分复习-cnblog
    HTML+CSS部分复习(蓝桥杯参考)0.考前准备插件安装设置:文件自动格式化1.web标准结构(HTML)表现(CSS)行为(js)2.前端插件安装3.img的border属性属性值:数......
  • gstreamer 基础知识
    Gstreamer基础知识1.Gstreamer组件创建一个Gstelement办法是借助于GstElementFactory工厂对象。//mad是工厂对象的名称decoder是创建出element的名字。e......
  • IText7将html转换为pdf
    ......
  • Html音频播放代码
    页面代码:<html><head><scriptsrc="https://code.jquery.com/jquery-3.1.1.min.js"></script><!--media=print这个属性可以在打印时有效--><title>音......
  • 数据库:事务基础知识
    事务概述存储引擎支持情况可以使用SHOWENGINES命令查看Mysql支持事务的存储引擎有哪些。Mysql中只有InnoDB支持事务。基本概念事务:一组逻辑操作单元,使数据从一种状......
  • HTML个人主页
    目录GitHub个人主页1行1列index.htmlstyle.css3行1列1行2列4行3列GitHub个人主页1行1列index.htmlstyle.css3行1列1行2列4行3列......